Header & footer
Customise the header
Logo, menu, layout presets, mega menus, icon order, the header button and the mobile header extras.
Before you start
- A main menu created in Content → Menus.
- Your logo, if it differs from the one in Theme settings.
What you will have
A header that matches your brand, with the menu, icons and call-to-action in the order you want on both desktop and mobile.
Open the header section
Theme editorHeaderCM Header
The header lives in the Header group at the top of the sidebar on every page. Edit it once and it updates everywhere.
Home pageHeaderCM Header1Click to open its settingsTheme editor · Home page › CM HeaderPick a desktop layout
Desktop layout preset decides the overall shape of the header.
Home pageHeaderCM Header1Click to open its settings2CM HeaderDesktop layout presetSplit into 3 partsSplit into 3 parts: Logo, menu and actions sit in three separate rounded pods. This is the default.One bar: Everything joins into a single rounded bar.Full page width bar: One bar running edge to edge.Compact pill headerKeeps the rounded pill look while the header stays above the hero.Theme editor · Home page › CM HeaderDecide whether the header floats over the hero
Overlap hero (sticky pill) makes the header float on top of the first section. With it off, the header sits above the hero. When it is on, use Overlap style to choose a Dark pill or Light pill so the header stays readable over your hero image.
Home pageHeaderCM Header1Click to open its settings2CM HeaderOverlap hero (sticky pill)On: the header floats over the first section. Off: it sits above it.Overlap styleDark pillDark pill or Light pill.Overlap header width on desktop92%How wide the floating header is, as a share of the page.Show notification bellShows or hides the bell icon in the header.Theme editor · Home page › CM HeaderTipUse Dark pill over bright imagery and Light pill over dark imagery.
Set the logo
Under the Logo heading, upload a Logo image and set Logo width. The header looks for a logo in this order and uses the first one it finds.
Home pageHeaderCM Header1Click to open its settingsTheme editor · Home page › CM Header- Logo image in the header section
- Logo in Theme settings → Logo
- Logo text (default “Comers”), shown as plain text
Connect the main menu
Shopify adminContentMenusMain menu
Main menu selects which Shopify menu shows in the header. To change the links themselves, edit that menu in your Shopify admin, then return to the editor.
Shopify admin1Content2Menus3Main menuShopify admin · click these in orderTipNest links under a top-level item to create a dropdown.
Add a mega menu panel
CM HeaderAdd blockCM Mega menu panel
A mega menu panel attaches rich media to one top-level menu item. Add one block per menu item that should open a panel.
Home pageHeaderCM HeaderCM Mega menu panel1Click Add block and pick thisAdd block2CM Mega menu panelMenu item titleEmptyMust match the top-level menu item's title exactly, for example “Women”.Panel headingExploreHeading shown inside the panel.Panel imageSelect imagePanel videoSelect videoYouTube or Vimeo URLPaste a link or searchThe media shown beside the links.Media ratio4:5Auto, 1:1, 4:5, 3:4, 16:9 or Custom.Media captionEmptyMedia linkPaste a link or searchMedia link labelShop nowText and link on the media.Theme editor · Home page › CM Header › CM Mega menu panelImportantIf the panel does not open, the title does not match. Check spelling, capital letters and extra spaces.
Set up login and the header button
Show log in link toggles the account link, and Log in label changes its text. Header button label and Header button link control the call-to-action button. Customer account menu selects the menu shown to signed-in customers.
Home pageHeaderCM Header1Click to open its settingsTheme editor · Home page › CM HeaderTipClear the Header button label if you do not want a button in the header.
Reorder or hide header items
CM HeaderAdd blockCM Header item (order)
Add one block for each item you want to control, then drag the blocks into the order you want. Each block has an Item, a Device and a Hide this item switch.
Home pageHeaderCM HeaderCM Header item1Click Add block and pick thisAdd blockTheme editor · Home page › CM Header › CM Header item- Items: Logo, Light/Dark toggle, Main menu, Search, Log in, Account, Notifications (mobile), Menu button (mobile), Search button (mobile), Cart, CTA button, Custom icon link.
- Device: Desktop and mobile, Desktop only, or Mobile only.
- Custom icon link lets you add your own icon and link, for example a wishlist.
Replace the header icons
Under Header icons you can upload your own Bag icon, Bell (notifications) icon, Search icon and Menu icon, then set Uploaded icon size. Leave them empty to use the built-in icons.
Home pageHeaderCM Header1Click to open its settingsTheme editor · Home page › CM HeaderSet up the mobile header extras
The mobile header has a few extras of its own.
Home pageHeaderCM Header1Click to open its settingsCM Mobile notificationAdd block2CM HeaderMobile homepage tickerDiscover your next favourite • Explore the collectionA short line of text shown under the mobile header on the homepage.Animated search terms (comma separated)clothing,footwear,accessoriesWords that rotate in the mobile search bar, for example clothing, footwear, accessories.Mobile help center linkPaste a link or searchMobile chat or contact linkPaste a link or searchWhere the mobile help and chat buttons go.Theme editor · Home page › CM HeaderFine-tune the colours
Header background colour and Header text and icon colour override the pill styles. For anything else, open the CM customise group at the bottom of the section settings: background, text size, padding, corner radius and an entrance animation.
Home pageHeaderCM Header1Click to open its settingsTheme editor · Home page › CM Header