Where to find it
In Online Store → Themes, open the unpublished theme editor, choose a compatible template, then Add section → Editorial story. Availability follows the selected template and section group.
This section is not available in the Header group.
Set it up
- Choose Split, Layered or Full image and select the Main media position.
- Select Media type and its image or video. For video, match Video source to the hosted-video or external-URL control.
- Add the story's Heading, Rich text and Button as content blocks.
- Enable supporting media only when needed, choosing an Image or Product and its position and width.
- Adjust content alignment, spacing and overlay, then set the mobile content order. If using a click-to-play video, test its cover again after moving the section in the editor.
Main settings to review
| Setting | Choices or control |
|---|---|
| Layout | Split · Layered · Full image |
| Media type | Image · Video |
| Video source | Shopify-hosted video · YouTube or Vimeo |
| Show supporting media | On / Off |
| Media type | Image · Product |
| Content order | Image first · Content first |
Blocks and content
The following content blocks have their own setup and control reference. Nested blocks belong inside their parent, such as Slide, Tab, Tile or Story chapter.
App content requires a compatible installed app. Its setup and support come from that app; the theme does not supply the app service.
Content and media
- Use an editorial photo with room for the selected composition. Provide a cover image for a click-to-play video.
- Supporting Product media refers to an actual selected product. Use a separate supporting Image for an independent decorative photo.
Check the mobile layout
- Choose Image first or Content first. Check that layered supporting media does not obscure the main image or text at narrow widths.
Common questions and fixes
- A supporting image is missing: enable Show supporting media and choose its matching media type.
- The video does not play: verify its source selection and URL or uploaded video.
Full control reference
Names, choices, ranges and defaults below are read from this version of the theme. Defaults are starting examples, not promises about your business. Some controls appear only for the matching layout. Block contents and preset starting values can differ from the base defaults.
All section controls (44)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Width / Section width | Page width · Full width · Custom width | Default: Page width. |
| Width / Custom width | 50–100 %; step 5 | Default: 80. Percentage of screen width. This control appears only when the relevant layout or related option is selected. |
| Layout / Layout | Split · Layered · Full image | Default: Layered. |
| Layout / Main media position | Left · Right | Default: Left. This control appears only when the relevant layout or related option is selected. |
| Layout / Overlay content position | Left · Center · Right | Default: Left. This control appears only when the relevant layout or related option is selected. |
| Layout / Main media width | 40–70 %; step 5 | Default: 60. This control appears only when the relevant layout or related option is selected. |
| Layout / Media and content gap | 0–80 px; step 4 | Default: 0. This control appears only when the relevant layout or related option is selected. |
| Layout / Corner radius | 0–40 px; step 2 | Default: 16. |
| Main media / Media type | Image · Video | Default: Image. |
| Main media / Image | Choose an image | Default: Not set. This control appears only when the relevant layout or related option is selected. |
| Main media / Alt text | Text | Default: Not set. This control appears only when the relevant layout or related option is selected. |
| Main media / Video source | Shopify-hosted video · YouTube or Vimeo | Default: Shopify-hosted video. This control appears only when the relevant layout or related option is selected. |
| Main media / Video | Choose a Shopify-hosted video | Default: Not set. This control appears only when the relevant layout or related option is selected. |
| Main media / Video URL | YouTube / Vimeo URL | Default: Not set. This control appears only when the relevant layout or related option is selected. |
| Main media / Playback | Click to play · Autoplay muted | Default: Click to play. This control appears only when the relevant layout or related option is selected. |
| Main media / Cover image | Choose an image | Default: Not set. Optional. A Shopify-hosted video's original cover is used when this is blank. This control appears only when the relevant layout or related option is selected. |
| Main media / Loop video | On / Off | Default: On. This control appears only when the relevant layout or related option is selected. |
| Main media / Show video controls | On / Off | Default: Off. This control appears only when the relevant layout or related option is selected. |
| Main media / Media ratio | Natural · Portrait · Square · Landscape · Wide | Default: Portrait. |
| Supporting media / Show supporting media | On / Off | Default: On. |
| Supporting media / Media type | Image · Product | Default: Image. This control appears only when the relevant layout or related option is selected. |
| Supporting media / Image | Choose an image | Default: Not set. This control appears only when the relevant layout or related option is selected. |
| Supporting media / Alt text | Text | Default: Not set. This control appears only when the relevant layout or related option is selected. |
| Supporting media / Product | Choose a product | Default: Not set. Used when Media type is Product. |
| Supporting media / Supporting media width | 20–50 %; step 5 | Default: 35. This control appears only when the relevant layout or related option is selected. |
| Supporting media / Media position | Top left · Top right · Bottom left · Bottom right | Default: Bottom right. This control appears only when the relevant layout or related option is selected. |
| Content / Vertical alignment | Top · Center · Bottom | Default: Center. |
| Content / Content padding | 0–100 px; step 4 | Default: 48. |
| Content / Block spacing | 0–48 px; step 2 | Default: 16. |
| Content / Image overlay | 0–90 %; step 5 | Default: 55. This control appears only when the relevant layout or related option is selected. |
| Content / Overlay text color | Choose a color | Default: #ffffff. This control appears only when the relevant layout or related option is selected. |
| Mobile / Content order | Image first · Content first | Default: Image first. This control appears only when the relevant layout or related option is selected. |
| Media / Section background image | Choose an image | Default: Not set. |
| Media / Section background position | Image focal point · Top · Center · Bottom | Default: Image focal point. This control appears only when the relevant layout or related option is selected. |
| Media / Section background behavior | Scroll with section · Fixed to viewport | Default: Scroll with section. This control appears only when the relevant layout or related option is selected. |
| Media / Section background overlay | 0–80 %; step 5 | Default: 0. This control appears only when the relevant layout or related option is selected. |
| Style / Color scheme | Choose a color scheme | Default: background. |
| Style / Top padding | 0–160 px; step 4 | Default: 64. |
| Style / Bottom padding | 0–160 px; step 4 | Default: 64. |
| Style / Mobile padding top | 0–120 px; step 4 | Default: 40. |
| Style / Mobile padding bottom | 0–120 px; step 4 | Default: 40. |
| Advanced / Hide on desktop | On / Off | Default: Off. This control appears only when the relevant layout or related option is selected. |
| Advanced / Hide on mobile | On / Off | Default: Off. This control appears only when the relevant layout or related option is selected. |
| Advanced / Section anchor | Text | Default: Not set. Optional. Use a unique name for links that jump to this section. |