Pop Theme - Change the color of Add To Cart button?

New Member
9 0 0

Hi All, I'm looking to change the color of the add to cart button (Pop Theme), and possibly resize as well.  Any suggestions? Thanks!

 

0 Likes
Shopify Staff
Shopify Staff
537 0 68

Hey, Rob!

Savannah here from the Shopify Guru Team. :) 

Let's break this down into steps. The first part is that we need to create some alternately styled buttons in the theme.scss.liquid. To do that: 

  • Navigate to Online Store>Themes and select, "Edit HTML/CSS" from the Actions menu on Pop. 
  • From the left-hand menu select the Assets folder, and then the timber.scss.liquid file. 
  • On line 1507, paste this code: 
.btn--cart,
input.btn--cart {
  @extend .btn;
  background-color: [ENTER YOUR COLOUR HERE];
  width: 100%;
  height: 100%;

  &:hover {
    background-color: [ENTER YOUR COLOUR HERE];
    color: [ENTER YOUR COLOUR HERE];
  }

  &:active,
  &:focus {
   background-color: [ENTER YOUR COLOUR HERE];
   color: [ENTER YOUR COLOUR HERE];
  }
}

Then, navigate to your product-template.liquid (in your Sections folder) and scroll to line 162, replace

class="btn btn--large btn--full

with 

class="btn--cart" 

In the code above that we placed on line 1507, you can use the width and height percentages to play around with the button's size. 

When it comes to colour, you can remove the entire bit where it says [ENTER YOUR COLOUR HERE] and replace it with the colour of your choice. You can use a hex code (http://htmlcolorcodes.com/) or use the HTML colour name. For example, Crimson or #DC143C. 

Let me know if that does the trick!

Savannah | Shopify Guru
support@shopify.com

0 Likes
New Member
9 0 0

Thanks for the help Savannah! 

Line 1507 looks to be in the middle of the "Tables" section, and the formatting of the page was screwed up when I pasted in the code you provided. Should it be pasted in another section?

 

0 Likes
Shopify Staff
Shopify Staff
537 0 68

Hey, Rob!

Sorry about that - It looks like I'm working with a different version than you are. Try line 1446 instead. :) 

 

Savannah | Shopify Guru
support@shopify.com

0 Likes
New Member
9 0 0

Awesome, I'll give it a go.  Thanks for your help Savannah!

0 Likes
Shopify Partner
9 0 0

Hi ! I tried this but it's not working, can you help me ?

0 Likes
Shopify Partner
1 0 0

Hello,

I need your help to change the language of the "ORDER NOW" + "ADD TO CART" buttons to the Arabic language. can you help me with that?
Also, is there any option to change Text Button to Clickable image?

Screen Shot 2019-03-26 at 18.04.09.png

 

 

 

 

 

 

 

 

 

 

 


i hope to hear from you soon as possible you can :)

Best Regards
Otlobi.Online

0 Likes
Highlighted
New Member
5 0 0

HI i'm trying to change the color hover blackground of all buttons, but I'm not sure to paste it on line 1446, could you confirm? (I have pop theme).

 

image.png

0 Likes