Your home page is a stack of sections. You choose which ones to use, in what order, and what each says. Most of the sections below can also be added to any other page that is built in the theme editor, such as the About page or a collection.

Open the editor with Online Store > Themes > Customize, pick the Home page in the page picker, then click Add section to add one. Drag sections to reorder them, and use the eye icon to hide one without deleting it.

Settings every section shares

Almost every section has these:

Color scheme: which of your five color schemes the section uses. See Theme settings.
Eyebrow: a small line of text above the heading.
Heading and Heading size: Small, Medium or Large.
Text and Text alignment: Start or Center.
Top padding and Bottom padding, under Section padding: the space above and below the section. Lower both to bring two sections closer together.
Columns on desktop and Columns on mobile where a section shows a grid.

Good to know for every section

Start means the left side in English and the right side in Arabic or Hebrew. The theme mirrors itself, so you never need to rearrange a layout for right-to-left languages.
Leave a text field empty to hide it.
Use real, sharp photos. A single large image of at least 2000 px on its longest side is enough for a full width banner.
On a phone, a section with too much text is hard to read. Edit the page at phone width before you publish.

Hero and banners

Slideshow

Use it at the top of the home page to show one to eight big images, each with its own message.

Add the Slideshow section, then add a Slide block for each slide. You can also add a Video slide block.
For each slide set Image, Eyebrow, Heading, Text, and up to two buttons (First button label and First button link, Second button label and Second button link).
Optionally set a Mobile image. A portrait image works best on phones.
Optionally set an Image for right-to-left languages. It is shown in Arabic, Hebrew and other right-to-left languages, so text and image can swap sides. See Languages and right-to-left.
Use Content position (nine positions), Text alignment and Overlay opacity to keep the text readable on the photo. Each slide also has its own Color scheme.

Section settings: Full page width, Slide height (Adapt to first image, Small, Medium, Large, Full screen), Show arrows, Show dots, Autoplay and Change slides every (3 to 12 seconds).

A Video slide plays a Video muted on a loop. Keep it short and compressed.

Use it for a single big message, such as a seasonal campaign. It has the same content settings as one slide: Image, Mobile image, Heading, Text, two buttons, Content position, Overlay opacity and Show content in a box. Extras: Second image, shown beside the first image on tablets and desktops (hidden on phones), and Banner height (Adapt to image, Small, Medium, Large, Full screen).

Film style. Set Style to Film (full screen video) for an opening that fills the first screen with a looping film:

Choose a Video hosted by Shopify, and optionally a Phone video in portrait. Each screen loads only its own film, and it plays muted only while it is on screen, with a pause button.
Keep an Image (and a Mobile image) as the cover: it shows until the film plays and stays if a shopper prefers reduced motion.
Set Heading size to Giant for a headline that fills the width and rises in letter by letter. Short headings of one to three words work best.
The two links sit in the bottom row next to the pause button. Show scroll cue adds a thin moving line at the bottom on larger screens.

Tip: with the header set to float over the home page (Header > Transparent header on home page), the film runs up under the header.

Use it for a timed sale. Set the End date (format YYYY-MM-DD, in your store time zone), the End time and the Text after the timer ends. Choose a Layout (Centered or Split) and add a Background image with Overlay opacity.

Scrolling text

A moving line of short messages, also called a marquee. Add Item blocks, each with Text, an optional Link and an Icon. Control Scroll speed, Scroll direction and Pause on hover. Visitors who prefer reduced motion see static text.

Two rows style. Set Style to Two rows (huge type) for two bands of very large words, the second in a lighter tone running the other way. Give each Item a Row (First or Second). The bands speed up a little while the shopper scrolls and settle again when they stop.

Collections and products

Featured collection

Use it to show products from one collection, or several with tabs.

Choose a Collection, or add Collection tab blocks, each with a Collection and a Tab title. When you add tabs, the single collection setting is ignored.
Set Number of products (2 to 24), Layout (Grid or Slider), Columns on desktop and Columns on mobile.
Turn on Show "View all" button and set the link with Link label if you want shoppers to open the whole collection.
Layout: Rail shows a header with the heading, the View all link, a counter (for example 01 / 08) and arrows, above a row of cards that runs to the screen edges. On phones the row is swiped.

Collection list

Use it for category shortcuts. Add a Collection block for each collection. Each can have its own Image and Title; empty fields use the collection's own. Layouts: Grid, Slider and Circles (circular images, good for categories like Dresses, Bags, Shoes). Set the Image ratio and whether to Show product count. You can add up to 15 collections.

Index layout. Set Layout to Index for a list of collection names in large type. On computers, pointing at a name shows that collection's photo in a large frame beside the list, with an Image caption over it. On phones each row shows a small photo instead. Keep collection titles short (one or two words), or set a shorter Title on the block.

Featured product

Use it to promote one product with its photos and buy button right on the page. Choose a Product, Media position, Media width on desktop, Media shape, and whether to Show description (with Description length (words)) and Show dynamic checkout buttons. It shows the title, price, stock, options and buy buttons next to the product photos. For a fully block based product layout, use the product page itself (see Product page).

Product recommendations and Recently viewed

These are mainly for the product page. Product recommendations shows related products with a Layout of Grid or Slider and a Number of products. Recently viewed shows products the shopper has looked at, from their own browser. Both work on other pages if you add them.

Use it for up to four campaign tiles side by side. Each Promo tile block has an Image, Eyebrow, Heading, Text, a button and its own Color scheme. Size can be Standard, Large (taller) or Wide (spans the full row).

Shoppable image

Also called shop the look. Upload one photo as the Image, then add up to 8 Hotspot blocks. Choose a Product for each and move the dot with Horizontal position and Vertical position. Shoppers tap a dot to see the product name and price, with a link to the product and, when quick view is enabled, a quick view button.

Split layout. Set Layout to Split (photo and product list) to show the photo beside a numbered list of the products. The numbers on the photo match the list: pointing at a dot highlights its product, and tapping a dot on a phone brings that product into view. Use a portrait photo; it is shown uncropped so the dots stay where you placed them.

Shoppable video

A video with products. Add a Video hosted by Shopify or a Video URL from YouTube or Vimeo, a Poster image, and Product blocks. Choose Layout: Products beside the video or Products below the video. Autoplay muted and loop works with Shopify hosted videos only.

Storytelling

Video

A brand film, full page width or inside the page. Choose a Shopify hosted video or a YouTube or Vimeo link, a Cover image and the Video ratio. Turn on Autoplay muted and loop to let a Shopify video play silently while it is on screen, with a pause button in the corner; shoppers who prefer reduced motion see the cover image and press play themselves. Add a Video for phones (a portrait film) and a Cover image for phones if the main film is wide; phones then show them in a taller frame. Show text over the video places the heading and text on top; raise Overlay opacity if the text is hard to read.

Expand on scroll. Set Style to Expand on scroll for a film that starts in a small frame and grows to full screen while the shopper scrolls. Add a First word and a Second word: they sit beside the frame (above and below it on phones) and are pushed outward and fade as it opens. The theme sizes them to the space they have, so longer words simply appear smaller and never sit under the film. Add a Caption, an optional Video for phones and Cover image for phones, and use Scroll length to make the opening slower or faster.

Image with text

Use it for your story, a feature or an offer. Pick an Image (or a Video that replaces it), Image position (Start or End), Image width and Image ratio. The text side is made of blocks you can reorder: Eyebrow, Heading, Text, Button, Icon with text and Small image (for a signature or small logo).

Editorial layout. Set Layout to Editorial for a large image with a smaller Second image overlapping its lower corner, beside the text. Turn on Move images as you scroll to let the two images drift at slightly different speeds.

Rich text

A centered block of text for a short statement. Blocks: Eyebrow, Heading, Text, Buttons and Spacer. Use a narrow width keeps the lines short and readable. Set Style to Statement for one large paragraph whose words light up as the shopper scrolls past it.

Multicolumn

Use it for three to five reasons to shop with you, or features. Each Column block has an Image or an Icon (the icon shows when there is no image), Heading, Text and a link. Choose Style (Plain or Card) and Swipeable slider on phones. Up to 8 columns.

Icon bar

A row of short promises such as free delivery, easy returns, secure payment. Add up to 6 Item blocks, each with an Icon, Title and Text. On phones, choose Scroll automatically or Wrap onto rows.

Stats

Large numbers that count up when they scroll into view. Each Number block has a Prefix, Number (digits only, for example 12000 or 98.5), Suffix and Label. Up to 6.

Timeline

Your story in dates. Add Milestone blocks, each with a Year or label, Heading, Text and Image. Layouts: Vertical or Horizontal slider.

Before and after slider

Compare two photos with a draggable handle, for example a repair, a makeup look or a renovation. Set the Before image and After image, their labels, Starting position, Orientation and Handle style. Square and portrait sliders keep a comfortable width on large screens, so the whole comparison fits without scrolling.

Comparison table

Compare up to four options in columns. Name the columns, add Row blocks and fill in the values. Typing yes or no (or true or false) shows a check or a dash; any other text appears as typed. Use Highlight column to emphasize one.

Image gallery

A lookbook of up to 12 images. Choose Layout: Grid, Mosaic or Slider. In the mosaic layout each Image block has a Tile size (Normal, Wide, Tall or Large). Add a Caption, and choose Caption style (Below image or Over image).

Lookbook layout. Set Layout to Lookbook for a sideways row of portrait photos. Give each Image block a short Label (for example The studio) and a Product: its name becomes the link under the photo. Add an End tile text and End tile link for a closing tile, for example View the lookbook. Shoppers swipe on phones and use the arrows on computers; a counter and a thin progress line show where they are.

Story

A dark, full screen chapter story: photos on one side and chapters on the other, each with a big number, Heading, Text and a Link label with Link. Add a Chapter block for each part of the story (three works well) and give each a Chapter photo. As the shopper scrolls, each photo changes together with its chapter's words. On phones the words sit over the photo. Turn on Photo on the end side to swap the sides on computers.

Testimonials

Add Testimonial blocks (up to 12) with a Quote, Name, Role or location, Rating, Photo and an optional Product link. Layouts: Cards or Large single quote. Set Rating to 0 to hide the stars. The Single quote (fades) layout shows one quote at a time and changes every few seconds when Autoplay is on (Change slides every); it pauses while a shopper points at it or uses the keyboard.

Logo list

Show press or brand logos. Add up to 16 Logo blocks with a Logo image, Brand name (read by screen readers) and an optional link. No logo file yet? Leave Logo image empty and the Brand name shows as text in your heading font. Show logos in grayscale gives a calm look.

Content and community

Blog posts

Show your latest articles from a Blog. Set Number of posts, Layout (Grid or Slider), and which details to show (Show date, Show author, Show excerpt).

An email signup. Choose Layout (Centered, Split or Wordmark) and a Background image. Subscribers are added to your customer list with email marketing accepted.

The Wordmark layout puts the form beside a Portrait image and ends the page with your brand name in giant letters (Wordmark text, or the shop name when empty). It is scaled to fit the page width whatever its length. Use a dark color scheme so it flows into the footer, and turn off the footer's own signup block so shoppers are not asked twice.

Collapsible content

Frequently asked questions. Add Row blocks with a Question and Answer, or fill a row from a page with Page content. Choose Layout: Rows only, Heading beside rows or Side image. Settings: Open the first row, Close other rows when one opens and Add FAQ structured data, which helps search engines show your questions in results.

Contact form

A form with optional phone field and a column of contact details. See Blog and pages.

Store locations

Cards for each shop, with address, hours and a directions button. See Blog and pages.

Tools

Apps

Shows blocks from apps that offer app blocks. Set an Anchor ID if you want a link to jump to it.

Custom Liquid

For advanced users: paste Liquid code or an app snippet.

Spacer

Adds empty space between two sections. Set Height on desktop and Height on mobile, and optionally Show a divider line.

Freeform section and theme blocks

When no ready made section fits, build your own with the Freeform section. It is a blank canvas where you stack theme blocks in any order.

Section settings:

Content width: Narrow, Page width or Full page width.
Layout: Column (blocks stack) or Row (blocks sit side by side).
Gap between blocks: 0 to 80 px.
Content alignment: Start, Center or End.

The blocks you can add:

Heading: Heading text, Size (Display, then Heading 1 to Heading 5), HTML tag and Alignment. The HTML tag sets how search engines and screen readers understand the page; the size sets how big it looks. Use one H1 per page.
Text: Text, Size, Alignment and Muted color.
Button: Button label, Link, Style (Primary, Secondary or Link) and Size.
Image: Image, Image ratio, Width, Alignment, Rounded corners and Link.
Icon: an Icon, its Size and a Label.
Spacer: Height on desktop and Height on mobile.
Group: a container for other blocks. Set Layout (Row or Column), Gap between blocks, Horizontal alignment, Vertical alignment, Wrap blocks to a new line, and under Background, Show background color with a Color scheme and Inner padding. Groups can hold more groups.

You can also add app blocks.

Build a simple promotion

Add a Freeform section.
Add a Heading block and type your offer.
Add a Text block with one sentence.
Add a Button block linking to your collection.
Set Content alignment to Center and choose a Color scheme for the section.

Build a card with a background

Add a Group block inside the Freeform section.
Turn on Show background color and pick a Color scheme. Add some Inner padding.
Drag a Heading, Text and Button into the group.

Good to know

A good home page has a clear first screen, a reason to trust you, your best products and one clear next step. Five to nine sections is plenty.
Hidden sections do not load for shoppers, so hiding is a safe way to keep a section for later.
Set the same Top padding and Bottom padding across similar sections so the page has an even rhythm.
Alternate color schemes between neighboring sections (light, tinted, light) to separate content without lines.
Always check the page in the Arabic (or other right-to-left) language if your store offers one.

Still stuck? Contact support

Homepage sections