Where to find it
In Online Store → Themes, open the unpublished theme editor, choose a compatible template, then Add section → Split banner. Availability follows the selected template and section group.
This section is not available in the Header group.
Set it up
- Add a Banner block for each promotion and select its Image or Shopify-hosted video media.
- For image banners, configure desktop/mobile images and crop positions in each Banner.
- Add the Heading, Text and Button content inside the relevant Banner rather than outside the panel.
- Choose banners per view for desktop, tablet and mobile. Decide whether extra banners scroll horizontally or wrap to another row.
- Set section heights and gaps, then review the content positions and all panel links.
Main settings to review
| Setting | Choices or control |
|---|---|
| Desktop height | 320–900 px; step 20 |
| Mobile banner height | 280–800 px; step 20 |
| Banners per view on desktop | 1 · 2 · 3 · 4 · 5 · 6 |
| Banners per view on mobile | 1 · 2 |
| When banners exceed the columns | Horizontal scroll · Wrap to next row |
| Mobile gap | 0–48 px; step 4 |
Blocks and content
This section allows up to 6 direct blocks. Nested blocks have their own parent-specific choices and limits.
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.
Content and media
- Use crops designed for the width of an individual panel. Two side-by-side desktop banners often need taller originals than a single full-width hero.
Check the mobile layout
- Set one or two banners per view and choose overflow behavior deliberately. Review each banner's Mobile content position and mobile media crop.
Common questions and fixes
- A banner has no copy: add child content blocks inside that Banner.
- Extra banners appear on another row: review When banners exceed the columns.
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 (18)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Width / Section width | Page width · Full width · Custom width | Default: Full 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. |
| Size / Desktop height | 320–900 px; step 20 | Default: 600. |
| Size / Mobile banner height | 280–800 px; step 20 | Default: 480. |
| Columns / Banners per view on desktop | 1 · 2 · 3 · 4 · 5 · 6 | Default: 2. |
| Columns / Banners per view on tablet | 1 · 2 · 3 · 4 · 5 · 6 | Default: 2. |
| Columns / Banners per view on mobile | 1 · 2 | Default: 1. |
| Columns / When banners exceed the columns | Horizontal scroll · Wrap to next row | Default: Horizontal scroll. Mobile always uses horizontal scrolling. |
| 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. |
| Spacing / Desktop gap | 0–80 px; step 4 | Default: 0. |
| Spacing / Mobile gap | 0–48 px; step 4 | Default: 0. |
| Spacing / Accessibility label | Text | Default: Featured banners. |
| 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. |