> For the complete documentation index, see [llms.txt](https://docs.strm.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.strm.design/building-pages/home-page.md).

# Home page and content sections

A visual catalogue of every content section in Stratum, grouped by purpose, with what each is for and the settings that matter.

Stratum comes with more than 40 sections you can add to the home page and to any other page template. This page shows each one, explains when to use it and highlights the settings that matter. Every section also has a reference page listing all of its settings and defaults.

![Home page on a computer](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-8fda08e92ee8553f05690f2d8ccf03f37a4363c9%2Fhome-desktop.png?alt=media)

To add a section, open the page in **Online Store › Themes › Customize**, click **Add section** and pick it from the list. See [Sections and blocks explained](/building-pages/sections-and-blocks.md) for the basics.

{% hint style="info" %}
Most sections have the same three settings at the bottom: **Color scheme**, **Top padding** and **Bottom padding**. They are not repeated below.
{% endhint %}

## Heroes, images and video

### Content

The most flexible section in the theme. It arranges theme blocks (Heading, Text, Button, Image, Video, Icon, Group and more) in any layout. Its presets cover most landing-page needs: **Rich text**, **Hero**, **Hero split**, **Hero with background**, **Image with text**, **Multicolumn**, **Statement**, **Press quotes**, **Program**, **Promotion cards**, **Newsletter**, **FAQ**, **Text columns**, **Team** and **Tier cards**.

![Content section](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-533b81b5e9a809b8edc3d9a32578f869106cef10%2Fsection.png?alt=media)

Key settings:

* **Content width**: **Page** (default), **Wide**, **Medium**, **Narrow** or **Full width**.
* **Direction**: **Vertical** stacks blocks, **Horizontal** puts them side by side. With Horizontal, **Stack on small screens** and **Wrap items** appear.
* **Cross-axis alignment**, **Main-axis distribution**, **Gap** and **Text alignment** fine-tune the layout.
* **Minimum height** (0–900px) and **Content position** (**Top**, **Middle**, **Bottom**) make banner-style heroes.
* **Show content on a rounded panel** with a **Panel color scheme**.
* **Background image** or **Background video** (muted, looping, paused for reduced motion), **Overlay color** and **Overlay opacity** (0–90%). For a hero that is the first section on the page, turn on **Load background image immediately**.

Tips: build columns with **Group** blocks set to **Show as card**, and keep one Heading 1 per page (the **Heading** block's **Heading level**).

[Content reference](/reference/sections/section.md)

### Slideshow

Full-width slides, each with an image beside its text. Each **Slide** block can hold theme blocks (heading, text, buttons) and has **Image**, **Image position on large screens** (**Right** or **Left**), **Text alignment** and **Color scheme**.

![Slideshow](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-1ddb4c477ab81fecb6ab5d3bc8f37b2358947826%2Fslideshow.png?alt=media)

* **Slideshow description**: read by screen readers, for example "Featured collections".
* **Change slides automatically** (off by default) and **Change slides every** (4–12 s). Autoplay pauses on hover, on focus and for visitors who prefer reduced motion, and is off in the theme editor.

[Slideshow reference](/reference/sections/slideshow.md)

### Before and after

A comparison slider: drag the handle to reveal a before image over an after image. Great for restoration, cleaning, care or seasoning products.

![Before and after](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-e4562a0039e3eccc7ad7899f58c66fb6578134e4%2Fbefore-after.png?alt=media)

* **Before image** / **Before label**, **After image** / **After label**.
* **Starting position** of the handle, 10–90% (default 50%).
* Use two images of the same size and framing, so only the subject changes.

[Before and after reference](/reference/sections/before-after.md)

### Video with chapters

A video with a chapter list beside it. Clicking a chapter jumps the video to that moment.

![Video with chapters](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-43f95ec920c8902d449eae6142c0f0c61045c167%2Fvideo-chapters.png?alt=media)

* **Source**: **YouTube or Vimeo** (with **URL** and **Cover image**) or **Uploaded video**.
* Add **Chapter** blocks with a **Start time** (minutes and seconds, for example `3:40`) and a **Label**. The first chapter's time and label show over the video.

[Video with chapters reference](/reference/sections/video-chapters.md)

### Image gallery

A gallery of images that can link to products.

![Image gallery](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-c418df3d69471a32e98200e206fb7426dc19cc93%2Fimage-gallery.png?alt=media)

* **Layout**: **Square tiles** or **Mixed shapes with lightbox** (masonry). With masonry, **Columns on large screens** (2–5) appears and clicking an image opens it full screen with captions and arrows.
* Each **Gallery image** block has **Image**, **Caption** (for example a photo credit, with permission), **Product shown** and **Link**.

[Image gallery reference](/reference/sections/image-gallery.md)

### Text reveal

A short statement whose words fill in as visitors scroll past. Use one per page for a brand promise.

![Text reveal](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-425bdf2990aa7903bac66959cadd21368c9d921d%2Ftext-reveal.png?alt=media)

* **Text**: up to 60 words. Words fill in from light to full color as the section scrolls.

[Text reveal reference](/reference/sections/text-reveal.md)

### Marquee

A row of large links that scrolls endlessly, for example collection names.

![Marquee](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-6331a89160fcf08c32162af311b8f18fbae9c121%2Fmarquee.png?alt=media)

* Add **Marquee item** blocks with **Text** and **Link**.
* **Speed** (seconds for one loop, 10–120), **Direction** (**Left** or **Right**) and **Show dividers**.
* **Description for screen readers** names the row. The motion stops for visitors who prefer reduced motion.

[Marquee reference](/reference/sections/marquee.md)

## Products

### Featured collection

Shows products from one collection. Its presets give it very different looks: **Featured collection**, **Product row**, **Bestsellers list**, **Focus carousel** and **Gift guide**.

![Featured collection](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-d309293d68142a30afa8b20665d8b8d3042da219%2Fproduct-list.png?alt=media)

* **Collection** and **Maximum products** (2–24).
* **Layout**: **Grid** (with **Columns on large screens**), **Scrolling row**, **Numbered list** or **Focus carousel** (the centered product is enlarged).
* **Heading size**: **Small** or **Large**.
* **Show link to collection** and **Link label**.
* **Price shortcuts**: comma-separated amounts such as `25, 100, 250` add buttons (Under 25, 25–100…) that filter the products by price. They replace the collection link. Not used by the Numbered list layout.

[Featured collection reference](/reference/sections/product-list.md)

### Tabbed collections

Several collections in one section, one per tab.

![Tabbed collections](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-d0a0bfabecbc70e4699989b7a2d44363ab364583%2Ffeatured-collection-tabs.png?alt=media)

* Add a **Collection tab** block per tab with **Tab label**, **Collection** and **Show link to collection**.
* **Products per tab** (2–12) and **Columns on large screens** (**Three**, **Four**, **Five**).

[Tabbed collections reference](/reference/sections/featured-collection-tabs.md)

### Featured product

A single product with its gallery, variant picker and buy buttons, anywhere on the site.

![Featured product](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-bf384e349cc9abc20bb5cc8100e430b4cffe2807%2Ffeatured-product.png?alt=media)

* **Product**, **Media position on large screens**, **Show only the selected variant's media**, **Show thumbnails on large screens**, **Show quantity selector** and **Show link to product page**.
* Add **Text**, **Collapsible row**, **Button**, **Specifications**, **Description**, **Custom Liquid** or app blocks under the buy buttons.

[Featured product reference](/reference/sections/featured-product.md)

### Shop the look

A styled photo with product hotspots and the products listed beside or below it. Presets: **Shop the look** and **Lookbook**.

![Shop the look](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-3e18efc7ddf44681cba689e747409dbdb1f160c8%2Fshop-the-look.png?alt=media)

* **Layout**: **Product list beside image** or **Story below image**.
* **Heading size**: **Small**, **Medium**, or **Large page heading** (use once per page, for example on a lookbook page).
* Each **Look** block has an **Image**, **Tab label**, **Eyebrow**, **Heading**, **Text** and **Show add all to bag button**, and holds **Hotspot** blocks (a **Product** with **Horizontal position** and **Vertical position** in %).
* Add more than one look to get tabs and previous/next buttons.

[Shop the look reference](/reference/sections/shop-the-look.md)

### Product bundle

Lets shoppers pick several products and add them all to the bag in one click. Presets: **Bundle builder** and **Shoppable recipe**.

![Product bundle](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-e51d69bbb362f99f2e9251e20432a6bbcadcd22a%2Fproduct-bundle.png?alt=media)

* **Layout**: **Product cards** or **Checklist with image** (with **Image**, **Eyebrow** and **Product list heading**).
* Add a **Product** block per item, with **Select by default**.
* **Quantity messages**: show a message after a number of selected products (**First message after** / **First message**, **Second message after** / **Second message**). Set the count to 0 to hide them.

{% hint style="warning" %}
The messages only describe an offer; they don't create one. To give a discount, create an automatic discount in **Discounts** first, then describe the same offer here.
{% endhint %}

[Product bundle reference](/reference/sections/product-bundle.md)

### Product finder

A short quiz that recommends a product.

![Product finder](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-0179e38616ae53e8772fd94c5c4ee25d19d05c4b%2Fproduct-finder.png?alt=media)

1. Add **Question** blocks in the order shoppers answer them. Each has a **Question** and **Answers** (one per line; the first line is answer 1).
2. Add **Result** blocks after the questions. Each has a **Product**, **Why it fits** and a **Rule**.
3. A rule lists one answer number per question, separated by spaces. `2 * 1` means "answer 2 to question 1, any answer to question 2, answer 1 to question 3". Use `*` for any answer and `1|3` for either answer.
4. Results are checked from top to bottom. A result with an empty rule matches everything, so put one last as a fallback.

[Product finder reference](/reference/sections/product-finder.md)

### Volume pricing calculator

Shows a product's quantity price breaks (for example from B2B catalogs) with a slider to try quantities.

![Volume pricing calculator](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-dcd0c3ec18c0bee415091299e04da252e4fc0c4b%2Fvolume-calculator.png?alt=media)

* Add **Product** blocks. **Maximum quantity** sets the slider range (10–500).
* **Text when no volume pricing applies** is shown to shoppers without price breaks. **Card color scheme** styles the calculator card.
* The calculator never creates discounts; it shows the prices Shopify returns for the signed-in customer.

[Volume pricing calculator reference](/reference/sections/volume-calculator.md)

### Quick order

A fast order form for repeat and trade buyers: search by SKU or product name and enter a quantity.

![Quick order](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-5cc03f0bf984a534ff9f0959285c36a253a95712%2Fquick-order.png?alt=media)

* Search covers product titles, vendors, types and variant SKUs. Prices follow the customer's own pricing, including B2B catalogs.
* **Shortcut heading** and **Shortcut products** add one-click chips for frequently ordered items.

[Quick order reference](/reference/sections/quick-order.md)

### Size guide

Helps shoppers choose a size by drawing each size as a circle to scale, with "serves" and details. Ideal for pans, pots and plates.

![Size guide](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-c687a647deffadf82fb00749cc283798248470ce%2Fcapacity-guide.png?alt=media)

* **Product**, **Eyebrow when no product is selected**, **Heading before a size is selected**, **Largest diameter shown** (the circles scale against it) and **Circle color**.
* Add a **Size** block per size: **Option value** (must match the product's option value exactly, for example `5.2 L`), **Diameter in centimeters**, **Serves**, **Details** and **Select first**. The add button adds that variant.

[Size guide reference](/reference/sections/capacity-guide.md)

### Recently viewed

Products the visitor has looked at on this device, as compact cards in a scrolling row. The list is stored in the visitor's browser, so it is empty for first-time visitors and the section hides itself until there is something to show. Set **Maximum products** (2–12). On product pages the current product is left out.

[Recently viewed reference](/reference/sections/recently-viewed.md)

### Product recommendations

"You may also like" products on product pages, generated by Shopify from sales and product data. Only available on product templates.

![Product recommendations](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-453e1383624e25ce972403e62e1edb12493d3183%2Fproduct-recommendations.png?alt=media)

* **Heading**, **Maximum products** (2–10) and **Products per row on large screens** (2–6).
* Adjust what Shopify recommends in the **Search & Discovery** app.

[Product recommendations reference](/reference/sections/product-recommendations.md)

### Complementary products

"Pairs well with" products are added as a **Complementary products** block on the product page, not as a section. Choose the products in the **Search & Discovery** app. See [Product page](/products/product-page.md).

## Collections

### Collection list

Shows collections you choose. Six presets cover six looks: **Collection list** (cards), **Round collection thumbnails**, **Collection mosaic**, **Collection list with preview**, **Expanding panels** and **Stacking cards**.

![Collection list](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-a0e63f9b455fa7e20179b2bf30f34da882c95855%2Fcollection-list.png?alt=media)

| Layout                      | What it does                                                                       |
| --------------------------- | ---------------------------------------------------------------------------------- |
| **Cards**                   | Image cards in a grid.                                                             |
| **Round thumbnails**        | A row of circular images with names, like story bubbles.                           |
| **Mosaic**                  | One large tile and four small ones. Shows the first five collections.              |
| **List with image preview** | Large collection names; hovering one shows its image beside the pointer.           |
| **Expanding panels**        | Tall panels side by side; the active one widens to show its image and description. |
| **Stacking cards**          | Full-width cards that pile up on top of each other as visitors scroll.             |

* Add a **Collection** block per collection. Optional **Image** and **Heading** override the collection's own; **Description** shows in Expanding panels and Stacking cards; **Color scheme** is used by Mosaic, Expanding panels and Stacking cards.
* **Link label** and **Link** add a "view all" link (defaults to the collection list page).

[Collection list reference](/reference/sections/collection-list.md)

## Storytelling

### Feature list

Numbered feature rows beside one large image. Opening a row shows its text and swaps the image, with a counter such as "01 / 04".

![Feature list](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-191d7cd3d7044ff133f966799775e87c95181972%2Fmedia-accordion.png?alt=media)

* **Eyebrow**, **Heading** and **Image position on large screens**.
* Each **Feature** block has **Heading**, **Text**, **Image** and **Image label** (a short label shown on the image).

[Feature list reference](/reference/sections/media-accordion.md)

### Tabs

Content in tabs. Presets: **Tabs**, **Comparison tabs** and **Feature tabs**.

![Tabs](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-d4f3669a827cdb6fa6dd47ea796953945669bd9d%2Ftabs.png?alt=media)

* **Layout**: **Tabs beside content**, **Tabs above content** or **Feature tabs with progress** (tabs advance automatically with a progress line; **Advance tabs automatically** and **Time per tab** appear).
* Each **Tab** block has **Tab label**, **Tab description** (progress layout) and **Image**, and holds theme blocks such as text, buttons and **Scale** rows.

[Tabs reference](/reference/sections/tabs.md)

### Timeline

Steps or milestones. Presets: **Timeline** and **History**.

![Timeline](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-77a6bfcb7e8ed18a0de62680fd51922603443cf1%2Ftimeline.png?alt=media)

* **Layout**: **Steps that fill in on scroll** or **Simple list**.
* Each **Timeline step** block has **Time label**, **Heading** and **Text**.

[Timeline reference](/reference/sections/timeline.md)

### Flip cards

Cards that turn over to reveal a story on the back. Good for makers, team members or materials.

![Flip cards](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-0efd544ae79d9fb447487c4db02ccb945a6330fb%2Fflip-cards.png?alt=media)

* **Hint** tells visitors to turn a card over.
* Each **Flip card** block: front **Image**, **Heading**, **Subheading**; back **Eyebrow**, **Text**, **Detail label**, **Detail**, **Link label**, **Link** and **Back color scheme**.

[Flip cards reference](/reference/sections/flip-cards.md)

### Testimonials

Customer and press quotes. Presets: **Testimonials**, **Testimonial card stack**, **Scrolling testimonials** and **Quotes**.

![Testimonials](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-6f30ead28167a62086aea28ba8c33fef7d070018%2Ftestimonials.png?alt=media)

* **Layout**: **Carousel**, **Card stack** (drag the top card away), **Scrolling rows** (with **Scrolling speed**) or **Quote grid**.
* Each **Testimonial** block: **Quote**, **Highlighted phrase** (highlighted in the scrolling layout), **Author**, **Role or location**, **Product name**, **Headline** (card stack and grid), **Portrait** and **Show five stars**.

{% hint style="danger" %}
Only publish real quotes, and only turn on **Show five stars** when the quote comes from a real five-star review.
{% endhint %}

[Testimonials reference](/reference/sections/testimonials.md)

### Logo list

Logos of brands you carry or press that featured you.

![Logo list](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-9a5722e71d016ffcdb413eedfd29044ac7f43b11%2Flogo-list.png?alt=media)

* **Show logos in cards** (on by default). **Link label** and **Link** add a "view all" link.
* Each **Logo** block: **Logo** (transparent PNG or SVG), **Brand name** (shown when there is no logo and used as alternative text), **Caption** and **Link**.

[Logo list reference](/reference/sections/logo-list.md)

### Blog posts

The latest posts from a blog. Choose the **Blog**, **Number of posts** (2–6), **Show excerpt** and the **Link label**. See [Blog and blog posts](/building-pages/blog.md).

![Blog posts](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-a4d8c69b353bf1a450badc7004d2264eaec155a5%2Fblog-posts.png?alt=media)

[Blog posts reference](/reference/sections/blog-posts.md)

### Countdown

Counts down to the real end of a promotion, with a button.

* **End date and time** in the format `YYYY-MM-DD HH:MM` in your store's time zone, for example `2026-12-31 23:59`.
* **Eyebrow**, **Heading**, **Button label** and **Button link**.
* The section hides itself when the time is up, so you never show an expired offer.

[Countdown reference](/reference/sections/countdown.md)

### Store locator

Your physical stores on a map. Presets: **Store locator** and **Store finder**.

![Store locator](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-2d9063c033cb92249aa790ea90b7182bdba04d24%2Fstore-locator.png?alt=media)

* **Layout**: **Store list beside map** (with **Link** and **Link label**) or **Searchable store finder** (with **Text** and **Service filters**).
* **Map image**: upload a map of your region, then set each store's pin.
* Each **Store** block: **Name**, **Street address**, **City**, **State or region**, **Postal code**, **Phone**, **Status** (for example "Open until 8 pm"), **Opening hours**, **Services** (matching the section's service filters) and the pin's **Horizontal position** and **Vertical position**.

[Store locator reference](/reference/sections/store-locator.md)

### Form

A custom form whose answers arrive by email, for example a trade account application.

![Form](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-e5bd2ec97ab434f77f8321797971597091d4067e%2Fform.png?alt=media)

* **Heading**, **Text** (numbered lists show as steps), **Form name in emails**, **Button label**, **Note below the button**, **Success heading** and **Success message**.
* Add **Field** blocks: **Label**, **Type** (**Text**, **Email**, **Phone**, **Long text**, **Choice** with **Choices**), **Placeholder**, **Required** and **Width on large screens** (**Full** or **Half**).
* Use exactly one **Email** field; Shopify needs it to send the message. Submissions arrive at your store's sender email like contact form messages.

[Form reference](/reference/sections/form.md)

### Product reviews

A rating summary and your review app's reviews.

* **Product** (leave empty on product pages to use the current product) and **Heading**.
* The summary reads the `reviews.rating` and `reviews.rating_count` metafields that review apps write. Add your review app's block inside the section to show individual reviews.

[Product reviews reference](/reference/sections/product-reviews.md)

### Custom Liquid

Paste Liquid, HTML or an embed code. See [Sections and blocks explained](/building-pages/sections-and-blocks.md#custom-liquid).

## Tips for a strong home page

* Start with one hero (**Content** with the **Hero** or **Hero with background** preset, or a **Slideshow**). Turn on **Load background image immediately** for a background hero.
* Follow with products early (**Featured collection** or **Tabbed collections**), then a **Collection list**.
* Add one storytelling section (**Feature list**, **Text reveal** or **Testimonials**) and finish with a newsletter (**Content** with the **Newsletter** preset).
* Alternate color schemes between neighboring sections for rhythm.

## Related

* [Sections and blocks explained](/building-pages/sections-and-blocks.md)
* [Sections reference](/reference/sections.md)
* [Animations and motion](/store-wide-design/animations.md)