Change homepage preset
This guide describes how to replace your homepage with one of the alternate homepage layouts that ship with Ronin.
Besides the default homepage (index.json), Ronin includes four alternate homepage templates. Each one opens with a different hero section and uses a different mix of content sections.
| Template file | Opens with | Highlights |
|---|---|---|
page.home-2.json | Hero move | Collection index, Spec reveal sticky, Collection tabs, Combo product, Quote switcher (the Kinetic homepage) |
page.home-3.json | Hero slideshow | Collection carousel, Shop the look, Scroll story, Promo countdown, Hotspot, Lookbook depth, Testimonial depth (the Ecru homepage) |
page.home-4.json | Hero panels | Process (sticky), Product specs, Lookbook gallery, Video stack, Trust badges, Journal |
page.home-5.json | Hero split | Hotspot, Process (sticky), Quote switcher, Combo product, Spec reveal sticky, Photo shrink promo |
- 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.
guide-change-homepage-preset-2.webp
- 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).
guide-change-homepage-preset-3.webp
- 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).
guide-change-homepage-preset-5.webp
- Go back to Themes and select Customize. The Theme editor now opens with the new homepage, ready to edit.
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.
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 every hero variant.