Homepage

The home page has no fixed layout of its own. It is only a list of sections and the order they sit in. Everything on it is added, reordered, or removed in the theme editor. Open Online Store → Themes → Customize and the Home page template loads by default. For how sections work in general, see Sections overview.

What is and isn’t part of this template

The home template holds the page’s content sections and nothing else. Three things that appear on the home page belong elsewhere and are edited elsewhere:

• The header sits in the header group, above every template, and the announcement bar is added to that same group when you want one.
• The footer sits in the footer group, below every template.
• The cart drawer, search drawer, and quick view live in the overlay group. They are always present and are configured rather than added. The newsletter popup and age verification belong to the same group, but you add them to it yourself.

Those three groups are edited from the same sidebar, under Header, Footer, and Overlay. A change there shows on every page of the store, not just the home page.

The shipped arrangement

Lapels installs the home page with thirteen sections, in this order. It is a showcase rather than a rule. It exists so you can see the theme’s range in one scroll. Keep the sections that fit your store, replace the demo copy and photography, and delete the rest.

1. Slideshow. Three full-bleed slides with a subheading, a headline, a paragraph and a link. This is the section carrying the page heading (see the caution below).
2. Product carousel. Eight products from a collection, run sideways on a rail.
3. Scrolling text. Five short house lines travelling as a band.
4. Rich text. A centered statement with two buttons.
5. Hero scroll sequence. Four chapter panels that advance as the visitor scrolls.
6. Flip cards. Three cards that turn to reveal a second face.
7. Timeline. Four numbered stages along a drawn line.
8. Icon list. Four reassurance rows with icons.
9. Shop the look. One outfit photograph with a numbered mark on each piece.
10. Media row. Four frames in the offset layout.
11. Text tabs. Materials, Care, Shipping and Returns.
12. Newsletter. An email signup, centered.
13. Countdown. A deadline with a message that replaces the clock once it passes.

Every section in the catalog can be added here, with two exceptions. The overlay sections above, and Related products, which only works on the product template. Custom Liquid and app blocks are available on the home page like anywhere else.

Caution

Exactly one section per template should have Use as the page heading switched on. It makes that section’s heading the page’s main heading. On the shipped home page that is the Slideshow. Three sections carry the setting: Slideshow, Hero scroll sequence and Tabs banner. If you delete or replace the Slideshow, turn the setting on in whichever of those takes its place, and check that no second section has it on as well.

Composing a menswear home page

The shipped arrangement is dense on purpose. A real store usually reads better with eight to twelve sections. Here is a shape that works.

Open with one hero, not three. Pick the one that matches what you have to show. Media hero when a single photograph carries the season. Slideshow when you genuinely have two or three campaigns to rotate. Not to hedge between three crops of the same one. Hero scroll sequence when the season is a story told in order. Stacking heroes pushes the first product below three screens of scroll.

Get to product early. A Product carousel or Featured collection directly under the hero answers the only question a first-time visitor has. Collection list or Collection tabs works better when your catalog splits cleanly by garment type, such as shirts, knitwear, trousers and outerwear.

Alternate color schemes down the page. Lapels builds rhythm with ground color rather than with boxes and borders. Running paper, then ecru, then paper again gives each section an edge without drawing one. Two sections in a row on the same scheme read as one long section. Three are worse still. Set the schemes themselves in Colors.

Punctuate where the page changes subject. Text banner is the theme’s paragraph mark. One line of the house voice, ruled off above and below, saying the page has turned from selling to telling. Scrolling text does the same job louder, and Multi scrolling text louder still. One of the three is enough.

Tell one story, once. Timeline, Media row, Feature tiles and Image with text are four ways to say how the clothes are made. Choose the one that suits your photography and delete the others rather than running them in sequence.

Reassure near the bottom. Use Icon list for shipping, returns and repairs. Its Columns layout is the wide version of the same rows. Add Customer quotes or Press quote if you have real ones. An invented quote is worse than none.

End on a newsletter or an editorial moment. Newsletter is the standard close and gives the page somewhere to go. Blog posts closes on your writing instead, which suits a store whose journal is part of the offer. Countdown is worth keeping only while a real deadline is running. A clock that has expired sits at the foot of the page saying so.

Tip

Section spacing is per section and keeps separate desktop and mobile values, so you can tighten a run of short sections without touching the tall ones. The page’s maximum width, the theme-wide section-spacing step, and the grid gaps are set once for the whole store. See Layout.

Checking the page

Preview at phone width as well as desktop before publishing. Three things reward a look. The hero’s height on a short screen. Whether alternating schemes still read once the sections stack. And how far a visitor scrolls before the first product.

Then walk the page with the Tab key. Every link, button, and slideshow control should take a visible focus ring, in a sensible order.

Related: Sections overview · Setup guide · Colors · Product pages · Lapels support replies within 12 hours.