Using the Web Inspector

Using the Web Inspector


This is an advanced guide. It requires editing theme code and is not supported by Switch Themes or Shopify. We recommend hiring an expert if you’re not comfortable editing Liquid, HTML, CSS and Javascript. Always make backups before customizing the theme.

Using your browser’s web inspector is a good way to find out which part of the theme code to edit. For this article we will use Chrome on Mac but other browsers, like Safari and Firefox, have similar developer features.

How to find an element’s CSS classes

When customizing theme code you’ll often want to know which CSS classes are applied to an element. Right-click the element in question, choose "Inspect" and take a look in the "Elements" pane. The element you clicked on will be selected, and you can see it’s classes in the  class attribute. The element may be nested inside other elements, which may also contain classes that govern the appearance or behaviour you want to modify.

Video demo

Class or CSS Property?

Our themes use a combination of single-purpose CSS classes like f--title or p2 and more traditional semantic CSS applied with classes like featured-content__title. Re-styling elements that use CSS classes is as simple as changing their markup in their Liquid template. You can edit semantic CSS classes in the theme’s stylesheet file (usually theme.scss.liquid, but increasingly, theme.css.liquidmore on this).

For example, increasing the font size of an element styled with font-size--xl involves changing its markup to use the font-size--xxl class. Increasing the font size of an element like featured-content__title element involves finding it in the stylesheet and changing its font-size property.

Example 1

Let’s take a look at the home page of the Editorial – Amour demo store.

To determine how to change the font size for the first Featured Image with Text Overlay section, right-click on the text and select "Inspect".

In the Elements panel, we can see that the h2 element has been selected and that it has the font-size--xxxl and lg--font-size--xxxxxl classes applied to it. Over in the Styles panel, we can confirm that one of these classes is actively applying the font-size property to our element.

To change the font size for this element, you would now edit the Liquid template for this section.

Example 2

To determine how to tweak the available font sizes for the Featured Content section, right-click on the text and select "Inspect".

In the Elements panel, we see that there isn’t a single-purpose CSS class applied to this section. Instead, the featured-content__title--medium class is applying a font size of 3.6rem to the h2 element.

To change the font size for this element, you would find this rule in theme’s SCSS stylesheet and change its font-size property.

Learn More

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.