# Use the Web Inspector

This guide describes how to use your browser’s Web Inspector tool.

Note

This is an advanced customization guide that requires editing theme code. These actions are not supported by Switch Themes or Shopify. We recommend hiring an expert if you’re not comfortable editing Liquid, HTML, CSS, and Javascript.

Before you customize a theme, make a backup. Refer to Shopify help: Duplicating themes (opens new window)

Using your browser’s Web Inspector tool provides a good way to identify parts of the theme code that you want to modify. This guide uses the Web Inspector tool for the Google Chrome web browser (opens new window) in Windows. Other browsers, like Safari and Firefox, have similar developer tools and features. To follow this guide using another browser, check your browser’s documentation. Refer to Learn more.

# Find an element’s CSS classes

To customize theme code, you must know the CSS classes that apply to the element you want to modify. To identify an element’s CSS classes:

  1. In a web browser, open a page with an element to modify.
  2. Right-select the element.
  3. Select Inspect.
  4. Review the contents of the Elements pane.

When an element is selected in the Elements pane, the applicable CSS classes are displayed in the class attribute. An element can be nested inside other elements, which might also contain classes that affect the appearance or behavior of the element you want to modify. Refer to Chrome developer: View and change CSS (opens new window)

In the following video, the Web Inspector tool is used to identify the CSS classes that apply to a <div> element, with text, on an example store’s homepage.

# Classes and CSS properties

Our themes use single-purpose CSS classes, like f--title or p2, “traditional” semantic CSS applied with classes like featured-content__title, and CSS variable definitions applied like var(--font-size-sm).

To re-style elements that use CSS classes, change their markup in the corresponding Liquid template. You can edit semantic CSS classes in the theme’s stylesheet file: base.bundle.css. For variable definitions, edit the file css-variables.liquid in the theme’s Assets folder. Refer to Use customize CSS..

For example, to increase the font size of an element styled with text-sm, change its markup to use the text-xl class. Increasing the font size for the text-sm class involves finding the corresponding var(--font-size-sm) variable declaration in theme’s CSS variable definitions file css-variables.liquid.

# Example 1

As an example, let’s review an element on the homepage for the Shapes’ Neon demo store (opens new window)

  1. To determine how to change the font size for the Announcement bar section text, right-select the text, and then select Inspect.

    Homepage for Shapes' Neon demo store with a div element selected in Web
 inspector.

  2. In the Elements panel, note that the <div> element is selected. The panel indicates a text-sm class applies to the element.

  3. In the Styles panel, the text-sm class is actively setting the font-size property for the element to var(--font-size-sm).

  4. In Code editor, the Liquid template for the Announcement bar section sets the classes applied to the <div> element.

    Code editor with the Liquid template open for the Announcement bar
 section.

  5. To modify the font size for the <div> element, in the Liquid template for the Announcement bar section, change the text-sm class.

    For example, in the following image, the template code is changed from using the (default) text-sm class to the text-xl class. The new class creates a larger text size.

    Code editor with an edited Liquid template open for the Announcement
 bar section.

  6. Preview the store page to confirm your changes were applied successfully.

    For example, in the following image, the Web inspector shows the previous <div> element is selected for the Announcement bar section on a store’s Homepage. In the Styles panel, the updated text-xl class sets the font-size property for the <div> element to var(--font-size-xl). Note how the changes increase the size of the section text.

    Homepage for Shapes' Neon demo store with an updated div element
 selected in Web inspector.

# Example 2

As second example, let’s review the same element on the homepage for the Shapes’ Neon demo store (opens new window) The styles have been reset to their defaults.

  1. To determine how to tweak the font sizes for the Announcement bar section, right-select the text, and then select Inspect.

    Homepage for Shapes' Neon demo store with a div element selected in Web
 inspector.

  2. In the Elements panel, note that the <div> element is selected. The panel indicates the (default) text-sm class applies to the element.

  3. In the Styles panel, the text-sm class is actively setting the font-size property for the element to var(--font-size-sm).

  4. To change the font size for the var(--font-size-sm) variable, find the corresponding variable declaration in theme’s CSS variable definitions file css-variables.liquid.

    For example, in the following image, the file Assets > css-variables.liquid is open in Code editor. The default value for --font-size-ratio-sm is indicated. As indicated on line 267, the value of --font-size-ratio-sm is used to calculate a font size for the --font-size-sm variable (relative to the base font size).

    Code editor with the file css-variables.liquid open, with the default
 value set for the variable --font-size-ratio-sm.

  5. Change the value assigned to the corresponding variable.

    For example, in the following image, the value for --font-size-ratio-sm is increased from (default) 0.8908985 to 6. This change increases the --font-size-ratio-sm value used to calculate a font size for the --font-size-sm variable.

    Code editor with the file css-variables.liquid open, with an increased
 value set for the variable --font-size-ratio-sm.

  6. Preview the store page to confirm your changes were applied successfully.

    For example, in the following image, the Web inspector shows the previous <div> element is selected for the Announcement bar section on the store’s Homepage. In the Styles panel, the default text-sm class sets the font-size property for the element to the (default) var(--font-size-sm) variable. Note how the previous changes increase the size of the section’s text. This change affects all occurrences of the var(--font-size-sm) variable.

    Homepage for Shapes' Neon demo store with an updated div element
 selected in Web inspector.

# Learn more

Refer to the following links to developer tools and features for different browsers.