Home page
What the default home page contains, how to fill it in, and which sections to add for other kinds of home page.
The home page is the one template where every section is optional. Techno's default home page, the one the Techno preset installs, is a four-section sequence that moves a shopper from a headline to a buying decision. The Flagship and Datasheet presets install home pages of their own: see Presets.
The default home page
| Order | Section | Job |
|---|---|---|
| 1 | Hero | Headline, buttons, up to four stats, and an optional featured product panel |
| 2 | Featured collection | A row of product cards, titled "Top of stack" |
| 3 | Kits | Prebuilt bundles, each with its own add-to-cart button |
| 4 | Newsletter | An email sign-up for restock notices |
The header and footer appear on the home page as on every other page.
On a new store, the Featured collection shows products from the collection of all your products that every Shopify store has, at /collections/all, and stays hidden until the store has products. Each Kit shows an example card, with no add-to-cart button, until you choose its product. The Hero has no featured product panel until you choose a product, and no stats until you add Stat blocks.
Fill it in
- Hero. Replace "Eyebrow", "Heading" and "Body". Set "Primary button label" and "Primary button link". Add Stat blocks for up to four short facts about your store, if you want a stats row. Pick a "Product" for the featured unit panel, or leave it empty for a text-only hero.
- Featured collection. It starts on all your products. Choose a "Collection" to show a narrower set, and set "Products to show".
- Kits. For each Kit block, choose a "Product" that represents the bundle, then set "Tier", "Tagline" and "Kit contents".
- Newsletter. Set "Heading" and "Body" to tell subscribers what they'll receive.
Other sections for the home page
| To add… | Use |
|---|---|
| Several promotions or launches in one rotating banner, in place of the Hero | Slideshow |
| A single buyable product with gallery and variant picker | Featured product |
| A photo beside text | Image with text |
| Numbered callouts on a product image, such as an exploded view, or the products in a desk photo | Schematic |
| Questions and answers, such as a short FAQ before shoppers buy | FAQ |
| Your service terms, such as shipping, returns and warranty, as a row of icons | Icon row |
| Press, retailer or partner logos, such as "As seen in" | Logo list |
| Your newest blog entries, or a chosen few, as cards | Blog posts |
| A statement, story or announcement | Rich text. For a note on every page, such as a sale with a countdown, use the Announcement bar instead |
| An app widget or embed code | Custom Liquid |
You can add more than one of each. For example, use two Featured collection sections for "New" and "Best sellers".
Performance tips
Techno loads the images of the first section on the page right away and loads images further down the page as the shopper scrolls. To keep the first screen fast:
- Keep the Hero, or another image-light section, first. A Slideshow can lead the page instead: its first slide's image loads at once and the others only when needed. Use one or the other first, not both, so the page has one main heading.
- Use product images around 1600 px wide. Larger uploads are resized automatically, but a smaller original uploads and processes faster.
Recipes
Launch-day home page
- Hero › "Heading": the launch name, "Product": the launch product, "Primary button link": the product
- Featured product (below the Hero) › "Product": the same product, for buying without leaving the page
- Newsletter › "Heading": "Get notified"
Catalog-first home page
- Hero › "Product": empty, no Stat blocks
- Featured collection › "Collection": new arrivals, "Products to show": 8
- Featured collection › "Collection": best sellers, "Products to show": 4
See also
- Hero: every Hero setting
- Sections, blocks & templates: adding and reordering sections