This guide explains how to customize your storefront Header, including logo placements, sticky header options, dynamic background colors, and navigation menus.
️Customization Settings
Select the Header section in the Theme Editor to configure:
1. Logo Position Options
Choose how your logo and navigation links are arranged on desktop screens:
- Middle Left: Displays logo middle-left, main navigation centered next to it, icons on the right.
- Middle Center: Displays logo centered on the navigation row, links on the left, icons on the right.
- Top Left: Displays logo top-left above the navigation menu row.
- Top Center: Displays logo centered at the top, main menu centered on the row below.
2. Sticky Header
Control how the header behaves when a customer scrolls down:
- None: The header scrolls off the screen.
- On Scroll: The header hides when scrolling down, and slides down to stick to the top of the screen when scrolling up.
- Always: The header remains sticky at the top of the screen at all times.
3. Dynamic Background Colors
Configure the header background for two different scrolled states:
- Background Color (Not Scrolled):
* The color when the page is at the very top. You can set this to transparent to show your hero banner background image behind the header links.
- Background Color (Scrolled / Sticky):
* The solid background color (e.g. your primary background color) that loads when the customer scrolls down, ensuring header links remain readable.
4. Header CTA Button
Add a prominent call-to-action button (e.g. “Shop Now”) directly inside the header row:
- Under Header, click Add Block > CTA.
- Enter the CTA Label and select the CTA Link.
- Choose your button style: Primary, Secondary, or Outline.