Customize your store header

The header is a fixed section at the top of your storefront and typically appears consistently across all pages. It usually includes your brand logo, main navigation menu, and additional modules such as announcement bars. As the first visual and interactive area users see when visiting your site, the header plays a key role in shaping their experience.

A well-designed header not only reinforces brand recognition but also helps guide visitors to key pages, boosting overall conversion rates.

How to access

The header is a global section that can be configured and previewed from any page in the editor. To edit the header, follow these steps:

1. Log in to your Genstore admin panel.
2. Go to Online Store -> Themes.
3. Find your target theme and click Customize to open the theme editor.
4. In the top toolbar, use the page selector to choose any page type (e.g., home page, product page, collection page).
5. In the left-hand panel, click Header to open the configuration area.

Header structure

The Genstore header is composed of multiple sections and blocks, offering a clear structure with flexible customization options.

Default structure

Level	Name	Description
Section	Announcement bar	An optional section that appears by default. Used to display store announcements with support for text, links, and carousel mode.
Section	Main header	A required section that includes common settings such as language switcher, logo, and navigation menu.

Announcement bar

The announcement bar is ideal for displaying storewide messages, shipping info, or promotional alerts.

• Enable or disable carousel mode
• Add multiple announcement blocks
• Each block supports text and a clickable link

Main header section

The main header section supports three types of blocks: Product, Collection, and Mega menu.

Product

Add shortcuts to specific products in your navigation—perfect for promoting new or best-selling items.

• Add multiple product entries
• Set a destination link for each product
• Enable card-style display including product image, price, and tags
• Link directly to the product page

Collection

Build out category-based navigation (e.g., Women / Men / Accessories).

• Add featured collections such as "Summer Picks" or "Phone Accessories"
• Customize display options for cover images and collection names
• Link directly to the corresponding collection page

Mega menu

The mega menu lets you organize complex categories through menu hierarchies and turn navigation into a marketing touchpoint.

• Support for multi-level structure (e.g., Men → Outerwear → Down Jackets)
• Insert promotional content such as banners or featured products
• Combine navigation and marketing in one place

Setup steps

Mega menu setup is divided into three parts: Menu item association, Layout style, and Promotional content.

1. Menu item association
   • The mega menu display is based on menu levels:
     • Level 1 → Top navigation entry
     • Level 2 → Main columns in the mega menu
     • Level 3 → Sub-lists under each column
   • Text must exactly match your navigation menu names. Differences in spacing, case, or symbols will prevent correct linking.
2. Layout style
   • Choose from three alignment options: Align to page, Justify, or Adapt.
3. Promotional content
   • Configure up to 3 promotional groups with images and links.
   • Each group supports a title, button text, button link, and optional image link.
   • Customize image style with layout, alignment, aspect ratio, and shape.

Setting	Description
Image position	Left / Right
Image count	1–3 images
Heading	Custom promotional heading
Button text	Custom button label
Button link	Destination for the button
Layout	Text outside / Text inside
Content alignment	Left / Center / Right
Aspect ratio	1:1, 3:4, 4:3, or Auto
Shape	Standard / Square / Soft / Capsule / Arch

TIP

Use the mega menu to highlight promotions, featured collections, or brand banners directly within navigation, turning browsing into a marketing opportunity.

Default built-in components

The following components are integrated into the header by default—no manual setup required:

• Customer icon (login/register)
• Search button
• Shopping cart icon

These elements are automatically responsive across different devices, ensuring a consistent user experience.

Additional sections

To further enhance your header, click Add section and choose from available options such as:

• Announcement bar: Highlight store updates like promotions, shipping info, or service guarantees.
• Scrolling text: Display short messages in a horizontal scroll format—ideal for promo phrases, brand slogans, or user tips.