comersDocs
Install guide
Advanced control: restyle without code

Build your own

Advanced control: restyle without code

Use CM Advanced control to target parts of the store with style rules, text replacements and code snippets.

12 min9 stepsFor designers & developers

What you will have

Store-wide design tweaks made from the editor, with no theme files edited.

  1. Open CM Advanced control

    Theme editorCM Advanced control

    This section is part of the theme layout, so it is in the sidebar on every page. It shows nothing by itself. It applies the rules you add as blocks. Make sure Enable Advanced Comers control is on.

    Home pageTemplateCM Advanced control1Click to open its settingsTheme editor · Home page › CM Advanced control

  2. Reveal homepage sections on scroll

    Reveal homepage sections on scroll fades sections in as visitors scroll down. Choose the Reveal style: Fade up, Fade in, Scale in or Blur in. Switch it off for an instant, static page.

    Home pageTemplateCM Advanced control1Click to open its settingsTheme editor · Home page › CM Advanced control

  3. Add a style rule

    CM Advanced controlAdd blockCM Style rule

    A style rule picks a target and changes how it looks. Start with Target.

    Home pageTemplateCM Advanced controlCM Style rule1Click Add block and pick thisAdd blockTheme editor · Home page › CM Advanced control › CM Style rule
    • Structure: Header, Footer, Every section, Announcement bar, Mega menu, Bag drawer.
    • Text: Section headings, All headings, Paragraph text, Buttons.
    • Products: Product cards, Collection product cards, Product page info, Product title, Images.
    • Homepage: Hero, Hero text, Tagline ticker, Hover image cards, Showcase panel, New arrivals.

  4. Limit the rule to a device or page

    Device restricts the rule to Desktop and mobile, Desktop only or Mobile only. Page restricts it to All pages, Homepage, Product pages, Collection pages, Cart page, Search page or Standard pages.

    Home pageTemplateCM Advanced control1Click to open its settingsTheme editor · Home page › CM Advanced control

    TipExample: Target = Buttons, Device = Mobile only, Corner radius = 999 gives fully rounded buttons on phones only.

  5. Choose what the rule changes

    Each style rule can change several things at once.

    Home pageTemplateCM Advanced control1Click to open its settings2CM Advanced controlAnimation preset, time and delayEmptyHow the target enters. Stagger plays matching elements one after another.AlignLeave as isLeft, Center or Right.Space above / Space below / Distance between itemsEmptySpacing in pixels.Corner radius (px)AutoRounding in pixels. Clip the contents keeps images inside the rounded corners.Change fontFontAa ChangeText size100%A different font and size for just this target.Theme editor · Home page › CM Advanced control

  6. Target something specific

    Custom CSS selector lets a developer target any element that is not in the Target list. When it is filled in, it is used instead of Target.

    .footer .newsletter-form button

  7. Replace text across the store

    CM Advanced controlAdd blockCM Text replace

    Change wording without editing language files. Enter Find text and Replace with, then choose Where (Buttons and links, Headings, or Any text on the store) and Match (Whole text only, or Anywhere inside the text).

    Home pageTemplateCM Advanced controlCM Text replace1Click Add block and pick thisAdd blockTheme editor · Home page › CM Advanced control › CM Text replace

    TipExample: Find “Add to cart”, Replace with “Add to bag”, Where = Buttons and links.

  8. Add a code snippet

    CM Advanced controlAdd blockCM Code snippet

    Paste tracking pixels, chat widgets or other snippets into Code, or point Link to a file at a hosted script. Use Page to load it only where it is needed.

    Home pageTemplateCM Advanced controlCM Code snippet1Click Add block and pick thisAdd blockTheme editor · Home page › CM Advanced control › CM Code snippet

    ImportantOnly paste code from providers you trust. A broken script can affect every page it loads on.

  9. Use the store-wide shortcuts

    Theme settingsComers design systemAdvanced Comers control (whole store)

    For the most common changes there are one-click global settings: Animate all section headings, Animate all product cards, Align all section headings, Corner radius on all buttons, and Corner radius on all cards and images. A three-row Text replacer and a Custom CSS box sit just below.

    Theme settingsComers design system1Click to open this group2Comers design systemAdvanced Comers controlEmptyType your text. Empty by default.Theme editor · Theme settings › Comers design system

Related

CM Advanced control reference Build your own design