Using the Web Inspector
Using the Web Inspector
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.
Class or CSS Property?
Our themes use a combination of single-purpose CSS classes like
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.liquid – more 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
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
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.
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
To change the font size for this element, you would find this rule in theme’s SCSS stylesheet and change its