Header & Footer
Official guide · English · Version 9c253d0cf11816df
The Header and Footer builders give you complete control over the top and bottom navigation areas of your storefront. Both builders use a two-column layout with settings on the left and a live preview on the right (visible on large screens).
Manage public accounts and their display locations in Social Media. Both builders preview the saved accounts and provide a link to those central settings.
Header Builder
Navigate to Storefront > Design & Setup > Header & Nav to access the header builder.
The header builder has a Save button and a Reset to Defaults button in the top toolbar. Changes are not applied to your live storefront until you save.
Header Template
At the top of the settings panel, you can choose a specific header template that overrides your site-wide template. This allows your header to have a different visual style from the rest of the site.
| Template | Style |
|---|---|
| Site Default | Uses the same template as your site (recommended) |
| Modern | Clean glassmorphic with smooth transitions |
| Classic | Warm serif with ornamental accents |
| Bold | Dark with neon glow effects |
| Fashion | Ultra-minimal, all-caps elegance |
| Food | Warm rounded with orange palette |
| Tools | Industrial grid with yellow accents |
| Machinery | Navy professional corporate |
| Art | Soft pastels, gallery aesthetic |
| Digital | Gradient SaaS-style header |
| Sports | Bold red, energetic typography |
| Marketplace | Dense info-rich navigation |
Layout Settings
Configure the structural layout of your header:
| Setting | Options | Description |
|---|---|---|
| Logo Position | Left, Center | Where the logo appears in the header |
| Navigation Position | Beside Logo, Center, Below Logo | Where the navigation menu is placed relative to the logo |
| Sticky Header | On/Off | Whether the header stays fixed at the top when scrolling |
| Transparent Header | On/Off | Whether the header has a transparent background (useful for hero images) |
| Full Width | On/Off | Whether the header spans the full browser width |
| Logo Max Height | Number (px) | Maximum height of the logo image in pixels (default: 40) |
Top Bar
The top bar is a thin strip above the main header, often used for announcements and contact info:
| Setting | Description |
|---|---|
| Enabled | Toggle the top bar on or off |
| Subtitle | Text displayed in the top bar |
| Background Color | Custom background color (leave empty for template default) |
| Text Color | Custom text color (leave empty for template default) |
| Manage social accounts and display settings | Open the central Social media page to choose accounts and enable the header location |
| Show Contact Info | Display phone and email in the top bar |
| Announcements | A list of rotating announcement messages |
Navigation Items
The Navigation Items section lets you manage the links in your header menu:
Add a navigation item
Click the Add Item button to create a new menu link. Each item has these properties:
| Property | Description |
|---|---|
| Type | Home, Products, All Categories, Category, Page, or Custom Link |
| Label | The text displayed in the navigation menu |
| URL | The link destination (auto-filled for Home, Products, Categories; manual for Custom Link) |
| Enabled | Toggle to show or hide the item |
| Open in New Tab | Whether the link opens in a new browser tab |
Reorder items
Drag navigation items using the grip handle to change their order in the menu.
Remove items
Click the delete button on any item to remove it from the navigation.
Category Display Settings
When you have a "Categories" or "All Categories" navigation item, these settings control how categories appear:
| Setting | Options | Description |
|---|---|---|
| Display Mode | Dropdown, Mega Menu, Inline | How categories are shown when hovering/clicking |
| Show Subcategories | On/Off | Whether to show child categories in the dropdown or mega menu |
Header Actions
Control which action buttons appear in the header:
| Action | Default | Description |
|---|---|---|
| Show Search | On | Displays a search icon/bar in the header |
| Show Cart | On | Displays the shopping cart icon with item count |
CTA Button
Add an optional call-to-action button to the header:
| Setting | Description |
|---|---|
| Enabled | Toggle the CTA button on or off |
| Text | Button label (e.g., "Shop Now") |
| URL | Where the button links to |
| Style | Filled or Outlined button appearance |
| Open in New Tab | Whether the link opens in a new tab |
Live Preview
On large screens, the right side of the page shows a live preview of your header configuration. This preview updates in real-time as you make changes, allowing you to see exactly how your header will look before saving.
Footer Builder
Navigate to Storefront > Design & Setup > Footer to access the footer builder.
The footer builder uses the same two-column layout as the header builder, with settings on the left and a live preview on the right.
Footer Template
Like the header, the footer can have its own template that overrides the site-wide template:
| Template | Style |
|---|---|
| Site Default | Uses the same template as your site |
| Modern | Clean minimal with dark background |
| Classic | Warm serif fonts with gold accents |
| Bold | Dark with neon accents, tech feel |
| Fashion | Ultra-minimal, all-caps, elegant |
| Food | Warm orange palette, rounded elements |
| Tools | Industrial gray and yellow grid |
| Machinery | Navy professional corporate |
| Art | Soft pastels, gallery aesthetic |
| Digital | Gradient backgrounds, SaaS style |
| Sports | Bold red/orange, energetic |
| Marketplace | Dense info-rich with trust badges |
Layout Settings
| Setting | Options | Description |
|---|---|---|
| Columns | 3 or 4 | Number of content columns in the footer |
| Social media | Central settings | Choose accounts and enable the footer location in the Social media page |
| Show Payment Icons | On/Off | Display accepted payment method icons |
| Show Newsletter | On/Off | Include an email subscription form |
| Show Contact Info | On/Off | Display contact details (phone, email, address) |
| Show Quick Links | On/Off | Show navigation quick links |
| Content Width | Standard, Full | Width of the footer content area |
Branding Settings
| Setting | Description |
|---|---|
| Show Logo | Display your store logo in the footer |
| Show Store Name | Display the store name text |
| Show About Text | Include a brief about paragraph |
| About Max Length | Maximum character length for the about text (default: 200) |
Copyright Settings
| Setting | Description |
|---|---|
| Copyright Text | Custom copyright notice. Leave empty to auto-generate (e.g., "2026 Your Store. All rights reserved.") |
| Show Powered By | Display a "Powered by" attribution link |
Color Settings
| Setting | Description |
|---|---|
| Background Color | Custom footer background color (leave empty for template default) |
| Text Color | Custom footer text color |
| Accent Color | Custom accent color for links and highlights |
Each color field can be left empty to use the template's default colors, or set to a custom hex value.
Info: Both the Header and Footer builders include a Reset to Defaults button that restores all settings to their default values. Use this if you want to start over with a clean configuration.