Vellum theme docs

Model shopping flow

The model shopping flow lets a shopper choose a phone model once and carries that choice through discovery, collections, search, product pages, cart, and fit guidance.

How it works

1. The merchant turns on Theme settings > Model shopping > Enable iPhone model shopping.
2. The Model selector section stores the shopper choice in browser storage as vellum:selectedModel.
3. Collection, search, product, cart drawer, and menu surfaces read that value through model context scripts.
4. Product pages with a model/iPhone option ask for confirmation before selecting a remembered model.
5. Fit Guide and Find Your Model pages help shoppers identify their model before selecting products.

Primary files

• sections/model-selector.liquid and assets/model-selector.js.
• assets/model-context.js, assets/model-scope.js, and snippets/model-bar.liquid.
• sections/product.liquid, sections/collection.liquid, sections/search.liquid, and sections/fit-guide.liquid.
• skeleton-theme/docs/model-shopping-flow.md contains deeper developer notes.