Your home page is the shop window. Most visitors arrive there, look for a few seconds, and decide whether to go further. A good fashion home page is not a list of everything you sell; it is a short story, told in the order a shopper wants to hear it.
Your Selvedge style arrives with a full home page, already in a story order. The fastest way to make it yours is to keep that order and replace the pictures and words, top to bottom. This guide shows how, then explains the order so you can change it with confidence.
Replace the demo content
Open the theme editor (Online StoreThemesCustomize). The home page opens first.
Select the first section in the left sidebar. Its settings open on the right.
Replace its image or video with yours, and rewrite its heading and text.
Point every button, collection and product setting at your own collections and products. Sections that show products stay empty until you choose them.
Work down the list, one section at a time. Hide a section you do not need with the eye icon, or remove it.
Select Save often.
The story that sells fashion
| Step | What the shopper wants to know | Sections that answer it |
|---|---|---|
| 1. The season | Who are you, and what is the mood now? | A hero: campaign, lens, pleated, through the letters or slideshow |
| 2. The promise | Why buy here? | Scrolling text with free shipping, returns and a fit promise |
| 3. What is new | What can I buy today? | Featured collection, clothes rail, runway or orbit carousel |
| 4. How it is worn | How would it look on me? | Try the look or Shop the look |
| 5. Why it fits | Will my size be right? | Scroll-lit statement pointing to the size guide, or image with text about your fit promise |
| 6. The craft | Is it worth the price? | Fabric close-up, stacked stories, before and after, product anatomy |
| 7. Help choosing | Where do I start? | Style finder or collection index |
| 8. Proof | Do other people like it? | Customer reviews, press coverage, brand logos |
| 9. A reason to return | What happens next? | Drop launch, newsletter, blog posts |
You do not need every step. Seven to ten sections cover the story; thirteen is a generous maximum.
What each style starts with
| Style | Story in brief |
|---|---|
| Selvedge | Through-the-letters hero, scrolling text, clothes rail, new arrivals, stacked stories, try the look, fabric close-up, before and after, scroll-lit statement, style finder, drop launch, journal, newsletter |
| Organza | Slideshow, mixed typography, a featured piece, runway, shop the look, image with text, orbit carousel, promises, contact, newsletter |
| Pleat | Pleated hero, scrolling text, collection index, clothes rail, try the look, a featured piece, mixed typography, fabric close-up, style finder, scroll-lit statement, collections, journal, newsletter |
| Flatlock | Lens hero, scrolling text, sport switcher, product anatomy, drop launch, featured collection, mixed typography, runway, before and after, video, style finder, scroll-lit statement, newsletter |
A worked example: a small linen brand
To see the story order in practice, here is a home page for an imaginary brand that sells linen dresses, shirts and trousers, built on the Pleat style in about an hour.
| # | Section | Content |
|---|---|---|
| 1 | Pleated hero | A model in a sage dress walking through tall grass. Subheading "Summer 2027", heading "Linen for long summers", buttons "Shop dresses" and "Shop all". A portrait crop for phones. |
| 2 | Scrolling text | "Free shipping over $90 — Free returns for 30 days — Fitted on real bodies" |
| 3 | Collection index | Dresses, Shirts, Trousers, Accessories, each with a strong collection image |
| 4 | Clothes rail | Eight new pieces photographed on hangers, with price tags |
| 5 | Try the look | Three model photos, each with the dress, shirt or trousers pinned, and sizes for every piece |
| 6 | Scroll-lit statement | "Pick your size once and the store remembers it." with a button to the size guide |
| 7 | Fabric close-up | A macro photo of the linen weave, zooming into the slub, with two detail notes |
| 8 | Customer reviews | Four short reviews that mention fit, each with the size the reviewer wears |
| 9 | Newsletter | "Early access to every new colour", with three perks |
Nine sections, two moving ones never side by side, one clear promise in the middle, and a sign-up to end. Every button leads to a collection or the size guide, so every scroll ends somewhere useful.
The same skeleton works for any brand: swap the hero for your season, the rail for your newest pieces, and the statement for the promise that makes you different.
Seasonal updates without rebuilding
A home page that changes with the seasons feels alive, but rebuilding it each time is slow. A practical rhythm:
- Every season: change the hero image and heading, the featured collection, and the looks.
- Every month: refresh the scrolling text with what is current: a new colour, a restock, a drop date.
- Every week: nothing. Let the products do the work.
Keep last season's hero images in ContentFiles with clear names such as hero-summer-2027.jpg, so you can switch back for a sale or an anniversary.
Before you publish a big change, preview it on a duplicate theme, ask someone outside the business to scroll it on their phone, and watch where they stop.
Write for a glance
Shoppers read a home page the way they read a shop window: in a glance.
- Headings: three to six words. "Linen for long summers" works; a sentence does not.
- Subheadings: a label above the heading, such as "New season" or "In the build", in two or three words.
- Text: one or two short sentences. If it needs more, it belongs on a page.
- Buttons: say where they go: "Shop dresses", "Find my size", not "Click here".
- Emphasis: in the scroll-lit statement and mixed typography, wrap the word that matters in asterisks,
*like this*, to set it in the accent color and font.
Pictures and videos for phones
Most fashion shoppers arrive on a phone, so judge every section on one.
- Heroes: upload a separate portrait image for small screens (for example 1200 x 1600 px), so faces and garments are not cropped away.
- Image sizes: 2000 px wide or more for full-width sections, 1200 px for cards. See image sizes.
- Focal points: set the focal point on an image in ContentFiles, and Selvedge keeps that point in view wherever the image is cropped.
- Videos: short (6 to 10 seconds), muted loops under 5 MB. Two background videos per page is a good limit. See add a video.
Keep it fast
Every section adds pictures and code. Selvedge loads each section's code only once and only when it is on the page, loads the first images first and the rest as they come near, and pauses animations off screen. You keep it fast by:
- keeping to ten to thirteen sections;
- avoiding two heavy sections side by side (two videos, or a video hero followed by a runway);
- leaving the first-visit intro off unless your brand needs it (motion and speed).
Check it
Preview on your phone: Online StoreThemes...Preview, then scroll the whole page.
Tap every button: each should lead somewhere useful.
Turn on dark mode with the switch in the header (if you show it) and look again.
Run Lighthouse on the page in mobile mode (keep it fast).
Questions merchants ask
A section is empty on my shop but full in the demo
It is waiting for your content: choose a collection, products or an image in its settings. See my shop does not look like the demo.
Can I use the same section twice?
Yes. Add it again from Add section; each copy has its own settings.
Can sections from another style be used in mine?
Yes. Every style has every section. A style only decides which ones start on the page.
How do I make a landing page with these sections?
Create a page template: open the template selector in the editor, choose Pages > Create template, add sections, then assign the template to a page under Theme template.
Was this guide helpful?
Still need help?Write to us with your shop's address and a screenshot. We reply within two business days, Monday to Friday, usually sooner.
Contact support