Heading

Featured links

1. Company XYZ documentation on icons
2. Company XYZ documentation on headers settings
3. Company XYZ documentation on heading
4. Company XYZ documentation on colors settings
5. Company XYZ documentation on visibility settings
6. Shopify documentation on sections and blocks

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use the Heading block to introduce content, break up long pages, and create a clearer reading hierarchy. It combines a title, optional supporting text, and an optional call to action in one flexible block.

Use only one H1 on a page. For most in-page titles, choose H2 or lower so the page structure stays clear and SEO-friendly.

Header settings

These settings shape the block’s message and hierarchy. Use them to control alignment, choose the right heading level, add supporting text, and decide whether the block should include a button. For a broader overview of how blocks work in the theme editor, see Shopify documentation on sections and blocks

The strongest results usually come from giving each text layer a distinct job: a short caption for context, a main heading for the key message, and a subheading for extra detail. If the content starts to feel repetitive, remove the least important layer rather than filling every field.

The icon fields let you add either an emoji or an icon name for extra visual emphasis. This works best when the icon reinforces the meaning of the heading instead of acting as decoration alone. For icon guidance, see Icons.

Choose the heading type based on the block’s place in the page, not just the visual size. If you need more help deciding on heading structure, see Header settings and the block-specific Heading reference.

The button is optional, but useful when the heading introduces a next step such as browsing, reading more, or opening a featured destination. Filled styles make the action more prominent, while plain or smaller styles keep the focus on the heading content.

Button layout and position matter most when space is tight. On mobile, moving the button below the text or making it full width can improve tap comfort and keep the block easier to scan.

Tip

If you use an icon-only button, make sure the icon clearly communicates the action. A short text label is usually easier to understand at a glance.

Standard block settings

Color settings

These colors override the default theme styling for this block only. Use them when the heading needs stronger contrast, a different accent, or a softer supporting-text treatment than the surrounding content.

Keep readability first, especially if the block appears over a busy or dark background. Blank or default-style choices usually preserve the theme’s fallback styling, while explicit colors or gradients make the block feel more independent from surrounding content.

If you want more context on shared color controls, see Color settings.

Visibility settings

Use visibility controls to show the block on all devices or hide it on desktop or mobile. This is helpful when you want a shorter heading treatment, a different button placement, or a simpler content stack on smaller screens.

Note

Device-specific visibility works best when each version has a clear purpose. Avoid duplicating the same heading unless the mobile and desktop layouts genuinely need different content treatment.

Review both desktop and mobile views after making visibility changes, since layout, alignment, and media behavior can differ between viewports.

For more on shared visibility behavior, see Visibility settings.

Usage notes

1. Choose the right heading level. Match the heading type to the page structure, and reserve H1 for the main page title.
2. Keep each text field purposeful. Use the caption, heading, and subheading only when each adds distinct value.
3. Make the button action obvious. Add a button only when the block should lead somewhere, and use concise text that tells visitors what happens next.
4. Check both viewports. Review desktop and mobile layouts after changing alignment, visibility, or button placement so the block still reads cleanly on each screen size.
5. Use overrides selectively. Apply custom colors, gradients, or device-specific media only when the default styling or shared layout no longer fits the content.
6. Keep media readable. If you use separate media for desktop and mobile, make sure cropping and fallback behavior still support the heading and any overlay text.