Documentation

MODO Theme Documentation

MODO is a guided-shopping theme for fashion, D2C, and lifestyle brands. Instead of the usual Hero → Categories → Products → Newsletter homepage, MODO is built around guided product discovery — helping shoppers find what they want faster.

On this page

Homepage sections

All sections below are optional, reorderable, and fully editable from the Theme Editor (Online Store > Themes > Customize) — no code required to add, remove, or reorder them.

Shop by Moment

Lets customers shop by occasion (Date Night, Work, Weekend, Vacation, etc.) instead of by category. Add or edit tiles as blocks inside the section.

The Edit

Editorial merchandising: pairs a styled photo and headline with a curated, shoppable product rail. Point it at a collection or hand-pick products as blocks.

Shop the Look

Clickable hotspots on a lifestyle photo, each linked to a real product. Click a dot on the storefront to reveal the product's image, price, and an add-to-cart button inline.

Complete the Look

Cross-sells coordinated products on the product page with a single "add all" action.

Stories

Editorial content pulled from a Shopify blog, or authored directly as blocks.

Drop

A launch presentation with an honest countdown (no fake urgency) for new collection releases.

Community gallery

A shoppable, UGC-style photo grid; each photo can optionally link to a product.

Setting up Size Guide (one-time setup)

Size Guide is the one feature that uses Shopify metaobjects, so it needs a short one-time setup in your store's Admin before it will appear on product pages:

Go to Settings > Custom data > Metaobjects in Shopify Admin and create a new definition named Size guide (handle: size_guide) with these fields:

title — single line text
content — rich text (your measurement table)
notes — rich text (optional)

Create a metafield on Products named Size guide, namespace/key modo.size_guide, type Metaobject reference, pointing at the size_guide definition you just created.

Create one Size Guide entry with your measurements, then assign it to any product via that metafield. A "Size guide" link will automatically appear next to the Size selector on that product's page — no further setup needed.

Theme settings

Everything below is configurable from Theme Settings in the Theme Editor, store-wide (no code):

Logo and favicon
Three reusable color schemes, assignable per section
Heading and body fonts, with size scale
Page width and section/grid spacing
Button radius, border weight, and text case
Image corner radius
Global motion setting: None / Subtle / Standard (always respects visitors' reduced-motion preference regardless of this setting)
Product card behavior: hover image swap, color swatches, quick add, wishlist icon, sale/new/low-stock badges
Cart type (drawer or full page) and order note field
Predictive search toggles (price, collections, articles)
Social links

Performance and accessibility

All images are served with responsive srcset/sizes and lazy-load, except the first hero/gallery image.
No animation is required to understand or operate any control, and all motion respects visitors' reduced-motion OS setting.
Every icon-only button has a visible focus label; all modals (cart, search, quick add, size guide, mobile menu) trap focus and close on Escape.
Collection filtering, sorting, and pagination work with JavaScript fully disabled (standard page reload), and are progressively enhanced into a faster AJAX experience when JavaScript is available.
Inventory badges ("New", "Low stock") are computed from real store data — there is no fake scarcity, fake review counts, or fake visitor-counter anywhere in the theme, and every badge can be turned off in Theme Settings.

Getting help

Can't find what you need here? Contact support and we'll help you out.

Homepage sections

All sections below are optional, reorderable, and fully editable from the Theme Editor (Online Store > Themes > Customize) — no code required to add, remove, or reorder them.

Shop by Moment

Lets customers shop by occasion (Date Night, Work, Weekend, Vacation, etc.) instead of by category. Add or edit tiles as blocks inside the section.

The Edit

Editorial merchandising: pairs a styled photo and headline with a curated, shoppable product rail. Point it at a collection or hand-pick products as blocks.

Shop the Look

Clickable hotspots on a lifestyle photo, each linked to a real product. Click a dot on the storefront to reveal the product's image, price, and an add-to-cart button inline.

Complete the Look

Cross-sells coordinated products on the product page with a single "add all" action.

Stories

Editorial content pulled from a Shopify blog, or authored directly as blocks.

Drop

A launch presentation with an honest countdown (no fake urgency) for new collection releases.

Community gallery

A shoppable, UGC-style photo grid; each photo can optionally link to a product.

Setting up Size Guide (one-time setup)

Size Guide is the one feature that uses Shopify metaobjects, so it needs a short one-time setup in your store's Admin before it will appear on product pages:

Go to Settings > Custom data > Metaobjects in Shopify Admin and create a new definition named Size guide (handle: size_guide) with these fields:

title — single line text
content — rich text (your measurement table)
notes — rich text (optional)

Create a metafield on Products named Size guide, namespace/key modo.size_guide, type Metaobject reference, pointing at the size_guide definition you just created.

Theme settings

Everything below is configurable from Theme Settings in the Theme Editor, store-wide (no code):

Logo and favicon

Three reusable color schemes, assignable per section

Heading and body fonts, with size scale

Page width and section/grid spacing

Button radius, border weight, and text case

Image corner radius

Global motion setting: None / Subtle / Standard (always respects visitors' reduced-motion preference regardless of this setting)

Product card behavior: hover image swap, color swatches, quick add, wishlist icon, sale/new/low-stock badges

Cart type (drawer or full page) and order note field

Predictive search toggles (price, collections, articles)

Social links

Performance and accessibility

All images are served with responsive srcset/sizes and lazy-load, except the first hero/gallery image.

No animation is required to understand or operate any control, and all motion respects visitors' reduced-motion OS setting.

Every icon-only button has a visible focus label; all modals (cart, search, quick add, size guide, mobile menu) trap focus and close on Escape.

Collection filtering, sorting, and pagination work with JavaScript fully disabled (standard page reload), and are progressively enhanced into a faster AJAX experience when JavaScript is available.

Inventory badges ("New", "Low stock") are computed from real store data — there is no fake scarcity, fake review counts, or fake visitor-counter anywhere in the theme, and every badge can be turned off in Theme Settings.