Where to find it
In Online Store → Themes, open the unpublished theme editor, choose a compatible template, then Add section → Promo banner. Availability follows the selected template and section group.
This section is not available in the Header group.
Set it up
- Choose Media type. Select Desktop image and optional Mobile image, or choose a Shopify-hosted Video.
- Set desktop and mobile heights and media positions before placing text.
- Add Heading, Text, Button or other supported content blocks. Promotion badge, Countdown and Promo code blocks are available for genuine offers.
- Set Desktop position, Mobile position and Content width. Adjust overlay and card opacity to keep content readable.
- Open every button in preview and verify any advertised discount or deadline separately in Shopify.
Main settings to review
| Setting | Choices or control |
|---|---|
| Media type | Image · Shopify-hosted video |
| Desktop image | Choose an image |
| Mobile image | Choose an image |
| Desktop height | 280–800 px; step 20 |
| Mobile height | 280–700 px; step 20 |
| Mobile position | Top left · Top center · Top right · Center left · Center · Center right · Bottom left · Bottom center · Bottom right |
| Overlay opacity | 0–90 %; step 5 |
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
- For a full-width desktop banner, an original around 2000–2400 px wide is a useful starting point. Use a separately composed portrait mobile image when the subject would otherwise crop badly.
- Keep headings and buttons as editable blocks. Promo code displays a code; it does not create the discount. There is no promotion-progress block in this version.
Check the mobile layout
- Use the mobile height, media position, content position and content padding controls together. Check text does not cover the main subject.
Common questions and fixes
- The photo is selected but text is absent: add child content blocks.
- The wrong media appears: check Media type and the corresponding image/video field.
- A code does not discount checkout: create and validate the actual code in Shopify.
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 (30)
| 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 | 280–800 px; step 20 | Default: 600. |
| Size / Mobile height | 280–700 px; step 20 | Default: 560. |
| Background / Media type | Image · Shopify-hosted video | Default: Image. |
| Background / Desktop image | Choose an image | Default: Not set. This control appears only when the relevant layout or related option is selected. |
| Background / Mobile image | Choose an image | Default: Not set. Uses the desktop image when left blank. This control appears only when the relevant layout or related option is selected. |
| Background / 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. |
| Background / Video | Choose a Shopify-hosted video | Default: Not set. This control appears only when the relevant layout or related option is selected. |
| Background / Desktop media position | Top left · Top center · Top right · Center left · Center · Center right · Bottom left · Bottom center · Bottom right | Default: Center. |
| Background / Mobile media position | Top left · Top center · Top right · Center left · Center · Center right · Bottom left · Bottom center · Bottom right | Default: Center. |
| Background / Background color | Choose a color | Default: #2f4739. |
| Background / Background opacity | 0–100 %; step 5 | Default: 100. |
| Background / Overlay color | Choose a color | Default: #000000. |
| Background / Overlay opacity | 0–90 %; step 5 | Default: 30. |
| Content / Desktop position | Top left · Top center · Top right · Center left · Center · Center right · Bottom left · Bottom center · Bottom right | Default: Center left. |
| Content / Mobile position | Top left · Top center · Top right · Center left · Center · Center right · Bottom left · Bottom center · Bottom right | Default: Center. |
| Content / Content width | 320–1000 px; step 20 | Default: 600. |
| Content / Desktop outer padding | 0–120 px; step 4 | Default: 64. |
| Content / Mobile top/bottom padding | 0–60 px; step 4 | Default: 20. |
| Content / Desktop content padding | 0–80 px; step 4 | Default: 36. |
| Content / Mobile content padding | 0–48 px; step 4 | Default: 24. |
| Content / Gap between blocks | 0–40 px; step 2 | Default: 16. |
| Content / Text color | Choose a color | Default: #ffffff. |
| Content card / Card color | Choose a color | Default: #183127. |
| Content card / Card opacity | 0–100 %; step 5 | Default: 85. |
| Content card / Corner radius | 0–48 px; step 4 | Default: 16. |
| 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. |