Buy button not centering in div

Solved
Excursionist
21 1 2

I am using Shopify Lite and adding in the buy button to my html.  All is going well except that the button is left aligned in the div.  I chose center on the buy button page but that doesn't center it.  This is the first time I am on the forum so I am not sure what's customary to post here - my code (the shopify code and/or mine?) or an image or a link to the page?  Any direction would be appreciated.  Thanks.

0 Likes
Shopify Expert
115 20 38

You need to apply the center on the div that contains the button. Something like this:

<div style="text-align: center; width: 100%;">
  [ BUY BUTTON CODE ] 
</div>
0 Likes
Excursionist
21 1 2

Thank you.  I can't add width: 100% to this div because it makes the thumbnail image fill the page.  This is a thumbnail gallery with the buy button underneath each image.  I tried just adding the text-align: center but it doesn't have any effect.  Any other thoughts?  Thanks again.

0 Likes
Highlighted
Shopify Partner
21 0 3

Welcome to the forum @bartonlewis!

It would be a lot easier for us to help if you can provide us with your store URL.

 

Anyways, try:

<btn style="margin: 0 auto;">Buy</btn>

If that does not work maybe Flexbox can help you.

Founder of Evermark - Smart and automated Facebook ads for your Shopify store.
0 Likes
Excursionist
21 1 2

Thanks.  My store url is bartonlewis.myshopify.com

 

I think the problem with your suggestion as well as the other one that was made is that the words "Buy" or "Add to Cart" (the text that us actually associated with the buy button) never appear in the html.  When you generate code for the buy button you are given a bunch of js and a div with an id (for example: <div id='product-component-f346172a378'></div>).  Therefore you can't center text because there is no text in the code that is provided you.  All you have is a div with a id that links you to the product.  

0 Likes

Success.

Excursionist
21 1 2

I figured this out - just needed to make the margin "auto" for this div.

0 Likes
New Member
7 0 0

Hey, could you explain this a little more? I have the "basic" buy button with image, attempting to add to a blog post, and I have not been able to center it. Tried center tags and auto margins, and still nothing. Thanks!!

0 Likes
Excursionist
21 1 2

Sorry but my code has changed since this post.  But I think before it was just a matter of making the left and right margin for the div that I had placed the buy button in "auto."   If you can't get it to work, I recommend using Storetasker - one of Shopify's experts - to help.  They're extremely reasonable and can do small tasks.

0 Likes