How to style Shopify Buy button on external website

English Shopify Shopify Apps
1

Hi all,

Does anyone know if it’s possible to style the contents of a Shopify Buy Button on an external website? When you create a buy button, you get an embed that you can then paste on your external website. In my case, this is Webflow.

The components in a Shopify buy button are all aligned to the center by default, and all I’m trying to accomplish here is that they align to the left.

Below you can see the example of the default embed, and what I am trying to achieve.

Frame 272.jpg
Frame 272.jpg1239×540 38.8 KB

I have contacted several Shopify Experts and Shopify Customer Support, but so far, no one has been able to help me out.

This is the Live Website Link: https://mystic-spores.webflow.io/products/lions-mane
This is the Embed Code:
2

Hey @mysticspores

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1696501021439.png
Moeed_0-1696501021439.png761×487 14.7 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi, @mysticspores .

Follow These Steps.

Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.

.shopify-buy__layout-vertical {
    text-align: left !important;
}

.shopify-buy__quantity {
    width: 280px;
    border-right: 1px solid #d3dbe2!important;
}

button.shopify-buy__btn.shopify-buy__beside-quantity {
    margin-top: 10px !important;
}

Result:

websensepro_0-1696503026376.png
websensepro_0-1696503026376.png1347×497 98.8 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Websensepro

4

Hi Moeed, Thanks for taking the time and helping. I followed the instruction and edited the code but this unfortunately did not resolve this. Can you confirm with me that that the code in my Shopify Store is linked to the Buy button functionality on my external website?

5

Hi Websensepro, thank you for taking the time and helping. I followed the instruction and edited the code, but this unfortunately did not resolve this. I did not see anthing change on my external website.

Can you confirm with me that that the code in my Shopify Store is linked to the Buy button functionality on my external website?