comersDocs
Install guide
Set up the product page

Pages

Set up the product page

Arrange the product information blocks, size guide, purchase buttons and the sections below the fold.

20 min9 stepsFor merchants

Before you start

  • A product with images, a description and variants.
  • Shipping and return policies filled in at Settings → Policies.

What you will have

A product page with the information blocks in the order that suits your products.

  1. Open the product template

    Theme editorTemplate pickerProductsDefault product

    The preview loads one of your products. Use the product picker at the top to preview a different one.

    Default productTemplateCM Product information1Click to open its settingsTheme editor · Default product › CM Product information

  2. Open CM Product information

    This is the main section. Expand it to see its blocks. Each block is one piece of the product information column, and their order in the sidebar is their order on the page.

    Default productTemplateCM Product information1Click to open its settingsTheme editor · Default product › CM Product information

  3. Arrange the information blocks

    Drag blocks to reorder, click the eye icon to hide one, or use Add block to bring one back. Each of these can be added once.

    Default productTemplateCM Product information1Drag the handle to reorderTheme editor · Default product › CM Product information
    • Identity: CM Vendor, CM Title, CM Price, CM Shipping note.
    • Description: CM Short description, CM Full description.
    • Options: CM Variant picker, CM Size guide button, CM Quantity selector, CM Delivery pincode check.
    • Buying: CM Add to cart button, CM Buy now button, CM Accelerated checkout, CM Payment terms.
    • Reassurance: CM Video feedbacks, CM FAQ accordion, CM Pickup availability, CM Share links.
    • Special: CM Gift card recipient (shows on gift card products only), CM Custom Liquid, and app blocks from installed apps.

  4. Configure the size guide

    CM Product informationSize guide

    The size guide opens from the CM Size guide button block.

    Default productTemplateCM Product information1Click to open its settings2CM Product informationShow size guideMaster switch.HeadingSize guideSubheadingGeneral fit guide — garment measurements may vary by style.Text at the top of the guide.GenderAuto-detectAuto-detect, Men or Women.CategoryAuto-detect from variants/tagsAuto-detect from variants/tags, Topwear, Bottomwear or Footwear.Size systemUS + UKUS + UK, US only or UK only.Default unitsInchInch or Cm.Theme editor · Default product › CM Product information

    TipAuto-detect reads your product's variants and tags. If the wrong chart shows, set Gender and Category yourself.

  5. Set the purchase buttons

    Sticky purchase buttons on mobile keeps Add to cart visible at the bottom of the screen while shoppers scroll. The CM Buy now button block has a Show on desktop switch, and CM Accelerated checkout has a Show on mobile switch.

    Default productTemplateCM Product information1Click to open its settingsTheme editor · Default product › CM Product information

  6. Tune the built-in FAQ

    The CM FAQ accordion block has two switches: Show product details item, and Show shipping and return policy items. The policy items pull from your store policies.

    Default productTemplateCM Product information1Click to open its settingsTheme editor · Default product › CM Product information

  7. Set up the mobile tabs

    Phones show product information as tabs. Add CM Mobile information tab for the main details, and a CM Mobile accordion tab for each of Product details, Shipping policy, Return policy and Cancellation policy.

    Default productTemplateCM Product information1Click to open its settingsTheme editor · Default product › CM Product information

  8. Add sections below the product

    Default productAdd section

    The default template includes CM Before / after under the product. You can add more.

    Default productTemplateCM Product information1Click to open its settingsCM Product FAQCM Product promo bannerCM Trust tickerCM Featured productCM Featured collectionAdd blockAdd section1Click Add section2CM Product informationCM Product FAQQuestion and answer items for this product type.CM Product promo bannerA promotional strip.CM Trust tickerScrolling trust badges such as free returns.CM Featured productHighlight another product.CM Featured collectionA rail of related products from a collection you choose.Theme editor · Default product › CM Product information

  9. Check breadcrumbs

    Theme settingsComers design systemShow product breadcrumbs

    Breadcrumbs show the path back to the collection above the product title. Switch them off here if you prefer a cleaner page.

    Theme settingsComers design system1Click to open this group2Comers design systemShow product breadcrumbsA switch. On by default.Theme editor · Theme settings › Comers design system

Related

CM Product information reference Build your own design