Skip to main content
Text highlights are a typographic styling feature that lets you emphasize specific words or phrases in your headings using a distinct font. This is commonly used by e-commerce brands to draw attention to key selling points, product names, or emotional trigger words.

​
What Are Text Highlights?

A text highlight applies a different font (and optionally a different weight) to selected text within a heading. Unlike bold or italic formatting, highlights use a completely separate font family — often a script, handwritten, or decorative font that contrasts with your primary heading font. For example, if your heading font is a clean sans-serif like Inter, your highlight font might be a script font like Playfair Display Italic, creating a visual accent on key words.

​
Enabling Highlights

Text highlights must be enabled in your brand style before they can be used in sections.
1

Open Brand Style settings

Navigate to your brand style editor from the sidebar or page settings.
2

Enable text highlighting

Find the Text Highlight section and toggle it on by setting text_highlight_enabled to true.
3

Choose a highlight font

Set the font_family_highlight to the font you want to use for highlighted text. This should be a Google Font or custom font that contrasts with your heading font.
4

Set the highlight weight

Configure weight_highlight to control the font weight of highlighted text (e.g., “400” for regular, “700” for bold, “400italic” for italic).

​
Using Highlights in the Builder

Once highlights are enabled in your brand style, you can apply them from the text format toolbar:
1

Select heading text

Click on a heading element (H1-H6) in the canvas to select it.
2

Click the Highlight toggle

In the floating text toolbar, click the Highlight button (highlighter icon). The button shows its active state when the selection is already highlighted.
3

Toggle highlight off (optional)

Click the Highlight button again to remove the highlight and revert to the standard heading font.
The Highlight toggle only appears for heading elements (H1 through H6) when highlighting is enabled in your brand style. It does not appear for paragraph text (P1-P3) or when highlighting is disabled.

​
How Highlights Render

When text is highlighted:
  1. The selected text receives the CSS class text-highlight.
  2. The highlight font family is applied via CSS variables.
  3. The highlight weight is applied.
  4. All other properties (size, color, alignment) remain inherited from the parent heading.
This means highlighted text stays the same size and color as the surrounding heading — only the font family and weight change.

​
Brand Style Properties

PropertyDescriptionExample
text_highlight_enabledWhether highlighting is availabletrue
font_family_highlightThe font used for highlighted text"Playfair Display"
weight_highlightThe font weight for highlighted text"400italic"

​
Tips for Effective Highlights

The highlight font should be visually distinct from your heading font. If your headings use a geometric sans-serif, try a serif or script font for highlights. The contrast is what makes the emphasis work.
Highlight one or two key words per heading, not entire sentences. The impact comes from the contrast between highlighted and non-highlighted text. Over-highlighting dilutes the effect.
Highlight words that create emotional resonance: product benefits, transformative language, or unique selling propositions. Words like “transform,” “natural,” “clinically proven,” or your brand name are strong candidates.
Script and decorative fonts can sometimes be harder to read at small sizes. Always preview your highlights in mobile view to ensure readability.

​
Highlights in Published Pages

When you publish a page to Shopify, the Liquid generator preserves text highlights. The highlight font is loaded via Google Fonts (or as a custom font), and the CSS class is applied to the highlighted text spans. The rendered output on your Shopify store matches what you see in the builder.