comersDocs
Install guide
CM+ Builder

System & advanced

CM+ Builder

A free-form section you build from 38 CM+ blocks: headings, text, images, buttons, accordions, countdowns, coupons, product rails and more, in one to six columns.

13 settings38 block typessections/cm-builder.liquid
CM+ HeadingCM+ TextCM+ ImageCM+ ButtonCM+ SpacerCM+ Divider
Theme editorTemplateCM+ Builder1Click to open its settingsCM+ HeadingCM+ TextCM+ ImageCM+ ButtonCM+ SpacerAdd block2CM+ BuilderColumns on desktop1Drag the slider from 1 to 6. Default: 1.Columns on mobile1Drag the slider from 1 to 3. Default: 1.Gap between blocks16pxDrag the slider from 0 to 60px. Default: 16px.Vertical alignmentTopChoose one: Top, Middle, Bottom, Stretch. Default: Top.Width1320px0 runs edge to edge of the page.Theme editor · CM+ Builder, shown with the theme's default values

How to configure

  1. Add the section

    In the theme editor, click Add section and choose CM+ Builder. Then work down its settings from top to bottom.

Settings

Select CM+ Builder in the theme editor sidebar to find these.

Columns on desktop1
Slidercolumns

Drag the slider from 1 to 6. Default: 1.

Columns on mobile1
Slidercolumns_mobile

Drag the slider from 1 to 3. Default: 1.

Gap between blocks16px
Slidergap

Drag the slider from 0 to 60px. Default: 16px.

Vertical alignmentTopTopMiddleBottomStretch
Dropdownvalign

Pick one of the 4 options shown. Default: Top.

Width1320px
Slidermax_width

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

0 runs edge to edge of the page.

Space above24px
Sliderpad_top

Drag the slider from 0 to 120px. Default: 24px.

Space below24px
Sliderpad_bottom

Drag the slider from 0 to 120px. Default: 24px.

Space left and right16px
Sliderpad_x

Drag the slider from 0 to 80px. Default: 16px.

Background colourNot set
Colourbox_bg

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

Text colourNot set
Colourbox_text

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

Corner radius0px
Sliderbox_radius

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

Inner padding0px
Sliderbox_pad

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

Show border
Switchbox_border

A switch. Off by default.

Blocks

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

CM+ Headingcmb_heading3 settings
CM+ Textcmb_text1 setting
CM+ Imagecmb_image4 settings
CM+ Buttoncmb_button5 settings
CM+ Spacercmb_spacer2 settings
CM+ Dividercmb_divider3 settings
CM+ Badgescmb_badges6 settings
CM+ Icon listcmb_icon_list9 settings
CM+ Accordioncmb_accordion3 settings
CM+ Videocmb_video3 settings
CM+ Countdowncmb_countdown4 settings
CM+ Coupon codecmb_coupon4 settings
CM+ Bannercmb_banner8 settings
CM+ Scrolling textcmb_marquee2 settings
CM+ Payment iconscmb_payment_icons1 setting
CM+ Testimonialcmb_testimonial3 settings
CM+ Link chipscmb_menu_chips2 settings
CM+ Product railcmb_product_rail3 settings
CM+ WhatsApp buttoncmb_whatsapp3 settings
CM+ Notice boxcmb_notice3 settings
CM+ Details tablecmb_specs8 settings
CM+ Text columnscmb_columns6 settings
CM+ Social iconscmb_social1 setting
CM+ Email signupcmb_newsletter3 settings
CM+ Custom liquidcmb_liquid1 setting
CM+ SKUcmx_sku1 setting
CM+ Stock statuscmx_stock4 settings
CM+ Delivery estimatecmx_delivery3 settings
CM+ You savecmx_savings2 settings
CM+ Product tagscmx_tags3 settings
CM+ Product typecmx_type1 setting
CM+ Metafieldcmx_metafield3 settings
CM+ Star ratingcmx_rating1 setting
CM+ Highlightscmx_highlights2 settings
CM+ Free shipping barcmx_free_shipping4 settings
CM+ Collection bannercmx_collection_header4 settings
CM+ Collection textcmx_collection_text2 settings
CM+ Popular searchescmx_popular_searches2 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.