Additional tips to change Add to Cart button colors

Here are some tips help make your Add to Cart button stand out better on product pages:


Easy: Modify the link color in your theme editor

The Add to Cart button uses the Link color value in your theme's color settings:

You can find these settings here:

A blue link color produces an Add to Cart button like this:

Use that color setting to help make your button stand out better. 


Code tip: Change the background color

This requires a basic code change to your CSS file. The result is a filled background color for the Add to Cart button.


Code to use:

/* -- code to change add to cart button color -- */
.add-to-cart__wrapper .btn--clear { 
  background-color: #333333;
  border-color: #333333; 
  color: #ffffff; 
  background-color: #cc0000; 
  border-color: #cc0000; 
  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 - */

Note: Where to add the code is covered below.

Example with hover:

Customize the code for your preference:

(1) The value of #333333 is the hex color code for the background color (almost black). Change that value (#333333;) to any hex color code. Be sure to include the semicolon at the end. 

(2) The border color around the button. Semicolon is required at the end. 

(3) The text color (#ffffff; is white) over the button. Semicolon is required at the end. 

These are the hover colors for the button:

(4) Background hover color. You can modify the value of #cc0000; (red) to any hex color code you like. Semicolon is required at the end. 

(5) Border color for hover. Semicolon is required at the end. 

(6) Text color (#ffffff; is white) when hover is in effect. Semicolon is required at the end. 

Use any valid hex color code:

These are the disabled button color options, shown when a product is sold-out. Same as above, you can modify the values but using RGBa transperience values:


Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Still need help? Contact Us Contact Us