Page Templates
Lotio ships 23 page templates (JSON) plus a gift card template. A template defines which sections a page starts with and in what order. You can edit any template in the theme editor, and you can create further variants of your own from the same starting points.
Homepage templates
Lotio comes with five complete homepages. Index is the default homepage; the four Home templates are alternate homepages that you can copy onto the index page or assign to any page. Each one is a full story built from hero, product, editorial, and media sections.
| Template | Sections included |
|---|---|
Index (default) — index.json | Hero, Shop categories, Featured products, Before and after, Bundle builder, Hotspot, Lookbook, Manifesto, Journal, Press marquee, Press reviews, Social video, Subscribe |
Home 2 — page.home-2.json | Hero banner, Feature rows, Promise grid, Product spotlight, Featured products, Ethos, Video feature, Spec hotspots, Designer quote, Scroll flip scene, Manifesto marquee, Brand orbit, Spec compare, Subscribe |
Home 3 — page.home-3.json | Hero parallax, About with stats, Tagline with images, Category cards, Featured products tabs, Call to action card, Headline image reveal, Product stack, Editorial lookbook, Testimonial grid, Journal |
Home 4 — page.home-4.json | Hero spotlight, Quote collage, Product stack, Notes pyramid, Headline image reveal, Editorial lookbook, Video feature, Manifesto, Journal, Press marquee, Subscribe |
Home 5 — page.home-5.json | Hero split, Sticker grid, About with stats, Tagline with images, Category cards, Featured products tabs, Call to action card, Headline image reveal, Editorial lookbook, Testimonial grid, Journal, Press marquee, Subscribe |
To switch your store to one of the alternate homepages, follow Change the homepage preset.
Product templates
Lotio includes four product page layouts. The default template uses the Product information section, while the three alternates each use their own product section so that the gallery and buy box are arranged differently.
| Template | Product section | Sections included |
|---|---|---|
Product (default) — product.json | Product information | Product information, Feature rows, Image callout, Highlight grid, FAQ accordion, Product recommendations, Subscribe |
Product backdrop — product.backdrop.json | Product backdrop | Product backdrop, Feature rows, Marquee showcase, Spec stats, Spec sweep, Kit scene, Press quotes, Product recommendations, Subscribe |
Product carousel vertical — product.carousel-vertical.json | Product carousel vertical | Product carousel vertical, Composition notes, Feature pillars, Spec sweep, Featured products, Press reviews, Product recommendations |
Product gallery wall — product.gallery-wall.json | Product gallery wall | Product gallery wall, Promise tiles, Feature banner, Category cards, Social video, Image pair, Testimonial grid, FAQ accordion, Product recommendations |
The three alternate product sections only appear on product templates. See Product page layouts for what each one looks like, and Change the product template for assigning them.
Collection templates
All three collection templates use the Main collection section with a Collection page title above it. They differ in where the filters sit, which is set by the Filter type setting of Main collection.
| Template | Filter type | Description |
|---|---|---|
Collection (default) — collection.json | Horizontal | Filters run in a bar above the product grid. Also includes Collection cards for browsing sibling collections and an Editorial banner block inside the grid. |
Collection drawer — collection.drawer.json | Drawer | Filters open in a side drawer from a Filter button, leaving the full width for products. |
Collection sidebar — collection.sidebar.json | Vertical | Filters sit in a column beside the product grid, always visible on desktop. |
Whichever type you pick, the filter layout is optimized automatically for mobile screens. To switch templates, follow Change the collection template.
Blog and article templates
| Template | Sections included |
|---|---|
Blog — blog.json | Blog header, Main blogs, Subscribe |
Article — article.json | Main article, Article related, Subscribe |
The blog listing uses the Main blogs section, and each post uses the Main article section with Article related beneath it to suggest more reading.
Page templates
| Template | Sections included | Best for |
|---|---|---|
Page (default) — page.json | Main page | Any standard page: policies, shipping information, general content |
About — page.about.json | Page hero, Founder letter, About values, Press reviews, Subscribe | Brand story pages |
Contact — page.contact.json | Contact | A contact form with store details |
Recently viewed — page.recently-viewed.json | Recently viewed | A page that lists the products the visitor has looked at |
Assign these from the page's Theme template dropdown in Online Store > Pages.
Utility templates
| Template | Sections included | Description |
|---|---|---|
Cart — cart.json | Main cart | The full cart page |
Search — search.json | Search, Main search, Journal, Search related | Search page with results, recent articles, and related links |
List collections — list-collections.json | Banner with text, Collections | The /collections page listing every collection |
404 — 404.json | Main 404 | Page not found |
Password — password.json | Main password | The storefront password page shown while the store is locked; the password layout adds the Password footer beneath it |
Gift card — gift_card.liquid | — | A Liquid template that renders the gift card with its code and QR code |
Customer account templates
Lotio 1.0.0 does not ship customer account templates; the templates/customers folder is empty. Login, registration, order history, and address pages are served by Shopify's new customer accounts, which you manage in Settings > Customer accounts. Those pages use Shopify's own layout and branding settings rather than theme sections.
Main page sections
Each template is anchored by a main section that renders the page's core content. These sections have no presets and cannot be added to other pages; they come with their template.
| Section | Template | What it renders |
|---|---|---|
| Product information | Product | Gallery, title, price, variant picker, buy button, and the product blocks |
| Main collection | Collection, Collection drawer, Collection sidebar | Product grid, filters, sorting, and pagination |
| Main cart | Cart | Line items, cart attributes, notes, and checkout |
| Main article | Article | Heading, featured image, content, share links, and comments |
| Main blogs | Blog | The article listing for a blog |
| Main page | Page | Page title and rich text content |
| Collections | List collections | The grid of all collections |
| Search | Search | The search form and header |
| Main search | Search | Search results for products, articles, and pages |
| Main 404 | 404 | The error code, not found message, and a button back into the store |
| Main password | Password | The password form and store message; Password footer is its companion, rendered by the password layout beneath it |
How to assign a template
Templates are assigned per resource in the Shopify admin, not in the theme editor.
- In your Shopify admin, open the resource you want to change, for example Products > [product], Products > Collections > [collection], or Online Store > Pages > [page].
- Scroll to the Theme template card in the right-hand column (on some pages it is titled Online store).
- Open the dropdown and choose the template, for example backdrop for a product or drawer for a collection.
- Click Save. The page now renders with the sections of that template.
To create a new template variant, open the theme editor, pick the page type from the top dropdown, and click Create template. Base it on the existing template that is closest to what you want, then adjust its sections.