Build your own
How sections and blocks work
The building blocks of every page: adding, reordering, hiding, duplicating and styling them.
What you will have
You can build or change any page in Comers without touching code.
Understand the hierarchy
A template is a page type. A template is a stack of sections. A section is a full-width strip, such as a hero or a product rail. A block is one item inside a section, such as a slide or a card.
Home pageHeaderCM HeaderTemplateCM HeroCM Shop by categoryCM Featured collectionAdd sectionFooterCM FooterTheme editor · Home page- Template → Home page
- Section → CM Shop by category
- Block → CM Category card (one per category)
Add a section
Theme editorTemplateAdd section
Click Add section, then pick from the list or type in the search box. Hover a section name to see a preview. It is added at the bottom of the template. Drag it where you want it.
Home pageHeaderCM HeaderTemplateCM HeroCM Shop by category1Drag the handle to reorderCM Featured collectionAdd section1Click Add sectionFooterCM FooterTheme editor · Home pageTipType “CM” in the search box to list every Comers section.
Add a block
SectionAdd block
Expand a section and click Add block. Only the block types that section supports are offered. Some blocks can be added once (for example CM Title on the product page), and some sections cap the total, such as 8 slides in CM Hero.
Home pageHeaderCM HeaderTemplateCM HeroCM Shop by categoryCM Featured collectionAdd sectionFooterCM FooterTheme editor · Home pageReorder by dragging
Hover a section or block in the sidebar and drag the six-dot handle up or down. Sections move within the Template group. Blocks move within their section.
Home pageHeaderCM HeaderTemplateCM HeroCM Shop by category1Drag the handle to reorderCM Featured collectionAdd sectionFooterCM FooterTheme editor · Home pageHide, duplicate or remove
Hover a section or block to see the eye icon, which hides it while keeping its content. Right-click, or open the ⋯ menu, to Duplicate or Remove it.
Home pageHeaderCM HeaderTemplateCM Hero1The eye icon hides itCM Shop by categoryCM Featured collectionAdd sectionFooterCM FooterTheme editor · Home pageTipPrefer hiding to removing. A hidden section keeps all its settings and images for later.
Style any section with CM customise
Almost every Comers section ends with a CM customise group. It gives the same set of controls everywhere, so you can restyle a section without code.
Home pageHeaderCM HeaderTemplateCM HeroCM Shop by categoryCM Featured collectionAdd sectionFooterCM Footer2Home pageHide on desktop / Hide on mobileDevice visibility.Background, Heading and Text colourNot setOverride the global colours for this section only.Heading size / Text sizeEmptyScale the text. 100 is the default size.AlignEmptyLeave as is, Left, Center or Right.Button colour, Button text colour, Button corner radiusNot setRestyle buttons in this section.Section width, Padding top, Padding bottom, Corner radiusEmptySize and spacing.Height / Vertical alignEmptyA fixed height for the section, and whether its content sits at the top, middle or bottom.Entrance animationEmptyNone, Fade up, Fade in, Scale in, Blur in, Letter reveal and more.Theme editor · Home pageStyle a single block
Blocks have a shorter CM customise group: Hide on desktop, Hide on mobile, Text colour, Background colour, Text size, Width, Align and Corner radius. Use it to make one card stand out.
Home pageHeaderCM HeaderTemplateCM Hero1The eye icon hides itCM Shop by categoryCM Featured collectionAdd sectionFooterCM FooterTheme editor · Home pageKnow which sections are shared
Some sections appear on every page because they belong to the theme layout rather than a template. Editing them once changes the whole store.
Home pageHeaderCM HeaderTemplateCM HeroCM Shop by categoryCM Featured collectionAdd sectionFooterCM FooterTheme editor · Home page- Header group: CM Header
- Footer group: CM Footer
- Always present: CM Mobile tab bar, CM Cart drawer, CM Newsletter popup, CM Assistant and CM Advanced control
Use app blocks
Apps from the Shopify App Store can add their own blocks. On the product page, open CM Product information → Add block → Apps to place reviews, wishlists or badges exactly where you want them.
Home pageHeaderCM HeaderTemplateCM HeroCM Shop by categoryCM Featured collectionAdd sectionFooterCM FooterTheme editor · Home page