Build your own
CM+ Builder: design a section from scratch
Build a free-form section from 38 CM+ blocks, in one to six columns, when no ready-made section fits.
Before you start
- You have read How sections and blocks work.
What you will have
A section that is entirely your own layout, built without code.
Add CM+ Builder
Theme editorAdd sectionCM+ Builder
CM+ Builder can be added to any page. It appears in the Add section list several times, once per starting layout, so you can begin from something close to what you want.
Home pageTemplateCM+ Builder1Pick this sectionTheme editor · Home page › CM+ Builder- Blank starts: CM+ Builder, CM+ Builder 2 columns, CM+ Builder 3 columns.
- Ready-made starts: CM+ Trust points, CM+ Offer and coupon, CM+ FAQ list, CM+ Promo banner, CM+ Product rail, CM+ Reviews row, CM+ Details and specs.
Set the columns
CM+ Builder
Blocks flow into columns from left to right, then wrap onto the next row.
Home pageTemplateCM+ Builder1Click to open its settings2CM+ BuilderColumns on desktop11 to 6 columns.Columns on mobile11 to 3 columns.Gap between blocks16pxSpace between blocks, in both directions.Vertical alignmentTopTop, Middle, Bottom or Stretch, for blocks of different heights in one row.Theme editor · Home page › CM+ BuilderSet the size and spacing
CM+ Builder
Control how wide the section is and how much room it has around it.
Home pageTemplateCM+ Builder1Click to open its settings2CM+ BuilderWidth1320pxMaximum width of the section.Space above24pxPadding above the blocks.Space below24pxPadding below the blocks.Space left and right16pxSide padding, useful on phones.Theme editor · Home page › CM+ BuilderStyle the box
CM+ Builder
Turn the section into a coloured card, or leave these empty for a plain section.
Home pageTemplateCM+ Builder1Click to open its settings2CM+ BuilderBackground colourNot setFills the box behind the blocks.Text colourNot setText colour for everything inside.Corner radius0pxRounds the corners of the box.Inner padding0pxSpace between the box edge and the blocks.Show borderA thin outline around the box.Theme editor · Home page › CM+ BuilderAdd your first block
CM+ BuilderAdd blockCM+ Heading
Each CM+ block is one piece of content. Add as many as you need and drag them into order.
Home pageTemplateCM+ BuilderCM+ Heading1Click Add block and pick thisAdd block2CM+ HeadingHeadingHeadingThe heading text.HTML tagH2H1 to H6. Use one H1 per page and H2 for section titles.SizeLargeHow large the heading looks, independent of its tag.Theme editor · Home page › CM+ Builder › CM+ HeadingPick from 38 block types
The blocks fall into a few families.
Home pageTemplateCM+ Builder1Click to open its settingsTheme editor · Home page › CM+ Builder- Content: CM+ Heading, CM+ Text, CM+ Image, CM+ Video, CM+ Button, CM+ Text columns, CM+ Details table.
- Layout: CM+ Spacer, CM+ Divider, CM+ Banner, CM+ Notice box.
- Selling: CM+ Product rail, CM+ Coupon code, CM+ Countdown, CM+ Free shipping bar, CM+ Payment icons.
- Trust: CM+ Testimonial, CM+ Star rating, CM+ Badges, CM+ Icon list, CM+ Highlights.
- Engagement: CM+ Accordion, CM+ Email signup, CM+ Social icons, CM+ WhatsApp button, CM+ Link chips, CM+ Scrolling text.
- Advanced: CM+ Custom liquid, CM+ Metafield.
Use CM+ blocks inside other pages
CM+ blocks are also available under Add block in the product, collection, cart, search, page, blog and article sections, so you can add a banner or notice without a separate section.
Home pageTemplateCM+ Builder1Click to open its settingsTheme editor · Home page › CM+ Builder- Product page extras: CM+ SKU, CM+ Stock status, CM+ Delivery estimate, CM+ You save, CM+ Product tags, CM+ Product type, CM+ Metafield, CM+ Star rating, CM+ Highlights.
- Collection page extras: CM+ Collection banner and CM+ Collection text.
TipEvery CM+ block also has the shared CM customise controls, so you can hide one on mobile or change its colours.