Buy Button - center

Highlighted
Shopify Partner
10 0 0

Hi,

Can anyone help please? I embeded the buy button (Buy button only - linked to 'cart'). On WordPress site with raw html embed, but it's default to left aligned. How to align it to 'center' please. Thank you in advance. Alex

0 Likes
Highlighted
Shopify Staff
Shopify Staff
28 0 2

Hey Alex!

Alida here from Shopify. You should be able to append a style in the HTML for the embed code to have a centre align. If the embed code looks like so: 

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page">

We can add a style="text-align: center;" into this; 

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page" style="text-align: center;">

Barring that, you can assign a class to the buttons and align it in your master stylesheet for your Wordpress theme. In that case, you'd do like so (as an example):

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page" class="buy-button-center">

And then at the bottom of your Wordpress theme's stylesheet, you should be able to add

.buy-button-center {
text-align: center;
}

And that should fix you up.

 

Hope this helps!

0 Likes
Highlighted
Shopify Partner
10 0 0

Hi Alida,

Thank you so much for your help. I tried with no success though. 

Now let's say I have the buy button embed code below...

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>
<script type="text/javascript">
document.getElementById('ShopifyEmbedScript') || document.write('<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js"; id="ShopifyEmbedScript"><\/script>');
</script>
<noscript><a href="https://yourstorename.myshopify.com/cart/1590898625:1"; target="_blank">Buy your product</a></noscript>

 

Where should I place the 

.buy-button-center {
text-align: center;
}

 

Thanks.

 

0 Likes
Highlighted
Shopify Partner
3 0 3

I tried this too and it didn't work. It's not actually perfectly left-aligned either, there's about a 50px margin on the left too. I also tried wrapping the whole thing in another DIV too, didn't work.

0 Likes
Highlighted
Shopify Partner
3 0 3

I just figured out what the issue was with mine, there was another external stylesheet that was making it left-aligned, so once I removed that reference and then encased the whole button code into <div align="center"></div> it properly centered. Probably there's an easier/better way, but it's working anyways...

1 Like
Highlighted
Shopify Partner
10 0 0

Hey Dean, that's excellent. 

So, how exactly you did it? where do I find this 'external stylesheet that was making it left-aligned' you mentioned? and how exactly you encase the whole button code into <div align="center"></div>

thanks in advance.

0 Likes
Highlighted
Shopify Partner
3 0 3

Oh sorry I wasn't clear, the external stylesheet was on our own website, separate from Shopify. I tested it by putting the button on a completely blank webpage with nothing else on it. And I just put <div align="center"> before the copied "Buy" button code from Shopify and a closing </div> tag after the copied code, so it looks something like this:

<div align="center">

<<Copied "Buy" button code from Shopify>>

</div>

If it centers on a blank page but not on the page where you want to put your button, there's probably some other style that's impacting <div> tags somewhere on your page. 

2 Likes
Highlighted
Shopify Partner
10 0 0

Hey Dean, 

Thank you so much for the tips. It works but only I changed mine to 'right' instead of 'center'. Not sure why, but it works. 

Thanks again. You are a legend! 

0 Likes
Highlighted
New Member
1 0 2

This worked for me with the new layout for the code as well. My code doesn't look like the one above but putting the parts in before and after fixed my issue.

This is what mine looks like fixed.

<div align="center">

<div id='product-component-1568907932666'></div>
<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: 'idaho-hemp-co.myshopify.com',
storefrontAccessToken: 'c5074d55a143244f61dd2edd02b95311',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '3692479578189',
node: document.getElementById('product-component-1568907932666'),
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"product": {
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px"
}
},
"title": {
"color": "#0b8e1e"
},
"button": {
":hover": {
"background-color": "#182d83"
},
"background-color": "#1b3291",
":focus": {
"background-color": "#182d83"
}
},
"price": {
"color": "#22e112"
},
"compareAt": {
"color": "#22e112"
}
},
"buttonDestination": "modal",
"contents": {
"options": false
},
"text": {
"button": "View product"
}
},
"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": {
":hover": {
"background-color": "#182d83"
},
"background-color": "#1b3291",
":focus": {
"background-color": "#182d83"
}
}
},
"text": {
"button": "Add to cart"
}
},
"cart": {
"styles": {
"button": {
":hover": {
"background-color": "#182d83"
},
"background-color": "#1b3291",
":focus": {
"background-color": "#182d83"
}
}
},
"text": {
"total": "Subtotal",
"button": "Checkout"
},
"contents": {
"note": true
}
},
"toggle": {
"styles": {
"toggle": {
"background-color": "#1b3291",
":hover": {
"background-color": "#182d83"
},
":focus": {
"background-color": "#182d83"
}
}
}
}
},
});
});
}
})();
/*]]>*/
</script></div>

2 Likes
Highlighted
New Member
1 0 0

HTBAD nailed it. Worked first time. 

 

I have the buy-button code from the editor embedded in a Leadpages html widget and could not get it to center. I've read about 20 different solutions on this.

 

Thanks!

0 Likes