How to Change the Color of the Buy it Now Button in the Debutify Theme?

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

How to Change the Color of the Buy it Now Button

STEP 1

In Shopify Admin, select Online Store.

STEP 2

Select your Debutify Shopify theme and 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