comersDocs
Install guide
Mobile navigation & tab bar

Header & footer

Mobile navigation & tab bar

Set up the bottom tab bar, mobile hero slider and the pop-ups that appear on phones.

10 min7 stepsFor merchants

What you will have

An app-like mobile experience with the right shortcuts in the bottom bar.

  1. Switch the tab bar on

    Theme settingsLayoutShow mobile tab bar

    This master switch shows or hides the bottom navigation on phones across the whole store.

    Theme settingsLayout1Click to open this group2LayoutShow mobile tab barA switch. On by default.Theme editor · Theme settings › Layout

  2. Open the tab bar section

    Theme editorCM Mobile tab bar

    Switch the editor to mobile preview. CM Mobile tab bar appears in the sidebar on every page because it is part of the theme layout.

    Home pageTemplateCM Mobile tab bar1Click to open its settingsTheme editor · Home page › CM Mobile tab bar

  3. Choose a style

    Style preset changes the look of the bar.

    Home pageTemplateCM Mobile tab bar1Click to open its settings2CM Mobile tab barStyle presetBar — icons + text (default)Bar — icons + text (default)Floating — icons + textIcons onlyBar — icons + text: A full-width bar with labels. The default.Floating — icons + text: A floating rounded bar with labels.Icons only: A compact bar without labels.Max items6The most items the bar will show. Default 6.Shop link collectionSelectThe collection the Shop item opens.Theme editor · Home page › CM Mobile tab bar

  4. Add and order the tab items

    CM Mobile tab barAdd blockCM Nav item

    Each block is one tab. Drag blocks to reorder them.

    Home pageTemplateCM Mobile tab barCM Nav item1Click Add block and pick thisAdd block2CM Nav itemTypeHomeHome, Shop, Chat, Cart, Account or Custom link.LabelHomeThe text under the icon.LinkPaste a link or searchUsed when Type is Custom link.IconHomeHome, Shop, Chat, Cart, Account, Search, Wishlist or Tag.Custom icon image (overrides SVG)Select imageUpload your own icon. It replaces the built-in one.Theme editor · Home page › CM Mobile tab bar › CM Nav item

    TipFour or five items is the sweet spot. More than that makes each tap target small.

  5. Build the mobile hero slider

    Home pageCM Mobile hero sliderAdd blockCM Slide

    This slider shows on phones only. Each slide has an Image, Fallback color, Eyebrow, Heading, Button and Button link. Outer padding (px) controls the space around the slider.

    Home pageTemplateCM Mobile hero sliderCM Slide1Click Add block and pick thisAdd block2CM SlideAutoplayMoves to the next slide automatically.Change slide every5sSeconds between slides when Autoplay is on.Show dotsThe small dots that show which slide is active.Slide height0pxA fixed height for the slides. 0 keeps the automatic height.Outer padding (px)5Space around the slider.Theme editor · Home page › CM Mobile hero slider › CM Slide

  6. Use mobile-only content blocks

    Several sections accept a CM Mobile media and text block, including the footer, collection page, search page, product page and cart. Use it to add a phone-only banner or note without changing the desktop layout.

    Home pageTemplateCM Mobile tab bar1Click to open its settingsTheme editor · Home page › CM Mobile tab bar

  7. Hide anything on one device

    Almost every Comers section and block has Hide on desktop and Hide on mobile in its CM customise group. Use these to show different content to phone and desktop visitors.

    Home pageTemplateCM Mobile tab bar1The eye icon hides itTheme editor · Home page › CM Mobile tab bar

Related

CM Mobile tab bar reference Customise the header