Homepage

Open Customize and the homepage is what you see. Sections are added, removed and reordered in the left sidebar; the full list of what each one does is in Sections.

What ships in the preset

Hero, featured collection, collection list, provenance timeline, FAQ, newsletter. Delete anything you do not want — nothing depends on anything else.

Hero

The Hero is the theme’s signature section: a large image with hotspot pins a customer can select to inspect a detail, plus three spec pairs (label and value) beneath the copy.

It ships with sample content about heavy twill and brass fittings. Replace all of it, including the Specimen no. tag.

Three things worth knowing:

  • Pin positions are percentages of the image, set with sliders. They stay correct when the image is cropped by the viewport, which pixel positions would not.
  • The hero image is the page’s largest image, so it is loaded at high priority. Upload it at a sensible size — a 6000px photograph here is the single easiest way to make the homepage slow.
  • Alt text matters most here. It is the first thing a screen reader reaches.

If hotspots do not suit your products, the Image with text section is the plainer alternative.

Product grids

Two sections show products:

  • Featured collection — one collection, with a grid on desktop and a carousel on mobile by default.
  • Collection list — the collections themselves rather than products.

Both give you columns, gap, image ratio and hover behaviour. Image on hover → Second image swaps to the product’s second image on hover, which is worth setting up deliberately: it looks intentional when every product’s second image is the same kind of shot, and sloppy when it is a size chart on some and a detail on others.

Card gap 0 is the theme’s default look — cards butt against each other into a single catalogue plate. Increase it if you prefer separated cards.

Quick view and add-to-cart are off on these grids by default. See Cart.

Featured product puts one complete, buyable product on the homepage — full media gallery, variant picker, add to cart.

This is the right place for the product you most want people to buy, and the right place to show off a 3D model or a video, because the gallery here is the same one the product page uses.

Storytelling sections

  • Provenance timeline — numbered steps for a process or history.
  • Hotspot image — the hero’s pin mechanic as a standalone section.
  • Promo panel — a bordered panel for one offer or announcement.
  • FAQ — collapsible rows. Also the cheapest conversion work on most stores: answer shipping, returns and sizing here and your support inbox gets quieter.
  • Logo list — press or stockists.
  • Newsletter — signups go to Customers in your admin, tagged as accepting marketing.

Announcement bar

The Announcement bar sits above the header and rotates through messages. Set the rotation speed and whether it pauses on hover.

Two messages is persuasive; five is a slot machine. Rotation also means a customer may never see message four, so put anything essential first — or put it somewhere it cannot move.

Custom sections

  • Custom section — an empty section you fill with text, image, button and group blocks. Reach for this before editing code.
  • Custom Liquid — raw Liquid or HTML, for a snippet an app gave you. It is not validated: broken markup here breaks the page, and it is the first thing to remove when diagnosing a problem.

If you do end up editing theme files rather than using either of these, duplicate your theme first and edit the copy (Online Store → Themes → … → Duplicate). Edits to a live theme are public the moment you save, and they do not survive a theme update. See the FAQ.

Order matters more than settings

The sections above the fold decide whether anyone scrolls. A defensible default: hero, then a product grid, then one storytelling section, then FAQ, then newsletter. Selling one flagship product? Put Featured product second.

This site uses Just the Docs, a documentation theme for Jekyll.