Header
How to use the Header section in the Meditative Folks Theme.
Header
At a glance
The Header is your store navigation bar. Build the layout with theme blocks — logo, search, cart, account, currency switcher, and menus. The header can stick to the top of the page as customers scroll.
Where to find it
-
Theme editor path: Online Store → Customize → select the relevant page → Header
-
Section group: This section is part of
header-group.json, which bundles the announcement bar and header together. -
Add to a page: Add via Add section → category Header.
Screenshot needed
Header in the theme editor
Screenshot of the Header section in the theme editor left sidebar. Show the settings panel and the live preview so merchants can match labels to what they see.
Settings
Sticky settings
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Enable sticky header | Keeps the header visible as customers scroll. | No | Always |
| Sticky style | How the sticky header behaves while scrolling. | style_1 | Sticky header is on |
| Show sticky header when scrolling up | On all screen sizes, hide the header when scrolling down and show it when scrolling up. When off, desktop uses scroll-away then stick behavior. | No | Sticky header is on and Sticky style is Style 2 |
| Sticky on desktop only | Hide-on-scroll and shadow-on-scroll effects only apply when the header is sticky at the current screen size. | No | Sticky header is on and Sticky style is Style 1 |
| Sticky top offset | Use this when another fixed element sits above the header | 0 | Sticky header is on and Sticky style is Style 1 |
| Sticky layer order | Higher values keep the header above page content | 30 | Sticky header is on and Sticky style is Style 1 |
| Show divider shadow | Turning this off also disables shadow-on-scroll, even if that setting was previously enabled. | Yes | Sticky header is on and Sticky style is Style 1 |
| Show shadow only after scroll | Shows the header shadow only after the page has been scrolled. | Yes | Sticky header is on, Style 1, and Show divider shadow is on |
| Hide header when scrolling down | Header slides up when scrolling down and slides down when scrolling up. Use Hide after scrolling to set when hiding begins. | No | Sticky header is on and Sticky style is Style 1 |
| Hide after scrolling | Header stays visible until the page is scrolled this far | 150 | Sticky header is on, Style 1, and Hide header when scrolling down is on |
Separator settings
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Show separator | Shows a divider line on this section. | No | Always |
| Use global separator color | When on, uses the matching style from Theme settings. Turn off to style only this section or block. | Yes | show separator |
| Separator color | Controls the divider line: separator color. | #dcdcdc | show separator and Use global separator color is off |
| Separator thickness | Controls the divider line: separator thickness. | 1 | show separator |
| Top spacing | Change margin above the separator | 16 | show separator |
| Bottom spacing | Change margin below the separator | 16 | show separator |
Transparent header
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Transparent header | Overlays the first section on the homepage. Transparent on load and while scrolling. Hover or focus shows the color scheme. Sticky bars stay solid. | No | Always |
| Text color | Controls “Text color” on the storefront. Open the theme editor to preview live. | #ffffff | Transparent header is on |
Color Scheme
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Color scheme | Applies a color scheme from Theme settings → Colors. | scheme-1 | Always |
Blocks
The Header uses theme blocks. Add logo, search, cart, account, menus, wishlist, and layout wrappers (Desktop, Tablet, Mobile) so the bar can differ by screen size.
Browse the Header blocks group to configure each piece.
Setting details
Each control from the tables above, explained simply:
Enable sticky header
Keeps the header visible as customers scroll. Default: No.
Sticky style
How the sticky header behaves while scrolling. Default: style_1. This control appears when: Sticky header is on.
Show sticky header when scrolling up
On all screen sizes, hide the header when scrolling down and show it when scrolling up. When off, desktop uses scroll-away then stick behavior. Default: No. This control appears when: Sticky header is on and Sticky style is Style 2.
Sticky on desktop only
Hide-on-scroll and shadow-on-scroll effects only apply when the header is sticky at the current screen size. Default: No. This control appears when: Sticky header is on and Sticky style is Style 1.
Sticky top offset
Use this when another fixed element sits above the header Default: 0. This control appears when: Sticky header is on and Sticky style is Style 1.
Sticky layer order
Higher values keep the header above page content Default: 30. This control appears when: Sticky header is on and Sticky style is Style 1.
Show divider shadow
Turning this off also disables shadow-on-scroll, even if that setting was previously enabled. Default: Yes. This control appears when: Sticky header is on and Sticky style is Style 1.
Show shadow only after scroll
Shows the header shadow only after the page has been scrolled. Default: Yes. This control appears when: Sticky header is on, Style 1, and Show divider shadow is on.
Hide header when scrolling down
Header slides up when scrolling down and slides down when scrolling up. Use Hide after scrolling to set when hiding begins. Default: No. This control appears when: Sticky header is on and Sticky style is Style 1.
Hide after scrolling
Header stays visible until the page is scrolled this far Default: 150. This control appears when: Sticky header is on, Style 1, and Hide header when scrolling down is on.
Show separator
Shows a divider line on this section. Default: No.
Use global separator color
When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: Yes. This control appears when: Show separator is on.
Separator color
Controls the divider line: separator color. Default: #dcdcdc. This control appears when: Show separator is on and Use global separator color is off.
Separator thickness
Controls the divider line: separator thickness. Default: 1. This control appears when: Show separator is on.
Top spacing
Change margin above the separator Default: 16. This control appears when: Show separator is on.
Bottom spacing
Change margin below the separator Default: 16. This control appears when: Show separator is on.
Transparent header
Overlays the first section on the homepage. Transparent on load and while scrolling. Hover or focus shows the color scheme. Sticky bars stay solid. Default: No.
Text color
Controls “Text color” on the storefront. Open the theme editor to preview live. Default: #ffffff. This control appears when: Transparent header is on.
Color scheme
Applies a color scheme from Theme settings → Colors. Default: scheme-1.
Tips
- Use Desktop wrapper and Mobile wrapper blocks to show different layouts per screen size.
- Enable sticky header so navigation stays visible while scrolling.
- Place your logo block in the center or left column depending on your brand layout.