Glossary
/
ecommerce-header
E-commerce header: website header definition, navigation menu, logo, cart, search, sticky mobile Shopify, and UX conversion tips.
Updated on
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 includes the logo, the navigation menu, search, customer account, and cart icon. It is the visitor's main point of orientation: 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 framework present across the entire storefront site: home, product sheets, 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: promotional 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: the Shopify checkout is streamlined (minimal logo, no full catalog menu). Header vs global UX: the header is a UX component, not the entire user 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, and will leave or turn back. If it is effective, it accelerates product discovery and the checkout process.
The essential points to remember are as follows. Catalog orientation: fast access to best-sellers and profitable categories. Cart shortcut: visual reminder of the cart, limiting silent cart abandonment. Trust: professional logo, visible Contact / Customer Service links. Promotions: announcement bar for limited offers without a page redesign. Mobile: compact essential 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 friction to purchase: 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 available in Dawn, Refresh, and recent themes. Announcement bar: dedicated section above the header. Cart drawer: native slide-out cart or custom Liquid. Search & Discovery: Shopify app for filters and predictive search.
In the same spirit, Markets: country / language selector in the header based on 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 rendering 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 in the bottom right corner without replacing 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 navigation, conversion, mobile, trust. Shopify: Theme Editor, Navigation, Search & Discovery, Markets. Short menu, visible cart, CRO testing, accessibility.
Associated terms, FAQ, and resources
Associated terms
Breadcrumb trail: secondary navigation below the header.
E-commerce home page: logo destination.
Shopify collection: target of menu links.
Customer account: access 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 the announcement bar.
Sticky header: advantages and risks?
The sticky header keeps the cart and menu accessible during 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 top-level entries. Beyond that, group them into 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).
In brief
E-commerce header = navigation header: logo, menu, search, account, cart.
Announcement bar, mega menu, sticky and hamburger depending on the device.
Challenges: catalog orientation, conversion, mobile, trust.
Shopify: Theme Editor, Navigation, Search & Discovery, Markets.
Short menu, visible cart, CRO tests, accessibility.
Associated terms, FAQ, and going further
Related terms
Breadcrumbs: secondary navigation below the header.
E-commerce home page: destination of the logo.
Shopify Collection: target of the menu links.
Customer account: accessed from the header.
CRO: tested header optimization.
FAQ
Header and menu: the 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 bar, cart, and sometimes an announcement bar.
Sticky header: advantages and risks?
The sticky header keeps the cart and menu accessible while 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 first-level entries. Beyond that, group them into a mega menu or move them to the footer. Prioritize high-converting collections.
How to set up 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
June 4, 2026
