It is possible to use CSS to further customize and fine-tune certain aspects of your website that are otherwise not possible to do directly through the Theme Editor.

NOTE: Any information in this help guide is given as-is and advanced customization is not covered by the scope of our support.

If you need additional help, we suggest looking into hiring a Professional Developer.

Before you do anything, please back-up your website by going to “Website” -> Click on 3 dots next to "Customize"-> “Duplicate”.

All of the steps outlined below have been done on Google Chrome, though the steps should remain similar on other popular browsers.

First step will be to identify what you want to change. For my example, I will be using the “Filter” bar present in the Catalog and changing its color to something else:

Once you’ve identified what you want to change, you will want to find the CSS Selector for it. This can be done by Right-clicking anywhere on the page and clicking on “Inspect”:

This will open your browser’s Developer tools where you can find the CSS Selector of the given element that you’re trying to target.

You can then select the element that you want to inspect more specifically by either clicking on “Ctrl + shift + C” or clicking on the button as presented in the below picture and clicking on the chosen element that you want to edit:

By clicking on the Element, you will also be able to test changes directly in the Developer tool. Those changes are client-side only and are only for testing purposes. They will revert on a refresh.

For example, to see if you have the correct selector or using the correct Style to edit the Element, you can apply your changes here:

And applying a Style here will reflect it on the website if done properly:

If you want a reference of CSS Properties that exist and can be used to edit the Element, you can refer to the excellent W3Schools Website.

Once that is done, there are two ways to get the actual Selector. As outlined in the picture below, you can either pick the Precise Selector or the Class Selector:

The Class Selector in this case refers to Point 1. More specifically, the “.light .ui-filters” class. Anything with a “.” behind it is denoted as a Class.

The Precise Selector refers to Point 2. For this one, you must right click on the HTML of the Element (When you mouseover the element in the HTML, it will also be highlighted on the page itself to make sure you got the correct one) and then go to “Copy” -> “Copy Selector”.

Under the majority of circumstances, it is recommended to use the second method. The Class method may inadvertently affect other portions of the website sharing the same class while the second method precisely target that specific piece of your website.

Certain styles are also inherited from its Parent Element and thus, cannot be overwritten unless adding the use of “!important” after the change, like so:

Please note however that this might, again, inadvertently affect other portions of the website by overwriting the Parent Element’s style. Only use as last resort and only with the Precise Selector method.

Now, on to actually apply the style. In your Admin Area, go to “Website” -> “Edit Code”. In the top-right corner of that page, click on “New File”.

Call the file something easy to remember, in this example, we’ll just be using “catalogcss”. Make sure that the File Format is set to CSS as well:

Inside of this template is where you will want to apply the Styling. Copy the previous Selector that you’ve chosen and use the same format as in the below pictures to apply the style.

If you used the Class Selector:

If you used the Precise Selector:

Then save the changes to the sheet.

Now, go to the “theme.liquid” file in the same Code Editor and you will want to insert the previously created stylesheet into it, right before the ending </head> tag so that it applies to your website and hit “Save Changes”, like so:

You can now go back to your website to see if the change was applied correctly.

And that’s it!