Streaming live at 10am (PST)

Embedded Shopify Buy Button Not Center aligned in my columns


#1

Here is a link to my live site, http://resiliencenutrition.co

I have recently designed a personal website using Webflow (which by the way makes things so much easier) and I need to embed three shopify buy buttons. I have successfully made an account with shopify, designed my button, and embedded into my webpage, however, it does not follow the right alignment and all three of the button are floated left.

The section I want to add the buy buttons too is a row with 3 columns in it. All of the contents in the column are text-align center, so I want the button to be centered as well. Like I mentioned above, all three of the buttons are on the page and functional, however, they do not stay within their respective columns and are all floated left. I tried changing some of the embed code, but I do not know how to do it correctly.

Wondering if I can get some help!

The code I get from the shopify embed code is:

script data-shopify-buy-ui
//<![CDATA[
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy && window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
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: 'resilience-nutrition.myshopify.com',
apiKey: '0d6f6774b46e017a5ac7e7cf8d243a56',
appId: '6',
});

ShopifyBuy.UI.onReady(client).then(function (ui) {
  ui.createComponent('product', {
    id: [8305209801],
    moneyFormat: '${{amount}}',
    options: {"product":{"buttonDestination":"checkout","layout":"vertical","variantId":"all","width":"240px","contents":{"img":false,"title":false,"variantTitle":false,"options":true,"price":false,"description":false,"buttonWithQuantity":false,"button":true,"quantity":false},"text":{"button":"BUY NOW"},"styles":{"product":{"@media (min-width: 601px)":{"max-width":"100%","margin-left":"0","margin-bottom":"50px"}},"button":{"background-color":"#cc142e","color":"#ffffff","font-family":"Helvetica Neue, sans-serif","font-size":"16px","padding-top":"16px","padding-bottom":"16px","padding-left":"26px","padding-right":"26px","border":"none",":hover":{"background-color":"#b81229","color":"#ffffff"},"border-radius":"3px",":focus":{"background-color":"#b81229"},"font-weight":"bold"},"variantTitle":{"font-family":"Helvetica Neue, sans-serif","font-size":"14px","color":"#4c4c4c","font-weight":"bold"},"title":{"font-family":"Helvetica Neue, sans-serif","font-weight":"bold","font-size":"18px","color":"#4c4c4c"},"description":{"color":"#4c4c4c","font-size":"14px","font-family":"Helvetica Neue, sans-serif","font-weight":"bold"},"price":{"font-family":"Helvetica Neue, sans-serif","font-size":"14px","color":"#4c4c4c","font-weight":"bold"},"quantityInput":{"font-size":"16px","padding-top":"16px","padding-bottom":"16px","color":"#4c4c4c"},"compareAt":{"font-size":"12px","font-family":"Helvetica Neue, sans-serif","font-weight":"bold"}}},"cart":{"contents":{"title":true,"lineItems":true,"footer":true,"button":true},"text":{"title":"Cart","total":"Total","notice":"Shipping and discount codes are added at checkout.","button":"CHECKOUT"},"styles":{"button":{"background-color":"#cc142e","color":"#ffffff","font-family":"Helvetica Neue, sans-serif","font-size":"16px","padding-top":"16px","padding-bottom":"16px","padding-left":"26px","padding-right":"26px","border":"none",":hover":{"background-color":"#b81229","color":"#ffffff"},"border-radius":"3px",":focus":{"background-color":"#b81229"},"font-weight":"bold"},"cart":{"background-color":"#ffffff"},"footer":{"background-color":"#ffffff"},"title":{"color":"#4c4c4c"},"close":{":hover":{}}}},"modalProduct":{"contents":{"img":true,"title":true,"variantTitle":false,"options":true,"price":true,"description":true,"buttonWithQuantity":false,"button":true,"quantity":false},"text":{"button":"ADD TO CART"},"styles":{"product":{"@media (min-width: 601px)":{"max-width":"100%","margin-left":"20px","margin-bottom":"50px"}},"button":{"background-color":"#cc142e","color":"#ffffff","font-family":"Helvetica Neue, sans-serif","font-size":"16px","padding-top":"16px","padding-bottom":"16px","padding-left":"26px","padding-right":"26px","border":"none",":hover":{"background-color":"#b81229","color":"#ffffff"},"border-radius":"3px",":focus":{"background-color":"#b81229"},"font-weight":"bold"},"variantTitle":{"font-family":"Helvetica Neue, sans-serif","font-size":"14px","color":"#4c4c4c","font-weight":"bold"},"title":{"font-family":"Helvetica Neue, sans-serif","font-weight":"bold","font-size":"26px","color":"#4c4c4c"},"description":{"color":"#4c4c4c","font-size":"14px","font-family":"Helvetica Neue, sans-serif","font-weight":"bold"},"price":{"font-family":"Helvetica Neue, sans-serif","font-size":"14px","color":"#4c4c4c","font-weight":"bold"},"quantityInput":{"font-size":"16px","padding-top":"16px","padding-bottom":"16px","color":"#4c4c4c"},"compareAt":{"font-family":"Helvetica Neue, sans-serif","font-weight":"bold"}}},"productSet":{"styles":{"products":{"@media (min-width: 601px)":{"margin-left":"-20px"}}}},"toggle":{"styles":{"toggle":{"font-family":"Helvetica Neue, sans-serif","background-color":"#cc142e",":hover":{"background-color":"#b81229"},":focus":{"background-color":"#b81229"},"font-weight":"bold"},"count":{"font-size":"16px"}}},"modal":{"styles":{"modal":{"background-color":"#ffffff"}}},"option":{"styles":{"label":{"font-family":"Helvetica Neue, sans-serif","font-weight":"bold","color":"#4c4c4c"},"select":{"font-family":"Helvetica Neue, sans-serif","font-weight":"bold","color":"#4c4c4c"}}}}
  });
});

}
})();
//]]>


#2

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.