How To Change Shopify Button Color

How To Change Shopify Button Color

Shopify is a popular e-commerce platform that allows businesses and entrepreneurs to easily create and manage their online stores. One of the key features of Shopify is its customizable design options, allowing store owners to create a unique and visually appealing storefront. One way to enhance the aesthetic of your Shopify store is by changing the button colors. In this guide, we will discuss the simple steps on how to change the button color on your Shopify store, giving you the flexibility to match your brand's aesthetic and improve the overall user experience.

So, let's dive in and learn how to make your Shopify buttons stand out.

Step 1:

After logging in to your Shopify Admin, click and open the "Online Store" tab from the left dashboard. Then select the "Themes" option just below.

Step 2:

Next find your current theme at the top and click Customize.

Step 3:

Now find the section that contains the button you want to edit, then select it. Then scroll to the bottom of the section settings and click the Custom CSS tab.

Step 4:

Then type or Copy & Paste (Ctrl+C) the line of code below in the Custom CSS settings of your section.


.button {
  font-weight: bold;
  background: #9b046f;
  color: whitesmoke;
  border: 2px solid;

Step 5:

Now you can adjust your buttons font weight, text color, background color, border color, and other elements. When you are happy with the results select Save.
(Note: You can use any HEX code to adjust your buttons colors.)

Step 6:

Finally, Preview your Shopify Store, and confirm the changes. You have now successfully changed the color of a button in your store!

Additional Steps:

Need help designing your Shopify store? Take advantage of our Shopify Small Tasks to quickly improve your store.

View Portfolio

Leave a comment

Please note, comments need to be approved before they are published.