Glossary
What is an e-commerce header? Definition
June 4, 2026
The e-commerce header (site header) is the fixed or sticky area at the top of each page of an online store. It groups the logo, the navigation menu, the search bar, the customer account, and the cart icon. It is the main point of orientation for visitors: accessing collections, finding their cart, or logging in. A clear header reduces friction and supports conversion.
Summary
Definition: header, menu, and announcement bar
The header (or header) is the navigational frame present across the entire storefront site: home, product pages, collections, CMS pages. It structures access to the catalog and key actions.
Typical components of an e-commerce header. Logo: link to the home page. Main menu: categories, collections, pages (About, Contact). Search bar: quick access to the catalog. Customer account: login, orders (customer account). Cart icon: mini-cart or drawer, sometimes an item counter. Language / currency selector: Shopify Markets, flags. Announcement bar: promo banner above ("Free shipping on orders over €80").
Menu variations. Horizontal menu: visible links on desktop. Mega menu: wide submenus with category visuals. Hamburger menu: ☰ icon on mobile, side panel. Sticky header: header that remains visible on scroll.
Useful distinctions. Header vs breadcrumbs: the header = global navigation; breadcrumbs = contextual path of the page. Header vs footer: the footer groups secondary links (T&C, FAQ, social networks); the header prioritizes catalog and purchasing. Storefront header vs checkout header: Shopify checkout is streamlined (minimal logo, no full catalog menu). Header vs global UX: the header is a UX component, not the entire journey. Fixed header vs transparent header: overlay on the home hero vs classic opaque background.
Why the header is important for an online store
The header is seen on every page. If it is confusing, the visitor won't find the right collection, will give up, or will go back. If it is effective, it accelerates product discovery and the add-to-cart process.
The essential points to remember are as follows. Catalog orientation: quick access to best-sellers and profitable categories. Cart shortcut: visual reminder of the cart, limits silent cart abandonment. Trust: professional logo, visible Contact / Customer Service links. Promotions: announcement bar for limited offers without page redesign. Mobile: essential compact menu (mobile optimization). CRO: menu testing, link order, search visibility (CRO).
In the same spirit, Journey: first step of the conversion funnel after landing.
An overloaded header (15 menu entries) creates purchase friction: too many choices, high cognitive load.
Header on Shopify
Shopify manages the header via the Online Store 2.0 theme (Shopify Help Center). Online Store > Themes > Customize: Header section in the visual editor. Settings > Navigation: Main menu and Footer menu assigned to the theme. Logo: upload via Settings > Brand or header section (recommended dimensions vary by theme). Sticky header: option in Dawn, Refresh, and recent themes. Announcement bar: dedicated section above the header. Cart drawer: native side cart or custom Liquid. Search & Discovery: Shopify app for filters and predictive search.
In the same spirit, Markets: country / language selector in the header depending on the configuration.
Merchant workflow. Create Navigation menus aligned with actual collections. Customize the Header section (logo, sticky, icons). Enable the announcement bar for seasonal promotions. Test mobile in the Theme Editor and on a real device. Iterate based on heatmaps or support feedback ("I can't find X").
A chat widget (e.g., Qstomy) can be integrated at the bottom right without replacing a clear header navigation.
In summary
The essential points to remember are as follows. E-commerce header = navigation header: logo, menu, search, account, cart. Announcement bar, mega menu, sticky, and hamburger depending on the device. Key challenges: catalog orientation, conversion, mobile, trust. Shopify: Theme Editor, Navigation, Search & Discovery, Markets. Short menu, visible cart, CRO tests, accessibility.
Associated terms, FAQ, and resources
Associated terms
Breadcrumb trail: secondary navigation below the header.
E-commerce home page: logo destination.
Shopify Collection: target for menu links.
Customer account: accessed from the header.
CRO: tested header optimization.
FAQ
Header and menu: same thing?
No. The header is the overall area at the top of the page. The menu is a part of it (navigation links). The header also includes the logo, search, cart, and sometimes an announcement bar.
Sticky header: advantages and risks?
The sticky header keeps the cart and menu accessible when scrolling, which is useful on long product pages. Risk: reducing useful space on mobile if it is too tall. Test with and without sticky.
How many links in the main menu?
Aim for 5 to 7 entry-level links. Beyond that, group them in a mega menu or move them to the footer. Prioritize collections that convert.
How to configure the header on Shopify?
Go to Online Store > Themes > Customize, Header section. Create your menus in Settings > Navigation, then assign "Main menu" to the navigation block.
Going further
Sources: Shopify Help Center (Customize themes), Shopify Help Center (Menus and links).
Enzo
13 May 2026
Convert over 2,000 customers on average per month with Qstomy.
The world’s 1st Shopify AI dedicated to customer conversion
Empowering 200+ e-commerce merchants
Subscribe to the newsletter and get a personalized e-book!
No-code solution, no technical knowledge required. AI trained on your e-shop and non-intrusive.
*Unsubscribe at any time. We do not send spam.