comersDocs
Install guide
Build your own design

Build your own

Build your own design

Create custom templates, combine sections into your own layouts, and add custom code where you need it.

25 min10 stepsFor merchants & designers

Before you start

  • You have read How sections and blocks work.
  • A rough sketch of the page: what comes first, second and third.

What you will have

A page layout that is entirely yours, built from Comers sections and saved as a reusable template.

  1. Plan the page as a stack

    Write the page as a short list from top to bottom. One idea per section keeps the page easy to scan.

    Home pageHeaderCM HeaderTemplateCM HeroCM Shop by categoryCM Featured collectionAdd sectionFooterCM FooterTheme editor · Home page
    • Hook: a hero or story panel
    • Proof: logos, stats or a ticker
    • Products: a collection rail or tabs
    • Detail: editorial or feature grid
    • Answers: FAQ
    • Action: newsletter or a final banner

  2. Create a new template

    Theme editorTemplate pickerPagesCreate template

    Name it, for example “landing”, and choose which existing template to copy from. A new template starts as a copy, so you can change it freely without affecting other pages.

    Default pageHeaderCM HeaderTemplateCM PageAdd sectionFooterCM FooterTheme editor · Default page

    TipThe same works for Products and Collections. Create a “product-premium” template to give special products their own layout.

  3. Assign the template

    Shopify adminOnline StorePagesYour pageTheme template

    Open the page, product or collection in your admin and choose your new template in the Theme template dropdown. Save. Only items assigned to the template use the new layout.

    Shopify admin1Online Store2Pages3Your page4Theme templateShopify admin · click these in order

    ImportantA new template only appears in the dropdown after the theme containing it is published. On an unpublished theme, preview it from the theme editor instead.

  4. Recipe: a campaign landing page

    A proven order for a launch or sale page.

    Home pageTemplateCM HeroCM Tagline tickerCM Featured collectionCM Editorial splitCM FAQ accordionCM Newsletter1Add these sections in this orderAdd sectionTheme editor · Home page
    • CM Hero, set to Static (single media, no slider) with one strong image and button
    • CM Tagline ticker with three short benefits
    • CM Featured collection pointing at the campaign collection
    • CM Editorial split with stat blocks
    • CM FAQ accordion
    • CM Newsletter

  5. Recipe: an about / brand story page

    A calm, editorial order for telling your story.

    Home pageTemplateCM Story panelCM Rich textCM ImageCM Logo marqueeCM Mosaic featuresCM Contact form1Add these sections in this orderAdd sectionTheme editor · Home page
    • CM Story panel with your founder image
    • CM Rich text for the opening statement
    • CM Image with text, repeated two or three times with alternating content
    • CM Logo marquee for press and partners
    • CM Mosaic features for your values
    • CM Contact form

  6. Recipe: a lookbook

    An image-led page that sells outfits rather than single items.

    Home pageTemplateCM HeroCM Shop the lookCM Spotlight media gridCM Before / afterCM Product tabs rail1Add these sections in this orderAdd sectionTheme editor · Home page
    • CM Hero set to Full-bleed image/video + overlays
    • CM Shop the look, up to 6 cards
    • CM Spotlight media grid
    • CM Before / after
    • CM Product tabs rail

  7. Make each section look different

    The same section can look completely different with the CM customise group. Change the Background colour, Align, Padding top and bottom, Corner radius and Entrance animation on each one to create rhythm down the page.

    Home pageHeaderCM HeaderTemplateCM HeroCM Shop by categoryCM Featured collectionAdd sectionFooterCM FooterTheme editor · Home page

    TipAlternate a light and a tinted background from section to section. It separates content without adding lines or boxes.

  8. Add your own HTML or Liquid

    Add sectionCM Custom Liquid

    When no section fits, CM Custom Liquid accepts HTML, Liquid and embed codes: a video embed, a booking widget, a size chart table or a third-party form. It can be added to any template.

    Home pageTemplateCM Custom Liquid1Pick this sectionTheme editor · Home page › CM Custom Liquid
    <div class="page-width">
  <h2>{{ shop.name }} size chart</h2>
  <p>Free returns within 30 days.</p>
</div>

  9. Add custom CSS

    Theme settingsComers design systemCustom CSS

    For styling that the settings do not cover, add CSS here. It loads on every page. For one-off changes without writing CSS, use CM Advanced control instead.

    Theme settingsComers design system1Click to open this group2Comers design systemCustom CSSEmptyType your text. Empty by default.Theme editor · Theme settings › Comers design system
    .product-card__title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

  10. Save, preview and reuse

    Save, then check the page on desktop and mobile preview. Your template is now available for any other page, product or collection, so the design can be reused in a few clicks.

    Home pageHeaderCM HeaderTemplateCM HeroCM Shop by categoryCM Featured collectionAdd sectionFooterCM FooterTheme editor · Home page

Related

Advanced control Browse all sections