Change homepage preset
This guide describes how to replace your homepage with one of the alternate homepage layouts that ship with Lotio.
Besides the default homepage (index.json), Lotio includes four alternate homepage templates. Each one starts with a different hero section and uses a different mix of content sections.
| Template file | Opens with | Highlights |
|---|---|---|
page.home-2.json | Hero banner | Feature rows, Product spotlight, Spec hotspots, Scroll flip scene, Brand orbit, Spec compare |
page.home-3.json | Hero parallax | About with stats, Category cards, Featured products tabs, Product stack, Editorial lookbook |
page.home-4.json | Hero spotlight | Quote collage, Notes pyramid, Headline image reveal, Video feature, Manifesto |
page.home-5.json | Hero split | Sticker grid, Tagline with images, Call to action card, Testimonial grid, Press marquee |
- On your store's Shopify admin page, from the left-side menu, select Sales channels > Online store > Themes.
- In the Current theme section, select the ... button, then select Edit code.
- In the code editor sidebar, open the templates folder and select the JSON file of the homepage you want (for example
page.home-2.json).
- Select all the content of that file and copy it.
- Open templates/index.json, select all of its content and paste to replace it, then save the file (Cmd + S on Mac, Ctrl + S on Windows, or the Save button in the top-right corner).
- Go back to Themes and select Customize. The Theme editor now opens with the new homepage, ready to edit.
caution
Replacing index.json discards the sections and settings of your current homepage. Duplicate the theme first, or copy the old index.json content somewhere safe, so you can restore it later.
tip
You do not have to use an alternate layout as a whole. Open the Theme editor, add the hero or content sections you like to your existing homepage, and reorder them by dragging. See the Hero sections page for the five hero variants.