Header settings

Overview

Header settings manage the look and layout of headers throughout your storefront. Adjusting these settings creates a unified experience for headings, captions, icons, and call-to-action buttons, supporting brand consistency and a professional appearance. Any changes to Header settings apply globally unless specifically customized at a section or block level.

⚠️ Important: Configuring Header settings helps establish a strong brand identity and makes navigation across your site easier for visitors.

Key components and functionality

Header settings give you flexible control over the structure and style of all headers, supporting effective communication and a cohesive frontend experience. The options described below define how your content appears and how users interact with your shop’s prominent sections.

Text alignment

Text alignment controls how header content––including captions, headings, subheadings, and buttons––is positioned horizontally. This affects the overall rhythm and balance of your design.

1. Left

2. Center

3. Right

Icon

The icon setting allows you to display a theme-supported icon next to your header content. This helps reinforce branding or draw attention to special announcements.

Tip: Adding a relevant icon can improve visual hierarchy and make important information stand out.

Caption

Use the caption to add a brief, formatted message near the header for added context or focus. Captions work well for announcements, events, or drawing attention to key actions.

Heading

Heading defines the main headline for your header area. A clear, concise heading sets the tone and helps visitors orient themselves on each page.

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

This determines which heading level or paragraph tag displays your main heading, shaping both your visual hierarchy and accessibility:

1. Paragraph (_p_)

2. Heading 1 (_h1_)

3. Heading 2 (_h2_) _default_

4. Heading 3 (_h3_)

5. Heading 4 (_h4_)

6. Heading 5 (_h5_)

7. Heading 6 (_h6_)

Default: h2

Tip: Correct heading structure supports accessibility and creates logical navigation for all users.

Subheading

Subheading offers a rich text area below the main headline for extra detail or supporting information. Use formatting and links to share supplementary context.

Button icon

With button icon, you can add an icon inside the header’s button for greater visual emphasis.

Choose from available theme icons to align with your shop’s style.

Tip: Icons in buttons can clarify call-to-action intent and support visual navigation cues.

Button text

This sets the action label for the header button. If left empty, the button does not display. Use clear text to communicate actions unambiguously.

Button link (URL)

Specify the target destination for the header button. When no link is provided, the button remains hidden.

Open link in a new tab

This enables the button’s link to open in a new browser tab or window. Opening in a new tab is especially helpful for external or offsite destinations.

Default: false

Button style

Button style adjusts the look and feel of the header button, including size, emphasis, and shape.

1. Primary

2. Secondary

3. Extra large

4. Plain

5. Small

6. Small secondary

7. Circle

Button layout

Select the order and display of the button’s icon and text, or use icon-only for a minimalist approach.

1. Icon left

2. Icon right

3. Icon only

Display full width on mobile

This determines if the button stretches across the entire width of mobile screens, creating stronger visual emphasis.

Default: false

📝 Note: Mobile-specific settings enable you to optimize experiences for smaller screens. You might consider using different button positions or enabling full width on mobile to prioritize key actions or content.

Usage notes

1. Set heading types in a logical order to maintain accessibility and structure.

2. Use captions and subheadings for promotional, instructional, or supplementary details.

3. Select meaningful icons and button text so users instantly understand any available actions.

4. Adjust button position, order, and width for mobile to enhance readability and tap targets as needed.

5. Enable _Open link in a new tab_ for external destinations, so users do not lose their place in your shop.

⚠️ Important: Adjustments to Header settings impact your shop globally and influence both appearance and accessibility. Preview changes on desktop and mobile to confirm your layout and styling deliver the right experience across devices.