Key settings
- Media type
- Desktop image
- Mobile image
- Slide 1 image
- Slide 1 mobile image (optional)
- Slide 2 image
- Slide 2 mobile image (optional)
- Slide 3 image
Theme section
Immersive media banner
Build an immersive first impression using images, slides or Shopify-hosted video and an optional content block.
Where to configure this in ShopifyOpen Online Store → Themes → Customize, select a template where the section is available, then choose Immersive media banner in the theme editor. ADLAC exposes the settings and blocks listed below. Availability depends on the selected template and the theme's section groups.
How to set it up
- Open the template or section group that uses this section.
- Choose the section and adjust its settings using the editor labels shown below.
- Add or reorder the compatible blocks listed below.
- Preview desktop and mobile, then save the theme.
Available blocks
- Content
Exact Theme Editor settings
Source: sections/image-banner.liquid (from the supplied ADLAC 1.0.0 schema-derived reference).
sections/image-banner.liquid
| Group | Setting | Type | Default | Options |
|---|---|---|---|---|
| — | Media type | select | image | Image / animated image / Slideshow / Shopify-hosted video |
| — | Desktop image | image_picker | — | — |
| — | Mobile image | image_picker | — | — |
| — | Slide 1 image | image_picker | — | — |
| — | Slide 1 mobile image (optional) | image_picker | — | — |
| — | Slide 2 image | image_picker | — | — |
| — | Slide 2 mobile image (optional) | image_picker | — | — |
| — | Slide 3 image | image_picker | — | — |
| — | Slide 3 mobile image (optional) | image_picker | — | — |
| — | Autoplay slideshow | checkbox | On | — |
| — | Change slide every | range | 5 | — |
| — | Slide transition | select | glass | Soft fade / Glass absorb / Glass sweep from left / Glass sweep from right / Diagonal glass wipe / Prism glass reveal |
| — | Transition duration | range | 900 | — |
| — | Glass blur strength | range | 18 | — |
| — | Desktop video | video | — | — |
| — | Mobile video | video | — | — |
| — | Autoplay video | checkbox | On | — |
| — | Loop video | checkbox | On | — |
| — | Mute video | checkbox | On | — |
| — | Show native video controls | checkbox | Off | — |
| — | Show play / pause control | checkbox | On | — |
| — | Media motion | select | none | None / Slow zoom / Horizontal drift / Cinematic |
| — | Motion duration | range | 16 | — |
| — | Desktop width | select | contained | Theme container / Custom width / Full width |
| — | Custom hero width (% of viewport) | range | 88 | — |
| — | Corner radius | range | 24 | — |
| — | Desktop height | range | 700 | — |
| — | Mobile layout | select | stacked | Content over media / Media above content |
| — | Mobile media height | range | 480 | — |
| — | Overlay style | select | gradient-left | Solid / Gradient from left / Gradient from bottom / Vignette |
| — | Overlay color | color | #111111 | — |
| — | Desktop overlay strength | range | 55 | — |
| — | Mobile overlay strength | range | 30 | — |
| — | Desktop text color | color | #FFFFFF | — |
| — | Mobile text color | color | #202223 | — |
| — | Mobile content background | color | #FFFFFF | — |
| — | Enable adaptive ambient glow | checkbox | Off | — |
| — | Glow source | select | media | Use colors from media / Custom color |
| — | Custom glow color | color | #FFFFFF | — |
| — | Glow strength | range | 20 | — |
Blocks
Content
| Setting | Type | Default | Options |
|---|---|---|---|
| Eyebrow | inline_richtext | New perspective | — |
| Heading | inline_richtext | Make an unforgettable first impression. | — |
| Text | richtext | Use immersive media, expressive typography, and one clear action. | — |
| Primary button label | text | — | — |
| Primary button link | url | — | — |
| Secondary button label | text | — | — |
| Secondary button link | url | — | — |
| Content position | select | middle-left | Top left / Top center / Top right / Middle left / Middle center / Middle right / Bottom left / Bottom center / Bottom right |
| Text alignment | text_alignment | left | — |
| Content width | range | 680 | — |
| Heading size | range | 88 | — |
| Mobile content position | select | bottom | Top / Center / Bottom |
| Mobile text alignment | text_alignment | left | — |
| Mobile content width | range | 420 | — |
| Mobile heading size | range | 44 | — |
| Mobile content padding | range | 24 | — |
| Use content card on mobile overlay | checkbox | Off | — |
| Hide body text on mobile | checkbox | Off | — |
| Stack buttons on mobile | checkbox | On | — |
| Content reveal | select | fade-up | None / Fade / Fade up |
| Reveal delay | range | 100 | — |
| Content style | select | none | No card / Glass / Solid |
| Content card background | color | #111111 | — |
| Glass opacity | range | 40 | — |
| Glass blur | range | 16 | — |
| Content card corner radius | range | 24 | — |
Related documentation
See the complete section reference and section overview for broader guidance.