Homepage and sections

The homepage is a JSON template, so its whole layout is editable in the theme editor. Sections can be reordered, hidden and configured without a developer.

Rearrange the homepage

1. Open Shopify Admin, then Online Store, then Themes.
2. Click Customize on the live theme. It opens on the home page.
3. Drag sections in the left sidebar to reorder them.
4. Click the eye icon on a section to hide it without deleting it.
5. Save.

Hide a section rather than delete it. A deleted section loses all of its settings, and rebuilding a carousel's product list is slow work.

Sections on the homepage

The live homepage shows sections in roughly this order. Names below are the labels shown in the theme editor.

Two of these do not render visible content where they sit in the list. Need Help Popup places the popup, and Sticky Categories Bar renders a bar pinned to the viewport. Moving them in the sidebar changes nothing visible, so leave them at the bottom.

Unlock Free Bonus takes its thresholds and copy from Theme settings rather than from its own section settings. Edit it through Cart rewards and free gifts.

Edit a product carousel

Most carousels take a collection and a product count.

1. Select the carousel section in the theme editor.
2. Set its source collection.
3. Set how many products to show.
4. Save.

To change which products appear, reorder the collection in Shopify Admin rather than adding per-section product pickers. The carousel reads the collection order.

Add a section to another page

1. In the theme editor, use the page selector at the top to open the page you want.
2. Click Add section.
3. Pick the section from the list.

Not every section can go on every page. A section only appears in the Add section list for the templates it supports, so homepage sections that read homepage-only data do not appear in that list on other pages.

Business rules

Some sections load their own JavaScript and CSS only when they render. Adding a carousel to a page adds its bundle to that page's load, and removing the last one removes it again. This is deliberate, and it is why the homepage loads more code than a blog article.

MediSpa pages use their own layouts and their own set of sections. Do not expect a homepage section to behave the same way inside a MediSpa landing page.

Verify the change

1. Open the storefront in a private window.
2. Check the section order matches the sidebar.
3. Check the page at mobile width. Several carousels change their item count and layout below the desktop breakpoint.
4. Scroll to the bottom to confirm the sticky category bar still behaves.

Developer map