# Home page sections

> Image Banner, Product Slider, Hover Text With Image and Product Tabs Showcase.

Theme 1.0.1 | Last updated: 2026-11-04
Canonical: https://www.expertguro.com/docs/rhode/home-page-sections

## Image Banner (hero)
A full-width banner with an image **or one video**.

| Setting | What it does |
|---|---|
| First image / Second image | One image, or two side by side. |
| Only mobile image | A separate image for phones. |
| **Video** | Upload one video. It replaces the image and plays muted on a loop on desktop and phones. Remove it to show the image again. |
| Overlay opacity | Darkens the image or video so text is easier to read. |
| Banner height | Adapt, Small, Medium or Large. |
| Content position and alignment | Where the text sits. |
| Blocks | Heading, Text and Buttons. |

**Video tips:** MP4, 1920×1080, under 10 MB, 5 to 20 seconds, no sound needed.

## Product Slider
A slider of product cards from a collection.

| Setting | What it does |
|---|---|
| Heading | Optional title. |
| Select collection | The products to show. |
| Big word when a product has no Card label | Fallback word for cards. |

**Card layout:**
- **Top:** the big card label, with a badge on the right.
- **Middle:** the product image.
- **Bottom:** stars and review count, title and price, the subtitle, and a **BUY** button.

**On desktop:**
- Hovering a card shows the second product image with a smooth fade.
- The title and price fade out and the BUY button slides up.
- A frosted **"swipe"** circle follows the mouse.

**On phones:**
- It becomes a swipe slider, with the next card peeking in on the right.
- Small dots under the slider show which card you're on.
- The BUY button is always visible.

Card text comes from product metafields (see [Product metafields](/docs/rhode/product-metafields)).

## Hover Text With Image
A text panel on the left with a list of words, and an image on the right. Hovering a word changes the text, button and image with a smooth fade.

| Setting | What it does |
|---|---|
| Fallback text / Fallback image | Used when an item has no text or image of its own. |
| Image fit | **Show whole image** or **Fill the box**. |
| Item 1 / 2 / 3 | Label (the hover word), text, button label, button link, image. |

On phones, tap a word to switch.

## Product Tabs Showcase
An image on the left and product details on the right, with round buttons that switch between products.

| Setting | What it does |
|---|---|
| Accent color | Title and active round button color. |
| Switch on hover (desktop) | When off, customers click instead. |
| Section height | Height on desktop. |

**Tab block** (add one per product):

| Setting | What it does |
|---|---|
| Round button label | The text in the round button, for example TINT or TREAT. |
| Image | The image for this tab. |
| Title | The big title. |
| Subtitle | The line under the title. |
| Button label / link | The **SEE DETAILS** button. |
| Info rows 1 to 4 | A label and text for each row, such as What it is, Shades, Effect, Key ingredients. |

## Image With Text, Image Carousel, Collection List
Standard sections: an image beside text, an image carousel for social or user photos, and a grid of collections. Edit the images, text and buttons in each section.