Solved

Buy button not centering in div

bartonlewis
Excursionist
22 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.

Accepted Solutions (2)
bartonlewis
Excursionist
22 1 2

This is an accepted solution.

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

View solution in original post

Trevor
Community Moderator
3391 459 977

This is an accepted solution.

Hey, everyone! 

 

We’re following up on this thread as it mentions the Shopify Lite plan. 

 

We’d like to announce that as of June 22nd, 2022, we have launched the Shopify Starter Plan! The Starter Plan will be $5 per month and will be replacing the Shopify Lite plan ($9/month). 

 

The Starter Plan includes everything merchants need to build social-first businesses, on their phone. The plan allows merchants to create product pages that are easily shareable across social and messaging apps, powered by Shopify checkout, payment, order, and analytics features. 


You can learn more about the Shopify Starter Plan here


Disclaimer: Due to the age of this thread, we will be locking the thread for new replies. Please create a new thread under the Shopify Discussions board for questions relating to the Starter plan.

Trevor | Community Moderator @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

View solution in original post

Replies 17 (17)

Eric_K_
Shopify Expert
120 22 51

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>
bartonlewis
Excursionist
22 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.

emilbryggare
Shopify Partner
21 0 16

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.
bartonlewis
Excursionist
22 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.  

bartonlewis
Excursionist
22 1 2

This is an accepted solution.

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

idealwrap
Tourist
7 0 1

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!!

bartonlewis
Excursionist
22 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.

sjm117
Visitor
1 0 0

@bartonlewis wrote:

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


Hi there Barton, do you mind sharing the code for this? I'm having the same issue and I'm unsure where exactly you're making the margin "auto". 

Thank you!

bartonlewis
Excursionist
22 1 2

Please see my previous post in this thread.  As I say there, my code subsequently changed, and I no longer have that earlier version of my page.  Sorry I could not be of more help.

Akshay_V
Shopify Partner
438 16 58

@sjm117 

Please share your store URL with me. I will guide you.

Akshay Vaghasiya | Email: hello@lavitastic.com | Skype: akshayvaghasiya84
Want to modify theme or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Buy me a coffee PayPal
Aretios
New Member
4 0 0
Hi! I have a button that I am putting on my squarespace site and even though I hit "center" align, it is NOT centered.
How can I fix this?
Here is the code for the button:

<div id='product-component-1589469777320'></div>
&lt;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: 'aretios.myshopify.com',
storefrontAccessToken: 'b1d6304223241deac0518cb4f6d1c2b7',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '3670633021536',
node: document.getElementById('product-component-1589469777320'),
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"
}
},
"button": {
"font-size": "14px",
"padding-top": "15px",
"padding-bottom": "15px",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#e6e6e4"
},
"background-color": "#fffffd",
":focus": {
"background-color": "#e6e6e4"
},
"border-radius": "0px",
"padding-left": "29px",
"padding-right": "29px"
},
"quantityInput": {
"font-size": "14px",
"padding-top": "15px",
"padding-bottom": "15px"
}
},
"contents": {
"img": false,
"title": false,
"price": false
},
"text": {
"button": "GET MY COPY"
}
},
"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-size": "14px",
"padding-top": "15px",
"padding-bottom": "15px",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#e6e6e4"
},
"background-color": "#fffffd",
":focus": {
"background-color": "#e6e6e4"
},
"border-radius": "0px",
"padding-left": "29px",
"padding-right": "29px"
},
"quantityInput": {
"font-size": "14px",
"padding-top": "15px",
"padding-bottom": "15px"
}
},
"text": {
"button": "Add to cart"
}
},
"cart": {
"styles": {
"button": {
"font-size": "14px",
"padding-top": "15px",
"padding-bottom": "15px",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#e6e6e4"
},
"background-color": "#fffffd",
":focus": {
"background-color": "#e6e6e4"
},
"border-radius": "0px"
}
},
"text": {
"total": "Subtotal",
"button": "Checkout"
},
"popup": false
},
"toggle": {
"styles": {
"toggle": {
"background-color": "#fffffd",
":hover": {
"background-color": "#e6e6e4"
},
":focus": {
"background-color": "#e6e6e4"
}
},
"count": {
"font-size": "14px",
"color": "#000000",
":hover": {
"color": "#000000"
}
},
"iconPath": {
"fill": "#000000"
}
}
}
},
});
});
}
})();
/*]]>*/
&lt;/script&gt;
LukeWard
Visitor
1 0 5

This worked for me. I'm using the custom Buy Button created from the shopify sales channel.

The first line of code will look like this:

<div id='product-component-1627766701046'></div>

Center it by adding the auto margin to the div tag. It should look like this:

<div id='product-component-1627766311667' style="margin: 0 auto;"></div>

This is all I had to change and the button is now centered! Hope this helps.

urbanminimalist
Visitor
1 0 0

Thanks - I tried a bunch of different fixes and this finally worked. I really appreciate it!

Aretios
New Member
4 0 0

Hi! I have a button that I am putting on my squarespace site and even though I hit "center" align, it is NOT centered.

How can I fix this? 

Here is the code for the button:

 

<div id='product-component-1589469777320'></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: 'aretios.myshopify.com',

      storefrontAccessToken: 'b1d6304223241deac0518cb4f6d1c2b7',

    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {

      ui.createComponent('product', {

        id: '3670633021536',

        node: document.getElementById('product-component-1589469777320'),

        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"

        }

      },

      "button": {

        "font-size": "14px",

        "padding-top": "15px",

        "padding-bottom": "15px",

        "color": "#000000",

        ":hover": {

          "color": "#000000",

          "background-color": "#e6e6e4"

        },

        "background-color": "#fffffd",

        ":focus": {

          "background-color": "#e6e6e4"

        },

        "border-radius": "0px",

        "padding-left": "29px",

        "padding-right": "29px"

      },

      "quantityInput": {

        "font-size": "14px",

        "padding-top": "15px",

        "padding-bottom": "15px"

      }

    },

    "contents": {

      "img": false,

      "title": false,

      "price": false

    },

    "text": {

      "button": "GET MY COPY"

    }

  },

  "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-size": "14px",

        "padding-top": "15px",

        "padding-bottom": "15px",

        "color": "#000000",

        ":hover": {

          "color": "#000000",

          "background-color": "#e6e6e4"

        },

        "background-color": "#fffffd",

        ":focus": {

          "background-color": "#e6e6e4"

        },

        "border-radius": "0px",

        "padding-left": "29px",

        "padding-right": "29px"

      },

      "quantityInput": {

        "font-size": "14px",

        "padding-top": "15px",

        "padding-bottom": "15px"

      }

    },

    "text": {

      "button": "Add to cart"

    }

  },

  "cart": {

    "styles": {

      "button": {

        "font-size": "14px",

        "padding-top": "15px",

        "padding-bottom": "15px",

        "color": "#000000",

        ":hover": {

          "color": "#000000",

          "background-color": "#e6e6e4"

        },

        "background-color": "#fffffd",

        ":focus": {

          "background-color": "#e6e6e4"

        },

        "border-radius": "0px"

      }

    },

    "text": {

      "total": "Subtotal",

      "button": "Checkout"

    },

    "popup": false

  },

  "toggle": {

    "styles": {

      "toggle": {

        "background-color": "#fffffd",

        ":hover": {

          "background-color": "#e6e6e4"

        },

        ":focus": {

          "background-color": "#e6e6e4"

        }

      },

      "count": {

        "font-size": "14px",

        "color": "#000000",

        ":hover": {

          "color": "#000000"

        }

      },

      "iconPath": {

        "fill": "#000000"

      }

    }

  }

},

      });

    });

  }

})();

/*]]>*/

</script>

Aretios
New Member
4 0 0

My buttons are not centering on my page: aretios.com/thedaily

 

Below is the code for the button

 

 

<div id='product-component-1589469777320'></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: 'aretios.myshopify.com',

      storefrontAccessToken: 'b1d6304223241deac0518cb4f6d1c2b7',

    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {

      ui.createComponent('product', {

        id: '3670633021536',

        node: document.getElementById('product-component-1589469777320'),

        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"

        }

      },

      "button": {

        "font-size": "14px",

        "padding-top": "15px",

        "padding-bottom": "15px",

        "color": "#000000",

        ":hover": {

          "color": "#000000",

          "background-color": "#e6e6e4"

        },

        "background-color": "#fffffd",

        ":focus": {

          "background-color": "#e6e6e4"

        },

        "border-radius": "0px",

        "padding-left": "29px",

        "padding-right": "29px"

      },

      "quantityInput": {

        "font-size": "14px",

        "padding-top": "15px",

        "padding-bottom": "15px"

      }

    },

    "contents": {

      "img": false,

      "title": false,

      "price": false

    },

    "text": {

      "button": "GET MY COPY"

    }

  },

  "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-size": "14px",

        "padding-top": "15px",

        "padding-bottom": "15px",

        "color": "#000000",

        ":hover": {

          "color": "#000000",

          "background-color": "#e6e6e4"

        },

        "background-color": "#fffffd",

        ":focus": {

          "background-color": "#e6e6e4"

        },

        "border-radius": "0px",

        "padding-left": "29px",

        "padding-right": "29px"

      },

      "quantityInput": {

        "font-size": "14px",

        "padding-top": "15px",

        "padding-bottom": "15px"

      }

    },

    "text": {

      "button": "Add to cart"

    }

  },

  "cart": {

    "styles": {

      "button": {

        "font-size": "14px",

        "padding-top": "15px",

        "padding-bottom": "15px",

        "color": "#000000",

        ":hover": {

          "color": "#000000",

          "background-color": "#e6e6e4"

        },

        "background-color": "#fffffd",

        ":focus": {

          "background-color": "#e6e6e4"

        },

        "border-radius": "0px"

      }

    },

    "text": {

      "total": "Subtotal",

      "button": "Checkout"

    },

    "popup": false

  },

  "toggle": {

    "styles": {

      "toggle": {

        "background-color": "#fffffd",

        ":hover": {

          "background-color": "#e6e6e4"

        },

        ":focus": {

          "background-color": "#e6e6e4"

        }

      },

      "count": {

        "font-size": "14px",

        "color": "#000000",

        ":hover": {

          "color": "#000000"

        }

      },

      "iconPath": {

        "fill": "#000000"

      }

    }

  }

},

      });

    });

  }

})();

/*]]>*/

</script>

Tabono
Visitor
1 0 0

Thank you this solved the issue for me. 

Trevor
Community Moderator
3391 459 977

This is an accepted solution.

Hey, everyone! 

 

We’re following up on this thread as it mentions the Shopify Lite plan. 

 

We’d like to announce that as of June 22nd, 2022, we have launched the Shopify Starter Plan! The Starter Plan will be $5 per month and will be replacing the Shopify Lite plan ($9/month). 

 

The Starter Plan includes everything merchants need to build social-first businesses, on their phone. The plan allows merchants to create product pages that are easily shareable across social and messaging apps, powered by Shopify checkout, payment, order, and analytics features. 


You can learn more about the Shopify Starter Plan here


Disclaimer: Due to the age of this thread, we will be locking the thread for new replies. Please create a new thread under the Shopify Discussions board for questions relating to the Starter plan.

Trevor | Community Moderator @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog