Media slideshow
Build a static media hero or a multi-slide image and video story.
Media hero is Strata’s large image-and-video section. Use the Static media hero preset for one fixed hero, or the Media slideshow preset when visitors should move between several image or video slides.
Desktop example: the first media section supports the transparent Header while keeping slide controls and copy visible.
Mobile example: review the Header contrast, focal point, copy length, and controls together rather than treating the desktop crop as the mobile result.
Add Media hero
- Open Online Store > Themes > Customize.
- Use the page selector to open the template where the hero should appear.
- Select Add section, then choose Media hero.
- Choose the Static media hero or Media slideshow preset, or add the blocks yourself.
The section supports up to 5 blocks. One block gives you a fixed hero; more than one enables slide controls and makes autoplay relevant.
Slideshow
| Setting | Options and use |
|---|---|
| Transition | Page turn, Fade, or Special slide. Default: Page turn. |
| Autoplay slides | Advances between slides without a visitor selecting one. Default: Off. The schema note applies this setting when the section has more than one slide. |
| Pause on hover | Pauses autoplay on devices that support hovering. Default: On. Visible when Autoplay slides is on. |
| Change slides every | 3–12 seconds in 1 second steps. Default: 5 seconds. Visible when Autoplay slides is on. |
With one block there is no slide-to-slide transition, dot navigation, or autoplay cycle to review.
Motion and controls
Enable parallax for this section
The default is On. It allows this section to use parallax only when the global Enable parallax effects setting is also on. A reduced-motion preference overrides both settings. See Animation for the global control.
The section’s arrows, slide dots, and play/pause control appear when their corresponding interaction is available. The current implementation supports selecting dots, keyboard movement through the dots, and touch swipes; verify the accepted browser behavior before treating every input method as final support guidance.
Layout
| Setting | Options and use |
|---|---|
| Desktop banner ratio | Fullscreen, Natural, 21:9, or 32:9. Default: Natural. |
| Mobile banner ratio | Fullscreen, Square, or 4:3 portrait. Default: 4:3 portrait. |
Natural follows the first slide’s available media ratio. Choose a fixed ratio when every slide should occupy a consistent frame, then check image and video crops together.
Advanced
Allow transparent header
Default: On. When this section is first on the page, it can sit beneath a transparent Header. The Header’s own transparent mode must also allow the state. This setting does not make a later section transparent.
Spacing
| Setting | Options and use |
|---|---|
| Section spacing | None, Small, Medium, or Large. Default: None. |
| Top spacing | Adds the section’s top spacing. Default: On. |
| Bottom spacing | Adds the section’s bottom spacing. Default: On. |
Blocks
Add up to 5 blocks and reorder them in the Theme Editor. The available block types are Image slide and Video slide.
Image slide
Media
| Setting | What it controls |
|---|---|
| Image | The main slide image. An empty image uses the section placeholder path, so populate it before publishing. |
| Mobile image | Optional narrow-layout replacement. When blank, the main Image is reused. |
| Media fit | Cover fills the frame and can crop; Contain keeps the full image visible. Default: Cover. |
Content
| Setting | What it controls |
|---|---|
| Eyebrow | Short line above the slide heading. Default: Featured. |
| Heading | Main slide message. Default: Introduce your campaign. |
| Text | Supporting rich text. |
| Button label and Button link | First action. The action appears only when both are supplied. |
| Button style | Text link, Primary, or Secondary. Default: Text link. |
| Second button label and Second button link | Optional second action. It also requires both fields. |
| Second button style | Text link, Primary, or Secondary. Default: Text link. |
Style
| Setting | Options and use |
|---|---|
| Enable color overlay | Adds a color layer over the slide media. Default: On. |
| Overlay opacity | 0–50% in 1% steps. Default: 20%. |
| Overlay color | Color used by the overlay. The default follows the global brand color. |
| Text color | Color used by the slide copy. The default follows the global background color. |
Layout
| Setting | Options and use |
|---|---|
| Content horizontal position | Left, Center, or Right. Default: Left. |
| Content vertical position | Top, Middle, or Bottom. Default: Bottom. |
| Content width | Small, Medium, or Large. Default: Medium. |
Video slide
Media
| Setting | What it controls |
|---|---|
| Desktop background video | Hosted video for larger layouts. |
| Mobile background video | Optional narrow-layout video. When blank, the desktop video is reused. |
| Fallback image | Still image used when the video cannot play or motion is reduced. |
| Media fit | Cover or Contain. Default: Cover. |
The Video slide uses the same Content, Style, and Layout labels and options as the Image slide, including both optional buttons and the overlay controls. There is no separate mobile fallback-image setting in this block; use the video’s mobile source or the shared fallback image.
Desktop and mobile behavior
Desktop and mobile banner ratios and media sources are independent. Review every slide at both sizes, especially when a subject’s focal point moves between a wide and portrait crop. A mobile image or video can replace the desktop source; leaving it blank reuses the desktop source.
Media recommendations
Use descriptive alt text for informative images in Shopify Files. Keep essential copy in the slide fields rather than inside the image. Add a fallback image for every Video slide and check the fallback without playback. Exact image dimensions are not prescribed here; validate the approved fixture in the selected ratios.
Accessibility and motion
- Keep slide copy concise enough to read before the next transition.
- Use the visible arrows, dots, and play/pause control rather than making autoplay the only navigation path.
- Check focus visibility and the labels of the slide controls.
- Keep essential information available in still images and text when motion is reduced.
- Verify keyboard, touch, autoplay, transition, and reduced-motion behavior in an accepted browser run.
Common issues
- The section looks static: check the number of blocks. One block has no slide-to-slide transition.
- Autoplay controls are missing: confirm there are multiple blocks and Autoplay slides is on; Pause on hover and Change slides every are conditional settings.
- The Header is unreadable over the first slide: review Allow transparent header, the Header’s transparent setting, the slide’s Text color, and the overlay together.
- A slide is too dark or too light: adjust Enable color overlay, Overlay opacity, and Overlay color, then check every slide rather than only the first.
- A video slide shows no useful still: populate Fallback image and verify the video source.
Related guides
- Split media banners for one or two independent promotions.
- Video for a focused video section.
- Flexible media grid for mixed blocks with independent spans.
- Animation for reduced motion and parallax controls.