comersDocs
Install guide
CM Header

Header & footer

CM Header

Global header with overlap pill, mega menus, mobile search/ticker, notifications.

26 settings5 block typessections/header.liquid
LogoNavSearchCartTheme toggleNotificationsMega panel
Theme editorHeaderCM Header1Click to open its settingsCM Mega menu panelCM Mobile notificationCM Mobile homepage searchCM Mobile homepage tickerCM Header item (order)Add block2CM HeaderMobile help center linkPaste a link or searchPaste a link, or search for a page, product or collection.Mobile chat or contact linkPaste a link or searchPaste a link, or search for a page, product or collection.Overlap hero (sticky pill)Off = sticky header sits above the hero. On = floats over the hero.Compact pill headerKeeps the rounded pill look while staying above the heroDesktop layout presetSplit into 3 partsSplit keeps three separate parts. One bar joins them into a single rounded bar. Full page width runs one bar edge to edge.Theme editor · CM Header, shown with the theme's default values

How to configure

  1. Set overlap for homepage

    Enable overlap + dark/light pill over the hero.

  2. Add mega menus

    One block per top-level menu item that needs a panel.

Settings

Select CM Header in the theme editor sidebar to find these.

Mobile help center linkPaste a link or search
Linkmobile_help_url

Paste a link, or search for a page, product or collection.

Mobile chat or contact linkPaste a link or search
Linkmobile_chat_url

Paste a link, or search for a page, product or collection.

Overlap hero (sticky pill)
Switchenable_overlap

A switch. Off by default.

Off = sticky header sits above the hero. On = floats over the hero.

Compact pill header
Switchcompact_pill

A switch. On by default.

Keeps the rounded pill look while staying above the hero

Desktop layout presetSplit into 3 partsSplit into 3 partsOne bar (not split)Full page width bar
Dropdownlayout_style

Pick one of the 3 options shown. Default: Split into 3 parts.

Split keeps three separate parts. One bar joins them into a single rounded bar. Full page width runs one bar edge to edge.

Overlap styleDark pillDark pillLight pill
Dropdownoverlap_style

Pick one of the 2 options shown. Default: Dark pill.

Overlap header width on desktop92%
Slideroverlap_width

Drag the slider from 50 to 100%. Default: 92%.

Only used by the "One bar" layout when the header overlaps the page. Split and Full page width keep their own width.

Header background colourNot set
Colourheader_bg

Pick a colour. Left empty, it follows your theme colours.

Leave empty to follow the light or dark style above.

Header text and icon colourNot set
Colourheader_text

Pick a colour. Left empty, it follows your theme colours.

Logo imageSelect image
Imagelogo_image

Click Select image to upload one or choose from your files.

Upload your logo here. Left empty, the logo from Theme settings is used, then the logo text below.

Logo width96px
Sliderlogo_image_width

Drag the slider from 40 to 300px. Default: 96px.

Logo textComers
Textlogo_text

Type your text. Default: “Comers”.

Main menumain menu Change
Menumenu

Pick one of your menus. Edit the links in Content → Menus.

Show notification bell
Switchshow_notifications

A switch. Off by default.

Shows the CM Notification blocks as a bell with a counter. These are store announcements you write here, not live customer notifications.

Show log in link
Switchshow_login

A switch. On by default.

Log in labelLog in
Textlogin_label

Type your text. Default: “Log in”.

Header button labelGet it Now — It's Free
Textcta_label

Type your text. Default: “Get it Now — It's Free”.

Header button linkPaste a link or search
Linkcta_link

Paste a link, or search for a page, product or collection.

Leave empty to open the contact drawer instead.

Customer account menucustomer account main menu Change
Menucustomer_account_menu

Pick one of your menus. Edit the links in Content → Menus.

Mobile homepage tickerDiscover your next favourite • Explore the collection
Textmobile_ticker

Type your text. Default: “Discover your next favourite • Explore the collection”.

Animated search terms (comma separated)clothing,footwear,accessories
Textmobile_search_terms

Type your text. Default: “clothing,footwear,accessories”.

Bag iconSelect image
Imageicon_cart_image

Click Select image to upload one or choose from your files.

Bell (notifications) iconSelect image
Imageicon_bell_image

Click Select image to upload one or choose from your files.

Search iconSelect image
Imageicon_search_image

Click Select image to upload one or choose from your files.

Menu iconSelect image
Imageicon_menu_image

Click Select image to upload one or choose from your files.

Uploaded icon size22px
Slidericon_size

Drag the slider from 16 to 40px. Default: 22px.

Blocks

Expand CM Header in the sidebar and click Add block to use these.

CM Mega menu panelmega_menu10 settings
CM Mobile notificationnotification4 settings
CM Mobile homepage searchmobile_searchLimit 1 · 0 settings
CM Mobile homepage tickermobile_tickerLimit 1 · 0 settings
CM Header item (order)header_item8 settings

CM customise

The shared styling controls at the bottom of this section's settings. They work the same way on every Comers section. How to use them

Show the 18 shared settings
Hide on desktop
Switchcm_hide_desktop

A switch. Off by default.

Hide on mobile
Switchcm_hide_mobile

A switch. Off by default.

Background colourNot set
Colourcm_bg

Pick a colour. Left empty, it follows your theme colours.

Heading colourNot set
Colourcm_heading_color

Pick a colour. Left empty, it follows your theme colours.

Text colourNot set
Colourcm_text_color

Pick a colour. Left empty, it follows your theme colours.

Heading size100%
Slidercm_heading_size

Drag the slider from 50 to 200%. Default: 100%.

Text size100%
Slidercm_text_size

Drag the slider from 70 to 160%. Default: 100%.

AlignLeave as isLeave as isLeftCenterRight
Dropdowncm_align

Pick one of the 4 options shown. Default: Leave as is.

Button colourNot set
Colourcm_button_bg

Pick a colour. Left empty, it follows your theme colours.

Button text colourNot set
Colourcm_button_text

Pick a colour. Left empty, it follows your theme colours.

Button corner radius (px)Auto
Numbercm_button_radius

Type a number. Leave empty to keep the theme default.

Section width0px
Slidercm_max_width

Drag the slider from 0 to 2000px. Default: 0px.

0 leaves the width as is.

Padding top (px)Auto
Numbercm_pad_top

Type a number. Leave empty to keep the theme default.

Leave empty to keep the section's own spacing.

Padding bottom (px)Auto
Numbercm_pad_bottom

Type a number. Leave empty to keep the theme default.

Corner radius (px)Auto
Numbercm_radius

Type a number. Leave empty to keep the theme default.

Height0px
Slidercm_height

Drag the slider from 0 to 1200px. Default: 0px.

0 keeps the automatic height.

Vertical alignLeave as isLeave as isTopMiddleBottom
Dropdowncm_valign

Pick one of the 4 options shown. Default: Leave as is.

Most visible when a height is set.

Entrance animationNoneNoneFade upFade inFade from leftFade from rightScale inBlur inRise soft+ 5 more
Dropdowncm_animation

Pick one of the 13 options shown. Default: None.