Changing the ‘Buy Now’ button color can improve the call to action (CTA) of your website. Colors have a psychological effect on shoppers. The majority of research studies presented that red button colors have escalated conversions compared with a green button. Red may be a dominant color but it may not apply to all websites. Selecting a good CTA button would make a difference on your website.

Tip:

You may change the background-color and color according to your preference. You may use either hex-decimal code or color name.

You can pick a color using online HTML color picker tools: https://www.w3schools.com/colors/colors_picker.asp

This procedure is applicable in both themes 2.0 and 3.0.

To alter the “Buy Now” button color, perform these easy steps:

STEP 1. Under Sales Channels, select Online Store.

STEP 2. On the right portion of the page, click on Customize.

STEP 3. Located on the bottom part of the sidebar menu, tap Theme actions.

STEP 4. Tap Edit Code.

STEP 5. Go to Assets folder and select theme.scss.liquid.

STEP 6. Here is an example code that you may paste at the bottom in a new line:

.product-single__form .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded{
background-color: #066828;
border-color: #00612c;
color: #fff;
}

You can pick a color using online HTML color picker tools: https://www.w3schools.com/colors/colors_picker.asp

Did this answer your question?