Change 'Add To Cart' button in Supply theme

Highlighted
Shopify Partner
1 0 2

dave mizrachi

Try:

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

 

2 Likes
Highlighted
Shopify Partner
8 0 0

Andrej.... you are ninja!

thanks my man.

Getting this supply theme tweaked really good right now.

one thing I'm trying to do now is customize some of the text in the template... for example... on the cart page in supply... it just says "shopping cart".... which sucks for conversions.

anyone know how we can change that to something else? "Your Shopping Cart" is much better and i think will improve conversions.

anyone know how to do this?

big thanks :)

0 Likes
Highlighted
New Member
1 0 0

I have a similar issue to what Dave Miz has;  I am trying to customize text in the "add to cart" button on product pages as well.  But just the other day (9/7/2017) upon previewing my store, all of a sudden the text was entirely gone from my "add to cart" button. I hadn't messed with any code to that point.  Any ideas?

0 Likes
Highlighted
New Member
1 0 0

@ Dave Miz

change text on "shopping cart"

Online Store > Themes > Action > Edit Language > Cart > Title

no coding just change text to whatever and click save. Super easy, just difficult to find.

0 Likes
Highlighted
New Member
2 0 0

Cant Change 'Add To Cart' button.Would like to make it bigger.Any One Help Please.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
578 6 107

Hi there Faysal,

So you should be able to make your Add To Cart button larger by adding the following code to the very bottom of your theme.scss.liquid file. 

button#AddToCart.btn {
  width: 300px;
  height: 60px;
}

You could adjust the pixels sizes for width and height so that the size is exactly how you would like

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.

I hope this helps Faysal, if you have any other questions, please let me know.

Cheers,

Liam | Partner Education

support@shopify.com

0 Likes
Highlighted
New Member
2 0 0

Hi guys, the code is perfectly working for me and i understood how to customize it perfectly, however the button is too big on my phone and it's stretching the page. even thought i've put the @media screen code. Any thoughts how to fix it ? 

 

Thank you

0 Likes
Highlighted
New Member
2 0 0

Hi,

Still it does not work for me. I want to make the Add to cart button big 

0 Likes
Highlighted
New Member
1 0 0

Hi, this doesn't work for me on the Brooklyn theme?? Can you please advise? Thank you.

 

Leanne

0 Likes
Highlighted
New Member
1 0 0

@Liam 

Same here, the code showed in this forum doesn't work on the Brooklyn theme.

0 Likes