Building your home page
Every section on the home page can be added, removed, and reordered. Choose Add section in the theme editor, then drag sections into the order you want.
A home page that works: open with one strong image, show products early, break the grid with a story, then give people a reason to stay in touch.
The sections
Split hero
Two or three full-height panels side by side, each its own entry point. Use it when the store leads with more than one idea — two lines, two seasons, two audiences — and a single hero would force a choice. The whole panel is the link, and pointing at one lets the others recede.
This is what the Atelier preset opens with.
Collection index
A typographic list of collections set at display size. Hovering or focusing a row reveals that collection's photography in a panel that follows the pointer.
It is the section that most sets this theme apart from a conventional grid of tiles, and it scales: a list of ten collections stays readable where ten image tiles would not. On a touch screen, where there is nothing to hover, each row carries its own image inline instead. Everything needed to use it is in the links, so it works identically with a keyboard.
Hero
A full-bleed image or video with a heading set into it. Takes a separate mobile image and a separate mobile content position, because a crop that works across a wide frame rarely works on a phone.
Set Content width lower for a taller, more stacked heading, and higher for a wider one. Raise Overlay if your image is light and the text is hard to read.
Slideshow
Two or more hero-style slides that a visitor can swipe or step through. Use it when you have several collections to lead with. If you only have one message, use the Hero.
Editorial split
Two columns whose widths are deliberately unequal. Column proportions offers a balanced pair, a large image with small text, a small image with large text, and an offset layout where the text sits over the edge of the image.
Campaign
A single photograph at the width of the screen with a short piece of type set into it. Built for the one image a season is remembered by.
Featured collection
Products from one collection, in one of six presentations:
| Layout | Best for |
|---|---|
| Editorial grid | A default row of products, with alternate columns dropped |
| Large feature product | Leading with one piece |
| Asymmetric | Mixing a wide product with two narrow ones |
| Horizontal scroll | Long lists on a phone |
| Compact catalog | Showing many products in a small space |
| Campaign pair | Two products with a lot of air around them |
If you do not choose a collection, the section shows products from your whole catalog so the page is never empty.
Featured products
The same card system, but you pick each product by hand. Use it for a curated row rather than a whole collection.
Lookbook
Large photographs arranged as spreads. Editorial stack offsets each image against the last; Split spread pairs them; Grid keeps them even; Full screen runs them edge to edge.
Shop the look
A styled photograph with clickable dots over the products in it. Add a Hotspot block for each product and set its horizontal and vertical position.
The same products are also listed beside or below the image. That list is how people shop on a phone, where there is no hover, so always leave it on.
Brand story
One long statement set at display size, optionally over a background image, and closing with a signature.
Collection list
Your collections, presented at the same scale as products.
Journal
Your most recent articles. Lead article with a list gives the newest article a spread of its own.
Quotes
Press mentions and customer words that you enter yourself.
Logo list
Stockists or press marks, sized to a common height.
Marquee
A single line of scrolling text. Separate each phrase with a comma. The scroll can be switched off, and it always stops for visitors who ask their device to reduce motion.
Signup
An email signup that adds addresses to your Shopify customer list. No email app is involved.
Collapsible content
Questions and answers, or any content that is better folded away.
Video
A Shopify-hosted video, or a YouTube or Vimeo link. Linked videos only load when a visitor presses play, which keeps the page fast.
Custom Liquid
For code snippets, usually given to you by an app or a developer.
Apps
A place to put app blocks on any page.
Section spacing and color
Most sections have a Color scheme setting. Alternating two schemes down the page is the simplest way to give it rhythm. Overall spacing between sections is set once, in Theme settings > Layout > Vertical rhythm.
Section numbers
Atelier prints a small running number above section headings, the way a printed magazine does. Turn it off in Theme settings > Layout > Show section numbers.