Adding custom CSS to the theme's stylesheet

While our Shopify themes come with a variety of customizable features and settings, you’ll likely encounter the need to adjust and fine-tune aspects of your storefront.

Much of this can be done through your browser’s built-in tools and the theme’s stylesheet, known as a Cascading Style Sheet (CSS) file. This can be accessed by selecting Actions > Edit code in the Online Store or More actions > Edit code in the Theme editor sidebar.

First, explore the risks and benefits of customizing your theme by checking out The do’s and don’ts of customizing your Shopify theme

Protect your work by creating a backup

It's always worthwhile to back up your work before making theme file adjustments, so consider duplicating your theme and other best practices before completing this adjustment.

What steps should I take before modifying theme files?

Using inspecting tools to identify elements

A CSS file uses labels from the HTML to connect styling codes to components of the storefront. These are known as 'elements'. If HTML is like the structure of a house, then CSS would be the decorative or cosmetic features that make it look good, and elements would be the connection between these—like the nails that hold up the wood paneling.

Browsers often provide tools to locate specific elements. Here are some common browsers and how to activate these tools:

• Chrome
• Firefox
• Safari

A common way to find the inspector feature for a browser is to right-click (Control-click on Mac) on the webpage, then select Inspect Element, Show Inspector, etc. in the revealed dropdown.

Use the element picker

Browsers will include an element picker option, represented by an arrow and a square. Use this to identify the element you want to adjust. 

For this example, the element picker in Firefox is used to pick the blog author element in Atlantic.

In the inspector view, a column displaying the elements involved in this author name are listed. If this is not visible, make sure Inspector or Elements is the selected tab.

Here there are example CSS codes for the font family, style, weight, and size. 

Preview adjustments in the inspector

Click on the value beside the CSS code to adjust it. For example, clicking on 14px will allow you to enter a new value for the font-size.

Increasing this from 14px to 24px, the changes are visible in the browser immediately.

Copy the codes to your theme.css.liquid file

When you have found an adjustment that is ready to apply, open another window or tab with your online store. In this tab go to your theme > Actions > Edit code > Assets > theme.css.liquid

It's best to try adjustments like this in a draft/unpublished theme first in case an error is made

In this file, scroll to the very bottom. The codes placed at the bottom of this file will take priority over previous codes, so no code needs to be removed to apply this adjustment.

Back in the inspector, copy the element:

Then paste it to the theme.css.liquid file. It should look like this:

.article-author-name, .article-tags-tags, .article-comments-count

Don't save the file just yet—this incomplete code on its own will break the CSS file.

Add an opening bracket to the end of this code:

.article-author-name, .article-tags-tags, .article-comments-count{

Now copy over the font-size: 24px; placing it below the element:

.article-author-name, .article-tags-tags, .article-comments-count{
font-size: 24px;

Then add a closing bracket to the end of the code:

.article-author-name, .article-tags-tags, .article-comments-count{
font-size: 24px;
}

Confirm that each opening bracket has a closing bracket, then Save.

Need hands-on help with this modification?