Adding custom CSS to the theme's stylesheet

Custom CSS allows you to make visual changes to your storefront beyond the settings available in the Theme Editor. For example, you can use CSS to adjust font sizes, spacing, borders, or other styling.

Shopify provides built-in Custom CSS settings that allow you to add CSS without directly editing your theme files. Whenever possible, we recommend using these settings before modifying your theme code.

Caution: Custom CSS and other code modifications fall outside Pixel Union’s standard theme support. If you’re not comfortable working with CSS or theme code, consider working with a developer.

Before you add custom CSS

Before making changes, check the Theme Editor for an existing setting that accomplishes what you need.

From your Shopify admin:

1. Go to Online Store > Themes.
2. Find the theme you want to customize and select Customize.
3. Review the settings for the section or feature you want to change.
4. Check Theme settings for additional styling options.

Using a built-in theme setting is preferable when one is available because these settings are designed and tested for the theme.

If the Theme Editor doesn’t include the styling option you need, you can consider adding custom CSS.

Add global custom CSS

Use Shopify’s global Custom CSS setting when you want your CSS to apply throughout your storefront.

To add global custom CSS:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to customize and select Customize.
3. Select Theme settings.
4. Select Custom CSS.
5. Enter your CSS.
6. Select Save.

For example:

.article-author-name {
  font-size: 24px;
}

This example changes the font size for elements using the .article-author-name CSS class.

Note: Custom CSS applies to your online store theme. It doesn’t apply to Shopify Checkout.

Add custom CSS to a specific section

Some theme sections include their own Custom CSS setting.

Section-level Custom CSS is useful when you want a styling change to apply only to a particular section instead of throughout your storefront.

To check for this setting:

1. Open the Theme Editor.
2. Navigate to the page or template you want to customize.
3. Select the section you want to modify.
4. Look for a Custom CSS setting.
5. Add your CSS.
6. Select Save.

If the section doesn’t include a Custom CSS field, you can use the global Custom CSS setting instead.

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.

Getting help with CSS customizations

Pixel Union themes include settings for supported storefront styling and layout options. Custom CSS extends the theme beyond these built-in settings and is considered a code customization.

Creating, troubleshooting, or maintaining custom CSS falls outside Pixel Union’s standard theme support.

If you need help creating custom CSS, troubleshooting an existing customization, or updating custom code after a theme update, consider working with a Shopify developer or theme customization expert.

Need hands-on help with this modification?