Change 'Add To Cart' button in Supply theme

Highlighted
Shopify Staff
Shopify Staff
575 6 106

Hi Santiago & Gowalt1,

So the syntax for Brooklyn would be different- I checked on my test store and this is working for me:

#AddToCart--product-template {
  width: 300px;
  height: 60px;
}

This would give a result like this:

Hope this helps :) 

 

Liam

0 Likes
Highlighted
New Member
2 0 0

Hi,

I followed your instruction and put the code, put it did not change. my theme is supply

Please help me. Thank you so much

0 Likes
Highlighted
New Member
1 0 0

Hi, I tried using your code in Timber.Scss.Liquid because I can't find Theme.scss.liquid but it does not work. Any idea how to fix this?


@Liam wrote:

Hi Dennis!

Liam here from Shopify - thank you for your question :)

Great to see you are looking to adjust your product page to look exactly how you would like, so let's take a look at how we could customise your Add To Cart button. To make these changes we would be looking to adjust your theme's stylesheet and add some CCS.

You can find the stylesheet within the Edit HTML section in the Assets folder and you're looking for a file called theme.scss.liquid and you will be adding your changes to the very bottom of this file. It's very important not to change any code in the middle of the file as the SCSS file cannot be rolled back, so if there's a problem with new code it is easy to find it at the bottom. You could add this code to the bottom of your theme.scss.liquid file:

#addToCart {
  background-color: green;
  border-radius: 10px;
  width: 300px;
  height: 60px;
  font-size: 25px;
  font-weight: bold;
  
}

This will make your Add to Cart button look like this:

You could experiment with different values to the selectors to get different effect, for example making the button more curved by increasing the value for border-radius or using a hex value for the color selector to get a different shade of green. 

Hope this helps Dennis, if you have any other questions, just let me know!

Cheers,
Liam

Shopify Guru
support@shopify.com


 

0 Likes