Split Media Hero Slide
The split media hero slide is the repeatable content unit for both the split media hero and split media hero carousel sections. Each slide holds two media panels (left and right) that can display images or videos, with configurable layout ratios and mobile-specific media overrides. When used inside the carousel section, each slide also renders its own title, description, and buttons via static blocks.
Settings
Section titled “Settings”| Setting | What it does |
|---|---|
| Split layout | Controls the ratio between the two panels: 50/50, one-third/two-thirds, or a single full-width panel. |
| Flip | Reverses the split ratio on desktop and flips the stack order on mobile so the right panel appears first. |
| Left media type | Switches the left panel between an image picker and a Shopify-hosted video. |
| Left image | The desktop image for the left panel. |
| Left image (mobile) | An optional mobile-specific image for the left panel. Falls back to the desktop image when empty. |
| Left video | The desktop video for the left panel. Only visible when media type is set to video. |
| Left video (mobile) | An optional mobile-specific video for the left panel. |
| Right media type | Switches the right panel between image and video. Hidden when layout is set to full. |
| Right image | The desktop image for the right panel. |
| Right image (mobile) | An optional mobile-specific image for the right panel. |
| Right video | The desktop video for the right panel. |
| Right video (mobile) | An optional mobile-specific video for the right panel. |
Used in
Section titled “Used in”- When the layout is set to “full,” only the left media panel renders. The right panel settings are ignored entirely.
- Mobile panels stack vertically at a fixed aspect ratio (roughly 7:6 each), while desktop uses a wider cinematic ratio. Upload mobile crops separately for the best result.
- The slide’s content area (title, richtext, buttons) only appears in the carousel section. The non-carousel hero section manages its own content independently.