Theme features

Headings

Customize headings and add decorative highlight effects.

The Heading theme block lets you add a heading to almost any section of your store. You can control its size, width, color, and even add a decorative highlight effect to draw attention to specific words.

Settings

Heading text

Enter the text you want to display. This field supports simple formatting. Most importantly, italic formatting is used to activate the highlight effect described below.

Heading size

Choose from eight size options ranging from X-Small to Hero. This controls the visual size of the heading and does not affect SEO.

Width

By default, Full width is enabled and the heading stretches to fill the available space. If you turn this off, a Max width slider appears, letting you set a fixed maximum width (100–1000 px). This is useful when you want to constrain a heading within a narrower area, for example inside a hero banner.

Colors

  • Heading: overrides the heading text color. When left empty, the heading uses the default heading color set in Theme settings > Colors.
  • Highlight: sets the color of the highlight decoration. Supports transparency, so you can create subtle, semi-transparent effects.

SEO tag

The SEO tag setting controls the HTML tag used for the heading in your page's source code (e.g., h1, h2, p). This is important for search engine optimization and accessibility, but does not change how the heading looks on screen. That is controlled by the Heading size setting.

Highlight effect

The highlight effect lets you add a decorative accent, such as an underline, circle, or scribble, to one or more words in your heading.

How to apply a highlight

Open the heading block

  1. In the Theme Editor, find and click the Heading block you want to edit.

Select the text to highlight

  1. In the Heading field, select the word or words you want to highlight.
  2. Click the Italic button (or press Ctrl + I / Cmd + I).
After applying italic formatting, you may need to save your changes for the highlight effect to render properly in the preview.

The selected text will now display the highlight effect in your storefront. You can apply this to multiple words or phrases within the same heading. Just repeat the steps for each one.

Highlight style

Choose the decoration style that best fits your design:

  • Underline: a smooth line drawn under the text.
  • Scribble underline: a hand-drawn, wavy underline for a more playful look.
  • Circle: a loose, hand-drawn circle around the text.
  • Highlighter: a filled highlight behind the text, similar to a marker pen.

Highlight position

Controls where the decoration appears in relation to the text:

  • Default: uses the standard position for the selected style.
  • On top of text: draws the decoration over the text, partially overlapping it.
  • Behind text: places the decoration behind the text, so the text remains fully visible.