A Beginner's Guide to Customizing Your Theme with CSS

This guide shows you how to safely make design changes using the "Custom CSS" fields in your theme editor. We'll use your browser's Inspect tool to find the right element and then decide where your code should go.

🔍 Step 1: Find the Element's Name with "Inspect"

Before you can style something, you need its name. The Inspect tool is like a universal name tag reader for websites.

  1. Go to the page in your store you want to edit.
  2. Right-click on the element (e.g., a button, a title) and choose "Inspect" from the menu.
  3. A code panel will appear. The line for the element you clicked will be highlighted.

In that highlighted line, look for the class="..." attribute. The word(s) in the quotes are the class names.

For example: <button class="button button--primary product-form__submit">...</button>

Jot down the most descriptive class name. In the example above, product-form__submit is an excellent choice.

Step 2: Where Should Your CSS Code Go?

The Theme Editor gives you two places to add CSS. Knowing the difference is crucial.

📍 Section-Specific CSS

Changes only apply to one single section. Perfect for a unique design in one area, like your homepage hero banner.

🌍 Global Custom CSS

Changes apply across your entire website. Perfect for creating a consistent look for all your buttons or product titles.

How to Make a Section-Specific Change

Use this to modify something in just one place.

  1. In the Theme Editor, click on the section you want to edit from the left-hand sidebar.
  2. In that section's settings, scroll to the bottom to find the "Custom CSS" field.
  3. Write your CSS rule using the class name you found.
/* Changing my banner button color */
.banner__button {
  background-color: black;
  color: white;
}

How to Make a Global, Site-Wide Change

Use this to create a consistent style everywhere.

  1. In the Theme Editor, click the "Theme settings" icon (a paintbrush or gear) in the bottom-left.
  2. Find and click on the "Custom CSS" menu item.
  3. Write your CSS rule for a class shared by many elements.
/* My new primary button color */
.button--primary {
  background-color: green;
  border-color: green;
}

The Simple Rule

To change something in ONE PLACE ➡️ use the SECTION'S "Custom CSS" field.

To change something EVERYWHERE ➡️ use the THEME SETTINGS' "Custom CSS" field.

Back to Guides