Header settings

Featured links

1. Company XYZ documentation on icons
2. Shopify documentation on sections and blocks
3. Shopify documentation on the theme editor

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use these settings to build a clear introduction for content areas across the theme. A well-structured header helps visitors understand what comes next, improves scanning, and gives important content a stronger visual and semantic lead-in. For a broader overview of how theme content is organized, see Shopify documentation on sections and blocks

Header content

This group controls the text stack at the top of a content area: alignment, an optional icon, a caption, the main heading, and supporting text. The strongest headers usually stay focused, with each element doing a distinct job instead of repeating the same message.

Choose text alignment based on the content style around it. Centered alignment suits promotional or editorial layouts, while left alignment is usually easier to read when you include longer supporting copy.

The icon field accepts either an emoji or an icon name. Use it when a quick visual cue helps frame the message, such as a feature highlight or themed content label. If it feels decorative rather than informative, leave it blank for a cleaner result. For icon naming guidance, see Icons.

Use the heading caption as a short label above the main heading. It works best for brief context, such as a category, campaign, or content theme.

The main heading should carry the primary message. Keep it specific and descriptive so it helps both visitors and page structure. The heading type lets you choose how prominent and structural that heading should be.

Choose heading levels based on page structure, not just appearance. Reserve the highest-level headings for the most important titles so the page remains well organized.

Use the subheading for short supporting context, a value statement, or a brief explanation. If the heading already says enough, a concise subheading will usually work better than a long paragraph.

Button action

You can add an optional button when the header should lead into a clear next step. This is useful when the content introduces something actionable, such as browsing, learning more, or opening a featured destination. For setup details in the editor, see Shopify documentation on the theme editor

Add button text and a link together so the action feels complete and clear. If you include a button icon, it should support the label rather than replace it. The icon field accepts emoji or icon names; for naming guidance, see Icons.

Button style controls how much visual weight the action gets. Stronger styles work well when the button is the main next step, while lighter styles help the content remain the focus.

Button layout controls whether the icon appears beside the label or on its own. Icon-only buttons are best kept for cases where the action is unmistakable from the surrounding context.

Caution

Icon-only buttons can be easy to miss or misunderstand. In most cases, a short text label creates a clearer and more confident action.

You can place the button above or below the text content, with a separate mobile position if needed. This makes it easier to keep the desktop layout balanced while still giving mobile visitors a smoother reading flow.

Enable the full-width mobile button option when you want the action to stand out more clearly on smaller screens. This is especially useful when tapping the button is the primary goal.

Opening a link in a new tab is usually best for external destinations or cases where you do not want visitors to lose their place. For regular navigation, staying in the same tab often feels more natural.

Usage notes

1. Keep the message focused. Use the heading, caption, and subheading together to introduce one clear idea instead of repeating the same text in multiple fields.
2. Match hierarchy to importance. Choose a heading type that fits the page structure so important content stands out without weakening the overall heading order.
3. Use icons intentionally. Add icons only when they help visitors identify the content or action faster.
4. Make button actions explicit. Pair clear button text with a relevant link, and avoid relying on an icon alone unless the action is obvious.
5. Check mobile presentation. Review alignment, button position, and full-width behavior on smaller screens so the header stays easy to read and tap.
6. Review both viewport layouts. If you use separate desktop and mobile controls, check both sizes so alignment, visibility, and media behavior still feel intentional.
7. Keep overrides purposeful. Leave default-style values in place when you want the header to blend into the surrounding area; use explicit colors or media only when you want the header to stand apart.