Header

Layout, content and available controls for Header.

Scale Theme · v1.9.3 · 1 min read

Where to find it

This is a template or group section. Open its existing template or group in the theme editor.

Usage notes

[Manage visibility](/admin/settings/customer_accounts) in customer account settings. Legacy accounts not supported.

Editor controls

Conditional controls appear after choosing the relevant source, style or option. Saved values may differ from new defaults.

Display section ID: ID is used in the Sections group section to create anchor links. Toggle on to show a copy button on this section.
Display on: Choose the presentation or source that fits this component.Options: All devices · Desktop only · Mobile only
Transparent header: Set to Off to restore the normal solid header. Sticky headers become solid after scrolling.Options: Off · All pages · Selected templates
Logo on transparent backgroundConditional: Choose the presentation or source that fits this component.Options: Inverse logo (for dark backgrounds) · Regular logo (for light backgrounds)
Transparent header hover surfaceConditional: Choose the presentation or source that fits this component.Options: Slide down background · Existing menu-only background
Hover surface durationConditional: Adjust within the range offered by the theme editor.
Transparent colorsConditional: Choose the presentation or source that fits this component.Options: Default · Inverse · Custom
Inverse color schemeConditional: Choose an available Shopify color scheme.
Transparent textConditional: Choose a local color when the relevant custom source is enabled.
Transparent accentConditional: Choose a local color when the relevant custom source is enabled.
Transparent accent textConditional: Choose a local color when the relevant custom source is enabled.
Transparent borderConditional: Choose a local color when the relevant custom source is enabled.
Position: Choose the presentation or source that fits this component.Options: Left · Center · Right
Position: Choose the presentation or source that fits this component.Options: Left · Center · Right
Row: Choose the presentation or source that fits this component.Options: Top · Bottom
Logo to menu gap: Adjust within the range offered by the theme editor.
Menu item gap: Adjust within the range offered by the theme editor.
Mobile account display: Choose the presentation or source that fits this component.Options: Header icon · Menu footer
Show social icons in mobile menuConditional: Uses links from Theme settings > Social media.
Search icon: Enable or disable this option and preview the result.
PositionConditional: Choose the presentation or source that fits this component.Options: Left · Right
RowConditional: Choose the presentation or source that fits this component.Options: Top · Bottom
Country/Region: [Manage countries/regions](/admin/settings/markets)
FlagConditional: Enable or disable this option and preview the result.
Language selector: [Manage languages](/admin/settings/languages)
Font: Choose the presentation or source that fits this component.Options: Heading · Subheading · Body · Accent
Size: Choose the presentation or source that fits this component.Options: 10px · 12px · 14px · 16px · 18px
Position: Choose the presentation or source that fits this component.Options: Left · Right
Row: Choose the presentation or source that fits this component.Options: Top · Bottom
Width: Choose the presentation or source that fits this component.Options: Page · Full
Height: Choose the presentation or source that fits this component.Options: Compact · Standard
Sticky header: Choose the presentation or source that fits this component.Options: Always · On scroll up · Never
Hide on scroll downConditional: Slides the header out of view while scrolling down and snaps it back when scrolling up. Best paired with "Always sticky".Options: Never · All devices · Mobile only (<750px)
Divider thickness: Adjust within the range offered by the theme editor.
Divider width: Choose the presentation or source that fits this component.Options: Page · Full
Border thickness: Adjust within the range offered by the theme editor.
Color source: Theme colors follow Theme settings > Colors. Other sources apply only to this section.Options: Use theme colors · Choose a color scheme · Set custom colors
DefaultConditional: Choose an available Shopify color scheme.
Bottom rowConditional: Choose an available Shopify color scheme.
BackgroundConditional: Choose a local color when the relevant custom source is enabled.
HeadingConditional: Choose a local color when the relevant custom source is enabled.
TextConditional: Choose a local color when the relevant custom source is enabled.
AccentConditional: Choose a local color when the relevant custom source is enabled.
Accent textConditional: Choose a local color when the relevant custom source is enabled.
BorderConditional: Choose a local color when the relevant custom source is enabled.
Transparent backgroundConditional: Enable or disable this option and preview the result.
Color schemeConditional: Choose the presentation or source that fits this component.Options: Default · Inverse · Custom
Transparent backgroundConditional: Enable or disable this option and preview the result.
Color schemeConditional: Choose the presentation or source that fits this component.Options: Default · Inverse · Custom
Transparent backgroundConditional: Enable or disable this option and preview the result.
Color schemeConditional: Choose the presentation or source that fits this component.Options: Default · Inverse · Custom