Home page sections · Rhode docs

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).

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.