Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Shopify Buy Button Affecting Margins


Question

Site URL: https://pearler.squarespace.com/feels

I've added a Shopify Buy Button onto the page using a code block. However, it's affecting the margins on the right of the section. Any ideas why?  

<div id='product-component-1617764303049' class="nav-gif-wrapper">
  	<img src="https://media0.giphy.com/media/l0Iyl89hueXgsyGRi/giphy.gif" height="100" style="top:-75px; left: 15%;">
<script type="text/javascript">
/*<![CDATA[*/
(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }
  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }
  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'pearlerwork.myshopify.com',
      storefrontAccessToken: 'eec0fbe1582313daf17f1305b3293c33',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: '6641103274161',
        node: document.getElementById('product-component-1617764303049'),
        moneyFormat: '%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-bottom": "50px"
        }
      },
      "button": {
        "font-weight": "bold",
        "color": "#822504",
        ":hover": {
          "color": "#822504",
          "background-color": "#e59ea3"
        },
        "background-color": "#feafb5",
        ":focus": {
          "background-color": "#e59ea3"
        },
        "border-radius": "0px",
        "padding-left": "70px",
        "padding-right": "70px"
      }
    },
    "contents": {
      "img": false,
      "title": false,
      "price": false
    },
    "text": {
      "button": "Add to cart"
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  },
  "modalProduct": {
    "contents": {
      "img": false,
      "imgWithCarousel": true,
      "button": false,
      "buttonWithQuantity": true
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      },
      "button": {
        "font-weight": "bold",
        "color": "#822504",
        ":hover": {
          "color": "#822504",
          "background-color": "#e59ea3"
        },
        "background-color": "#feafb5",
        ":focus": {
          "background-color": "#e59ea3"
        },
        "border-radius": "0px",
        "padding-left": "70px",
        "padding-right": "70px"
      }
    },
    "text": {
      "button": "Add to cart"
    }
  },
  "option": {},
  "cart": {
    "styles": {
      "button": {
        "font-weight": "bold",
        "color": "#822504",
        ":hover": {
          "color": "#822504",
          "background-color": "#e59ea3"
        },
        "background-color": "#feafb5",
        ":focus": {
          "background-color": "#e59ea3"
        },
        "border-radius": "0px"
      }
    },
    "text": {
      "total": "Subtotal",
      "button": "Checkout"
    }
  },
  "toggle": {
    "styles": {
      "toggle": {
        "font-weight": "bold",
        "background-color": "#feafb5",
        ":hover": {
          "background-color": "#e59ea3"
        },
        ":focus": {
          "background-color": "#e59ea3"
        }
      },
      "count": {
        "color": "#822504",
        ":hover": {
          "color": "#822504"
        }
      },
      "iconPath": {
        "fill": "#822504"
      }
    }
  }
},
      });
    });
  }
})();
/*]]>*/
</script>

 

Screen Shot 2021-04-07 at 5.15.44 pm.png

Link to comment

5 answers to this question

Recommended Posts

  • 0
22 hours ago, pearler1570048501 said:

@tuanphan True, thanks! However unfortunately adding this hasn't fixed the issue.

Add this to Code Block

<style>
  .page-section>.content-wrapper {
    box-sizing: border-box !important;
}
</style>

image.thumb.png.245fecf0c02eb56ae72e462bce3431d6.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Hi. You missing a closing div tag

<div id='product-component-1617764303049' class="nav-gif-wrapper">
  	<img src="https://media0.giphy.com/media/l0Iyl89hueXgsyGRi/giphy.gif" height="100" style="top:-75px; left: 15%;">

It should be

<div id='product-component-1617764303049' class="nav-gif-wrapper">
  	<img src="https://media0.giphy.com/media/l0Iyl89hueXgsyGRi/giphy.gif" height="100" style="top:-75px; left: 15%;">
</div>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Also, other problems.

1. (Tablet-Footer) Overlap

pearler.squarespace.com-tablet-footer-mi

2. (Tablet-Homepage)

pearler.squarespace.com-tablet-homepage-

3. (Tablet-Overlay) Menu has 1 item only. Want to force desktop nav on tablet?

pearler.squarespace.com-tablet-overlay-m

4. (Mobile-Homepage) Want to move image on top?

pearler.squarespace.com-mobile-homepage-

5. (Mobile-Feels) Resize image?

pearler.squarespace.com-mobile-feels-min

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Fantastic, @tuanphan that has worked beautifully. 

Yes I've been lazy with my  tablet styling there! Gosh. 

Image ①  Should I just make the button smaller on tablet, or force it to stack somehow? 

Image ② I'm not sure how to make this look better! The 3 columns don't work well on tablet do they, just desktop.

Image ③ I can change the forced mobile menu for tablet, thank you

Image ④ Yes it would probably be good to have the image on top 

Image ⑤ Should I make the container for the gallery have a max-width on tablet?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...