This is an advanced tutorial and will require editing your website code. If you don't have experience with this, please contact us here.
Have you ever tried to edit the colors of an element on your Shopify store but couldn't figure out how to do it? Maybe you wanted a button color changed but nothing else or maybe you wanted to change the colors of a specific background.
In our tutorial, we'll change one of the colors of a button our homepage without changing any of the others.
If you scroll down to the bottom of our homepage you'll see this section:
What we're going to do is change the color of this button without changing the other colors.
First, we want to duplicate your theme file and make edits to that before we publish the theme.
Log into your Shopify store, select Online Store on the left, and on the right select Actions and Duplicate.
Once you've duplicated, select Customize on the duplicated theme and we'll open up the editor.
Normally to change the color, we would select Theme settings > Colors and then change the colors we need. But what if there isn't an option we want?
If you're using Google Chrome, right-click and select Inspect. This will open up the HTML and CSS of the page.
Select the icon on the right next to the save button that says Select an element in the page to inspect it. This will allow us to find the HTML and CSS for a specific element.
Once you select the icon, hover over the button or element you'd like to edit.
So we've found that the class for this button is submit action_button. Next, we need to find the section that the button is placed in.
Note: On the bottom left you'll see the CSS applied to this button. Try playing around with the background attribute and changing the color.
On the bottom left select Theme actions> Edit code. This will open up your theme's code. Remember we should be working in the duplicated theme code.
Next, we need to find the section that we used on the homepage. In this case it was called Contact Form.
Once you find your proper section, let's look for the button. Control + F and search for submit or action_button and see if you can find the button.
Once you find it, let's add a new class to this button. The reason we're going to add a new class is that if we edit the existing class, we'll be changing the all of the buttons in that class. We're going to add the class name homepage_button in front of submit.
Next, we'll open up the CSS and add the color. Most themes name their CSS files as styles.scss.liquid.
In that file, scroll to the very bottom and add the CSS to change the button color. Here, we're going to add:
.homepage_button{
background-color: orange !important;
}
And select save.
Now check your preview! Using the !important tag isn't always the best idea but in this case, it should work fine for your site. If we wanted to take this a step further we could put the CSS in its proper place by finding the section for buttons and making the input a variable so we can change it in the editor.
Once you feel your change is ready, publish your theme!
