Slideshow

Large hero banner with images or video, text and buttons.

Use a slideshow at the top of the home page for your hero message: a new harvest, a seasonal blend or a subscription offer.

How to add it

In Shopify admin, go to Online Store → Themes and click Customize.
Open the page from the page picker at the top of the editor.
In the sidebar, click Add section and choose Slideshow.
Fill in the content, then click Save.

Tips

Desktop images: 2400 × 1200 px or larger. Mobile images: 1080 × 1350 px.
Keep the focus of the photo away from where the text sits.
Use one slide when you can. One strong message beats five rotating ones.
Pick a slide color scheme that stays readable over the image, and raise the overlay if needed.

Screenshots

Settings

Setting	Options	What it does
Section appearance
Color scheme	Color scheme
Settings
Container	Full width · Full width, inset card · Page width
Section height	Adapt to first slide · Small · Medium · Large (fill screen)	Desktops and sideways tablets. Phones and upright tablets use Mobile section height.
Mobile section height	Adapt to first slide · Small · Medium · Large · Full screen
Mobile layout	Text on image · Stacked	Phones and upright tablets. Overlay shows the mobile image as a full background with the text on top, like desktop. Stacked puts the text above the image, so it never covers the product.
Auto-rotate slides	On / Off	Rotation pauses on hover, focus and touch, and never runs for visitors who prefer reduced motion.
Change slides every	3–9 s
Loop slides	On / Off
Pagination style	Dots · Counter · Counter with line · None
Control alignment	Left · Center · Right
Animations

Blocks

Click Add block under the section in the sidebar. Drag blocks to change their order.

Slide

Setting	Options	What it does
Color scheme	Color scheme	Colors this slide's text, buttons and the slider controls while it is shown. Pick a scheme that stays readable over the image and overlay.
Media
Image	Image
Mobile image	Image	Optional. Falls back to the desktop media when empty.
Video	Shopify-hosted video	Plays muted in the background while the slide is shown, and takes precedence over the image. Visitors who prefer reduced motion see the video cover image instead.
Mobile video	Shopify-hosted video	Optional. Falls back to the desktop media when empty.
Overlay color	Color
Overlay opacity	0–100 %	Tints the media with the overlay color so text stays readable. Lower it with care — check your text contrast.
Use a different overlay opacity on mobile	On / Off
Mobile overlay opacity	0–100 %	Phones and upright tablets. Raise it if the text sits over a busy part of your mobile image.
Content
Subheading	Text (bold, italic, links)
Subheading size	Small · Medium · Large
Heading	Text (bold, italic, links)	Italicized words switch to the Accent font from Theme settings → Typography. They stay italic and keep the color of the text around them.
Heading size	Small · Medium · Large · Extra large
Heading level	H1 · H2 · H3 · H4 · H5 · H6	Adjust for page structure — one H1 per page. Size is controlled separately.
Text	Rich text
Text size	Small · Medium · Large
Highlights	Text, one item per line	Short claims shown as a dotted row under the text, such as your freshness promise. One item per line.
Buttons
Button label	Text
Link	Link
Button style	Primary · Secondary · Ghost · Link
Button size	Small · Medium · Large
Open in a new tab	On / Off
Second button label	Text
Link	Link
Second button style	Primary · Secondary · Ghost · Link
Second button size	Small · Medium · Large
Open second button in a new tab	On / Off
Position
Content position	Top · Middle · Bottom
Horizontal position	Left · Center · Right
Content alignment	Left · Center · Right
Mobile content position	Top · Middle · Bottom
Mobile content alignment	Left · Center · Right

It also has the shared Animate on scroll and Section spacing settings.