Products: Change Add to Cart button color

If you'd like to use a different color for your Add to Cart button:

Add the following code to the very bottom of this file on a new line:
assets/style.scss.liquid

The code to use:

/* -- code to change add to cart button color and hover -- */
.add-to-cart__wrapper .btn--clear { 
	 background-color: #dc0000;
	 border-color: #dc0000; 
	 color: #ffffff; 
	 &:hover{ 
		 background-color: #349b02; 
		 border-color: #349b02; 
		 color: #ffffff;
		 }}

/* following is disabled state color */
.add-to-cart__wrapper .disabled {
    background-color: rgba(0,0,0,0.3);
    border:1px solid rgba(0,0,0,0.3);
    color: rgba(0,0,0,0.3);
}
/* - end - */

Notes:

Your Add to Cart button has 9 main colors:

  • Regular state background color
  • Regular state border color
  • Regular state font color
  • Hover state background color
  • Hover state border color
  • Hover state font color
  • Disabled state background color
  • Disabled state border color
  • Disabled state font color

(Disabled state is used when a product or variant option is sold out)

When you add the above code you're specifying all 6 of these colors. In this example "#dc0000" is a red color, we've used the same color for the border and change the font to "#ffffff" which is white text on the red background. For the hover state we used "#349b02" which is a green background/border and again the same "#ffffff" white text. 

The hover state normally uses your Accent color in your general color settings:

With the above code change, you'll be able to use a different color (in our example, it's now green) than what's already assigned to your Accent color setting. 

You can adjust the hex colors in this code to suit your needs. 

Here are some hex color codes to explore:

http://www.colorhexa.com/web-safe-colors


Option 2: 

If you don't need to change your hover color, here is another version of the code but without changing your hover state and keeping your Accent color setting. 

This example, we are only changing the Add to Cart button color to red. The hover will remain your Accent color:

/* -- code to change add to cart button color -- */
.add-to-cart__wrapper .btn--clear { 
	 background-color: #dc0000;
	 border-color: #dc0000; 
	 color: #ffffff; }

/* following is disabled state color */
.add-to-cart__wrapper .disabled {
    background-color: rgba(0,0,0,0.3);
    border:1px solid rgba(0,0,0,0.3);
    color: rgba(0,0,0,0.3);
}
/* - end - */

Still need help? Contact Us Contact Us