comersDocs
Install guide
Theme architecture

For developers

Theme architecture

How the theme is put together: the layout, templates, design system and the order assets load in. Useful before editing theme code.

comerslayouttemplatessectionssnippetsassetsconfiglocales{% sections 'header-group' %} <main> {{ content_for_layout }} </main> {% sections 'footer-group' %} {% section 'mobile-tab-bar' %} {% section 'cart-drawer' %}layout/theme.liquid · how the layout file assembles each page
01

Layout

  • layout/theme.liquid
  • header-group
  • footer-group
  • cart-drawer
  • mobile-tab-bar
  • global modals
02

Templates

  • index.json → homepage stack
  • product.json → main-product + rails
  • collection.json / search.json / cart.json
  • customers/* account templates
03

Design system

  • snippets/css-variables.liquid
  • Theme settings: colors, fonts, Comers DS
  • comers-ui.css + mobile/desktop layers
  • Light/dark via data-theme
04

Key behaviors

  • Sticky ATC — CSS fixed bottom (comers-sticky-atc.js hides when cart open)
  • Cart drawer — full-bleed mobile, Pay Securely when open
  • Size guide — comers-size-guide.js
  • Support modals — contact + help center
  • Predictive search — predictive-search.js

Asset load order

Files load in this order from layout/theme.liquid. Later stylesheets override earlier ones.

CSS

  1. base.css
  2. theme.css
  3. comers-ui.css
  4. comers-fixes.css
  5. comers-mobile.css
  6. comers-mobile-v3.css
  7. comers-mobile-v5.css
  8. comers-mobile-v6.css
  9. comers-desktop.css
  10. comers-home.css
  11. comers-v7-fixes.css
  12. buy-buttons.css
  13. cm-builder.css

JavaScript

  1. theme.js
  2. cart.js
  3. predictive-search.js
  4. comers-ui.js
  5. comers-size-guide.js
  6. comers-fixes.js
  7. comers-mobile.js
  8. comers-support.js
  9. cm-builder.js
  10. comers-v7-fixes.js
  11. comers-mobile-v5.js
  12. buy-buttons.js