comersDocs
Install guide
CM Mobile tab bar

Header & footer

CM Mobile tab bar

Bottom navigation for mobile storefront browsing.

3 settings1 block typessections/mobile-tab-bar.liquid
Tab iconsLabelsActive state
Theme editorTemplateCM Mobile tab bar1Click to open its settingsCM Nav itemAdd block2CM Mobile tab barStyle presetBar — icons + text (default)Choose one: Bar — icons + text (default), Floating — icons + text, Icons only. Default: Bar — icons + text (default).Max items6Drag the slider from 3 to 8. Default: 6.Shop link collectionSelectClick Select and choose from your store.Theme editor · CM Mobile tab bar, shown with the theme's default values

How to configure

  1. Limit to 4–5 items

    Home, Shop, Search/Help, Bag is a clean set.

Settings

Select CM Mobile tab bar in the theme editor sidebar to find these.

Style presetBar — icons + text (default)Bar — icons + text (default)Floating — icons + textIcons only
Dropdownstyle

Pick one of the 3 options shown. Default: Bar — icons + text (default).

Max items6
Slidermax_items

Drag the slider from 3 to 8. Default: 6.

Shop link collectionSelect
Pickercollection

Click Select and choose from your store.

Blocks

Expand CM Mobile tab bar in the sidebar and click Add block to use these.

CM Nav itemitem5 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.

Shown conditionally in the theme editor.

Hide on mobile
Switchcm_hide_mobile

A switch. Off by default.

Shown conditionally in the theme editor.

Background colourNot set
Colourcm_bg

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

Shown conditionally in the theme editor.

Heading colourNot set
Colourcm_heading_color

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

Shown conditionally in the theme editor.

Text colourNot set
Colourcm_text_color

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

Shown conditionally in the theme editor.

Heading size100%
Slidercm_heading_size

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

Shown conditionally in the theme editor.

Text size100%
Slidercm_text_size

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

Shown conditionally in the theme editor.

AlignLeave as isLeave as isLeftCenterRight
Dropdowncm_align

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

Shown conditionally in the theme editor.

Button colourNot set
Colourcm_button_bg

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

Shown conditionally in the theme editor.

Button text colourNot set
Colourcm_button_text

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

Shown conditionally in the theme editor.

Button corner radius (px)Auto
Numbercm_button_radius

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

Shown conditionally in the theme editor.

Section width0px
Slidercm_max_width

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

0 leaves the width as is. Shown conditionally in the theme editor.

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. Shown conditionally in the theme editor.

Padding bottom (px)Auto
Numbercm_pad_bottom

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

Shown conditionally in the theme editor.

Corner radius (px)Auto
Numbercm_radius

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

Shown conditionally in the theme editor.

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.

Shown conditionally in the theme editor.