# Sections and templates

> Stores are composed, not generated. The library is around a hundred components with more than 350 templates between them, every one mobile-safe and every one dressed by all eight design styles.

## The vocabulary

Three levels, from the merchant's point of view:

- **Section** — a group of components shown together in the editor's Add menu: Navigation, Product Info, Benefits & Value, Social Proof, Offers, Buttons, and so on.
- **Component** — one building block with several templates: a Hero, a Review Wall, an FAQ, a Buy Box, a Cross-sell Shelf.
- **Template** — one specific way of rendering that component. A Review Wall might be a grid, a photo rail or a single spotlight review. Templates differ in layout, content and animation; the *look* of a template under each design style comes from the style, not from the template.

So a store is a list of components, each with a chosen template, all rendered under one design style.

## What the library covers

- **Navigation** — headers with mega-menus built from the collection tree, footers, breadcrumbs, a designed 404 page.
- **Heroes and showcases** — the opening statement, in many shapes.
- **Product information** — buy boxes (with variants, quantity, subscriptions, expanding detail cards), spec sheets, ingredients, comparison tables, galleries with a lightbox.
- **Benefits and value** — feature grids, image-with-text, how-it-works staircases, results timelines, statistics, before/after (static or interactive reveal).
- **Social proof** — review walls, testimonials, avatar tabs, press and trust badges.
- **Offers** — bundle builders, cross-sell shelves, gift ladders, subscribe-and-save, free-shipping bars, urgency.
- **Catalogue** — collection grids, featured products, shop-by-category tiles, filters.
- **Interactive widgets** — finders, calculators, configurators, where a product warrants one.
- **Support** — FAQ accordions, contact and policy pages, newsletter capture.

## Why templates rather than free-form generation

A layout generated from scratch is unpredictable on a phone, inconsistent across pages and hard to edit. A template is tested, mobile-safe and editable, and it carries a part contract that every design style honours. Camel's job is to *choose well* — which components, which templates, in what order, populated with what — and that is where the persona and the product data go.

## Mobile

Templates are built mobile-first. Card rows that stack awkwardly on a phone collapse into a rail instead, in one of several authored modes (a still mosaic, a one-card pager, or a slow drift), and the merchant picks the mode in the Template tab.

## Motion

Sections reveal on scroll through one shared system, with a tempo set by the design style. A section that wants more (a word-by-word heading, a child cascade, a hero settle) declares it once, and the published theme carries the same motion.