Heading

Create bold, accessible section headlines with customizable text, icons, captions, and buttons to organize content clearly, guide user navigation, and enhance both mobile and desktop page layouts.

Last updated About 2 months ago

Overview

The Heading block creates visually prominent and accessible section headlines with a wide range of customization options. It allows you to combine main titles, supporting captions, icons, and call-to-action buttons to provide rich, clear structure for your page content. By using the Heading block, you enhance organizational clarity and ensure visitors can easily scan and navigate your pages.

⚠️ Important: The Heading block improves both content structure and accessibility, helping users move through your site and understand section hierarchy quickly.

Heading content and layout

This group of settings manages how headline text, optional subheadings, icons, and captions will display and interact. Arranging these elements thoughtfully gives a clear hierarchy and an engaging, informative introduction to every section.

Text alignment

Adjust the horizontal alignment of headings, captions, subheadings, and button elements.

  1. Left

  2. Center

  3. Right

Aligning content affects both visual flow and readability.

Icon

You can display an icon before the heading. This is helpful for branding or guiding user attention.

  1. Enter an icon name or code.

  2. Icons should be chosen for clarity and relevance.

Caption

Use captions for brief, inline introductions or highlights above or beside the main heading.

  1. Captions are well suited for teasers, highlight tags, or short context statements.

  2. Inline rich text can be used for additional emphasis.

Heading

This is your main headline text and is typically the most prominent visual element in the block.

Default: Heading

Heading Size

The Heading size setting lets you choose from predefined text scales used consistently across your storefront. Each option defines the visual weight and hierarchy of your banner or section headings.

Available options:

  • Extra small (XS) — Subtle, compact headings ideal for tight layouts or mobile.

  • Small (S) — Balanced size for secondary emphasis or supporting titles.

  • Medium (M) — The standard heading size for most content sections.

  • Large (L) — Prominent headings suited for key sections and hero banners.

  • Extra large (XL) — Bold, attention-grabbing titles used for major highlights.

  • Jumbo — Oversized statement headings for hero visuals or impactful promotions.

📝 Note: These size presets help maintain consistent typography throughout your shop. When you update a size in Fonts → Heading fonts, it automatically applies everywhere that preset is used.

Heading type

Pick the semantic tag for your heading. This impacts accessibility and creates a meaningful document outline.

  1. Paragraph (p)

  2. Heading 1 (h1)

  3. Heading 2 (h2)

    1. Default

  4. Heading 3 (h3)

  5. Heading 4 (h4)

  6. Heading 5 (h5)

  7. Heading 6 (h6)

📝 Note: Use heading levels sequentially for better accessibility and searchability.

Subheading

Display additional supporting text beneath the primary heading. Use rich formatting to enhance clarity and add context.

  1. Great for descriptive sentences or supporting calls to action.

  2. Inline formatting, links, and highlights are supported.

Button options

This set of options enables you to add a call-to-action button with flexible style, icon, label, and placement control. Use buttons to prompt important site actions or direct visitors to new content.

Button icon

Set an icon for the button by entering its name or code. This visual cue draws more attention to the button.

  1. Icons clarify intent and add visual interest.

Button text

Label your call-to-action button. If left empty, only the icon will display (if defined).

  1. Always use concise, clear button text.

Button link

Set the URL that users are taken to when clicking the button.

Open link in a new tab

Choose whether button links open in a new browser tab.

Default: unchecked (off)

Button style

Select how the button is styled to fit the visual and functional needs of your content.

  1. Primary

  2. Secondary

  3. Extra large

  4. Plain

  5. Small

  6. Small secondary

  7. Circle

Use the style that best fits your hierarchy and site design.

Button layout

Determine how text and icons display within the button.

  1. Icon left

  2. Icon right

  3. Icon only

Available in sections

The Heading block can be used in these sections:

  1. Multicolumn

  2. Blog post

  3. Page content

Usage notes

  1. Always use heading types in logical order for structure and accessibility.

  2. Choose concise headings and button labels for fast scanning and improved user experience.

  3. Add captions, icons, or subheadings thoughtfully — each should enhance, not clutter, the content.

  4. Test alignment and position settings for desktop and mobile to maintain a clean, readable layout.

  5. Never leave the heading field empty; it is essential for usability and screen reader navigation.

  6. Maintain strong color contrast so headings, captions, and buttons remain legible on all backgrounds.

💡 Tip: Use captions to provide previews or summaries so visitors can quickly scan your content and locate what is most relevant to them.

⚠️ Important: Logical and consistent use of heading types, captions, and button styles creates a better structure and a more accessible experience. Always preview your Heading block on multiple devices for best results.

By configuring the Heading block purposefully, you provide clarity, visual interest, and structure — guiding attention to the most important parts of every page.