Change 'Add To Cart' button in Supply theme

Highlighted
New Member
2 0 1

Hi all,

anyone who can help me change the 'Add To Cart' button please?

Would like to make it bigger, wider and green (rounded edges) + bigger lettertype

Thanks!

Dennis

1 Like
Highlighted
Shopify Staff
Shopify Staff
574 6 105

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

1 Like
Highlighted
New Member
2 0 1

OMG it works!

Thank you!

0 Likes
Highlighted
New Member
1 0 0

Liam

 

Thanks for that info for Dennis - it works a treat as you know lol !

 

Is it possible to place an image under the Add To Cart button similar to this below ?

 

Thank you 

Warren

 

 

0 Likes
Highlighted
New Member
3 0 0

Hi Liam,
I used your code and was able to make my Add to Cart button bigger but it doesn't resize for mobile devices. Is there a code that is able to make it automatically resize to fit mobile devices? 

0 Likes
Highlighted
Shopify Expert
2686 67 683

Hi Bien,

you can try adding code similar to this at the bottom of the theme.scss.liquid  Asset:

@media screen and (max-width: 480px){
  button#addToCart { width: 100%; }
}

This will make the button full-width on smaller screens.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
New Member
3 0 0

Thank you so much Tim :)

0 Likes
Highlighted
Shopify Partner
2 0 0

Thankyou to everyone here i manage to change the button size and the color perfectly, and is 100% responisve.

However i need to change de text from "add to cart" to "buy it Now", how cani do that? also also when i change the text i need to make all the change code again? 

 

0 Likes
Highlighted
Shopify Expert
2686 67 683

Hi Raimundo, 

No you would not have to re-apply the changes.

Do not know the theme you're using, but for many themes the text can be changed in the theme Language: click the 3-dot button by the theme name, select "Edit language" and look under the Products tab.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Shopify Partner
2 0 0

Thank you that was really easy!!

0 Likes