Tutorial: Changing the Add to Cart and Buy Now Buttons

Bo · October 1, 2020, 8:57am

One of the most common theme customization requests we have seen here at Shopify Support are requests to change how the Add to Cart Button looks. Most commonly, button color, size, font color, and the border color and thickness. This tutorial will instruct you on editing the Add to Cart button and the Buy Button by adding some CSS to the bottom of your theme.scss.liquid file which you can then edit.

Note::

If you’re using a free theme from Shopify, then our Support team might be able to help you with this tutorial. Although Shopify can help you with many customizations, some kinds of customizations aren’t supported.

If you’re using a paid theme, then your theme was made by a third-party developer and Shopify’s Support team can’t help you with it. If you need help customizing a paid theme, then consider hiring a Shopify Expert. Similar to free themes, some kinds of customizations aren’t supported because of limitations associated with the theme or Shopify admin.

Disclaimer:

The “Buy it now” button is a dynamic checkout button. This button will change depending on the visitors’ payment preferences. You will not be able to change the styling or color of the branded dynamic checkout button (ShopPay, ApplePay, GooglePay, PayPal, AmazonPay, etc.)

Important:

The following tutorials are tested on themes published on Sept 2020

Additional Notes:

In the following tutorials, the first block of code is to change the appearance of the button. The second block of code, starting with /* Hover */ changes the button on hover, i.e. when the cursor hovers over the button.

background-color is to change the background color of the button.

border is to change the border. The first part, 2px, refers to the thickness of the border, second part, solid, is the border style, third part, green, is the color of the border. Please visit this page to learn more about CSS border properties.

color is to change the button label/text color.

You can also use hex color to match the button to your branding. Instead of writing the name of the color you would like the button to be you can input the hex code of the color found in this hex color picker online. For example, if you wanted a specific shade of purple you would input color: #7300ed; as opposed to color: purple;

Debut and Venture:

Go to Online Store > Themes > Actions > Edit Code and open the theme.scss.liquid.
To change the “Add to cart” button, paste the following code to the bottom of the file:

.product-form__cart-submit {
  background-color: red;
  border: 2px solid green;
  color: white;
}

/* Hover */
.product-form__cart-submit:hover {
  background-color: blue !important;
  border: 2px solid orange !important;
  color: green !important;
}

To change the “Buy it now” button, paste the code below:

.shopify-payment-button__button.shopify-payment-button__button--unbranded {
  background-color: green !important;
  border: 2px solid red !important;
  color: white !important;
}

/* Hover */
.shopify-payment-button__button.shopify-payment-button__button--unbranded:hover {
  background-color: blue !important;
  border: 2px solid orange !important;
  color: green !important;
}

Edit the values of background-color, border, and color to your liking.
Click Save.

Express:

Go to Online Store > Themes > Actions > Edit Code and open the theme.scss.liquid.
To change the “Add to cart” button, paste the following code to the bottom of the file:

.product-form__add-to-cart {
  background-color: red;
  border: 2px solid green;
  color: white;
}

/* Hover */
.product-form__add-to-cart:hover {
  background-color: blue !important;
  border: 2px solid orange !important;
  color: green !important;
}

To change the “Buy it now” button, paste the code below:

.shopify-payment-button__button.shopify-payment-button__button--unbranded {
  background-color: green !important;
  border: 2px solid red !important;
  color: white !important;
}

/* Hover */
.shopify-payment-button__button.shopify-payment-button__button--unbranded:hover {
  background-color: blue !important;
  border: 2px solid orange !important;
  color: green !important;
}

Edit the values of background-color, border, and color to your liking.
Click Save.

Simple:

Go to Online Store > Themes > Actions > Edit Code and open the theme.scss.liquid.
To change the “Add to cart” button, paste the following code to the bottom of the file:

.product-single__cart-submit {
  background-color: red;
  border: 2px solid green;
  color: white;
}

/* Hover */
.product-single__cart-submit:hover {
  background-color: blue !important;
  border: 2px solid orange !important;
  color: green !important;
}

To change the “Buy it now” button, paste the code below:

.shopify-payment-button__button.shopify-payment-button__button--unbranded {
  background-color: green !important;
  border: 2px solid red !important;
  color: white !important;
}

/* Hover */
.shopify-payment-button__button.shopify-payment-button__button--unbranded:hover {
  background-color: blue !important;
  border: 2px solid orange !important;
  color: green !important;
}

Edit the values of background-color, border, and color to your liking.
Click Save.

Boundless, Supply, and Brooklyn:

Go to Online Store > Themes > Actions > Edit Code and open the theme.scss.liquid.
To change the “Add to cart” button, paste the following code to the bottom of the file:

.btn.btn--add-to-cart {
  background-color: red;
  border: 2px solid green;
  color: white;
}

/* Hover */
.btn.btn--add-to-cart:hover {
  background-color: blue !important;
  border: 2px solid orange !important;
  color: green !important;
}

To change the “Buy it now” button, paste the code below

.shopify-payment-button__button.shopify-payment-button__button--unbranded {
  background-color: green !important;
  border: 2px solid red !important;
  color: white !important;
}

/* Hover */
.shopify-payment-button__button.shopify-payment-button__button--unbranded:hover {
  background-color: blue !important;
  border: 2px solid orange !important;
  color: green !important;
}

Edit the values of background-color, border, and color to your liking.
Click Save.

Minimal:

Go to Online Store > Themes > Actions > Edit Code and open the theme.scss.liquid.
To change “Add to cart” button, paste the following code to the bottom of the file:

#AddToCart {
  background-color: red;
  border: 2px solid green;
  color: white;
}
/* Hover /*
#AddToCart:hover {
  background-color: blue !important;
  border: 2px solid orange !important;
  color: green !important;
}

To change the “Buy it now” button, paste the code below:

.shopify-payment-button__button.shopify-payment-button__button--unbranded {
  background-color: green !important;
  border: 2px solid red !important;
  color: white !important;
}

/* Hover */
.shopify-payment-button__button.shopify-payment-button__button--unbranded:hover {
  background-color: blue !important;
  border: 2px solid orange !important;
  color: green !important;
}

Edit the values of background-color, border, and color to your liking.
Click Save.

Narrative**:**

Go to Online Store > Themes > Actions > Edit Code and open the theme.scss.liquid.
To change the “Add to cart” button, paste the following code to the bottom of the file:

.product__add-to-cart-button {
  background-color: red;
  color: white;
}
.product__add-to-cart-button::after {
  outline: 2px solid green;
}
/* hover */
.btn--secondary:not(.disabled):hover {
  color: black;
  background: white;
}
.btn--secondary:not(.disabled):hover::after {
  outline: 4px solid blue;
}

To change the “Buy it now” button, paste the code below:

.shopify-payment-button__button.shopify-payment-button__button--unbranded {
  background-color: green;
  color: white;
}
.shopify-payment-button__button.shopify-payment-button__button--unbranded::after {
  outline: 2px solid red;
}
/* hover */
.shopify-payment-button__button.shopify-payment-button__button--unbranded:hover {
  background-color: black;
  color: red;
}
.shopify-payment-button__button.shopify-payment-button__button--unbranded:not(.disabled):hover::after {
  outline: 4px solid blue;
}

Edit the values of background-color, border, and color to your liking.
Click Save.

freyajayne_93 · October 11, 2020, 4:11am

Hi, I cannot find the theme.scss.liquid I can only find theme.css.liquid Is it the same thing?

Debut theme.

UmairA · October 11, 2020, 6:11am

Hi, @freyajayne_93 (Or anyone else asking the same question),

Some theme developers use SCSS (Sassy CSS) for styling so you’ll see files named theme.scss.liquid, stylesheet.scss.liquid, timber.scss.liquid, or a similar name. They all are scss.liquid file just named differently. And other theme developers use CSS for styling so you’ll see files named stylesheet.css.liquid, theme.css.liquid, or timber.css.liquid. You can use any of these files for the tutorial above or any tutorial involving stylesheets.

freyajayne_93 · October 13, 2020, 3:53am

Thank you. I just winged it.

wood-iconic · December 22, 2020, 9:52pm

Sorry, I am still struggling to comprehend the response to the above question. I can’t see theme.scss.liquid. so, why shall I look for instead. i am using Shopify Debut theme. Is “theme.liquid” (which i can see) is the one that needs alteration please? Thanks

Bo · December 23, 2020, 8:57am

Sorry for any confusion here folks. You need to alter the theme.scss.liquid or whatever variant of that for your Shopify Supported theme as specified by this guide. You will find this file in your Assets folder:

You can alternatively search for it here to bring it up:

All the Best,

Bo

wood-iconic · December 23, 2020, 4:00pm

Thanks for a very clear reply. Much grateful. i hope I am not stretching your patience if I ask that i don’t have a BUY NOW button on Product Pages in Debut Theme. The buttons are “Add to Cart” and under that “Buy With Paypal” and under that in a a very small almost unreadable font of “Other Payment Options”. Under this says “Secure Checkout With” and then the icons of Visa, MasterCard, Apple Pay and PayPal, which are not actionable. I am looking to get the following done:

Ideally add a large button of BUY NOW on each Product Page
Increase the size of the font of “Other Payment Options”

Is either of these possible? Your help much appreciated - thanks

Bo · December 24, 2020, 8:09am

Hey again, @wood-iconic !

So the Buy Now button is what we call a dynamic checkout button. This button appears differently for different customers who view your store - if they use PayPal on the browser their viewing your store with it will show the PayPal button you are seeing, if they use Google Pay on their Android phone and view your store on their mobile device it will appear as Google Pay and the same with Apple Pay and Apple devices. As such, there is no way to change this button in the ways that you have described.

All the Best,

Bo

Akselj · January 1, 2021, 5:15pm

How can you change the colour of the button’s border to be gradient. I have come up with a solution that looks like this:

.product__add-to-cart-button::after {
border-image-source: linear-gradient(to top, #13A89E, #62C3A5);

}

But it still shows only as a solid colour #62C3A5.

Bo · January 4, 2021, 8:15am

Hey there, @Akselj

Thank you so much for this fantastic question. Your code looks good, however gradient border colors is not something that is supported by our themes nor our themes team.

All the Best,

Bo

pascalecomvo · January 12, 2022, 2:34pm

Hello, I am using the Dawn theme and I wanted to change the buy button. In a lot of tutorials they do it via theme.scss.liquid file. The only problem is that I don’t have this file. I only have the theme.liquid file. In the picture below you can see that I searched “theme” but the only result it displays is the theme.liquid file. What do I need to do to find the proper file?

Bhfish2020 · February 16, 2022, 5:10pm

If I could give you 40 likes I would!

llplayer4ll · April 14, 2023, 11:30pm

base.css is the file you are looking for now

poplightDev · April 13, 2024, 3:55pm

Hey Bo! What do you mean by ‘bottom of the file.’ When I paste the code to the way bottom, the text of the code just appears on the website. I also tried putting the code before html and before the final body tag with the same outcome. Thank you in advance!

Topic		Replies	Views
How can I modify 'add to cart' and 'buy it now' button features on Debut theme? Store Design	7	79	March 28, 2022
How can I alter the color of 'Add to Cart' and 'Buy It Now' buttons? Store Design	5	54	March 29, 2022
Buy Now Button Customisation - Prestige Theme Store Design customizations , shopify-themes , product-page	5	101	September 13, 2024
I wanna change color Store Design design , customizations , css , third-party-themes , shopify-themes , troubleshooting , html	6	94	January 8, 2025
How do I change the color theme of my Buy Now button? Store Design design , shopify-themes , product-page	6	89	August 24, 2023

Tutorial: Changing the Add to Cart and Buy Now Buttons

Note::

Disclaimer:

Important:

Related topics