Wonpa docs

Appearance

Hero dynamic carousel ​

A full-width slideshow for the top of a page. Each slide carries its own image or video, heading, copy, and up to two buttons. Use it as the homepage opener when you want to rotate through several campaigns or product stories.

The homepage hero carousel with heading, copy, and two buttons over a full-bleed image

The section holds one carousel per page and takes up to six slides. Add it under Add section → Hero dynamic carousel, then add a Slide block for each panel.

Building a slide ​

Each Slide block has three groups of settings: Media, Layout, and Content.

  1. Under Media, set Desktop image. This shows on screens above 768px wide and, for a hosted video, doubles as the poster frame.
  2. Set Mobile image for a taller crop on phones. Leave it blank to reuse the desktop image.
  3. Under Content, write the Eyebrow / subtitle, Heading, and Description.
  4. Under Buttons, fill in the Primary button and Secondary button — each needs a Button label and a Button link to appear.

Note: A slide only renders a button when both its label and link are set. Leave the link blank to hide that button.

Video slides ​

A slide can play a background video instead of a still. Set one source under Media:

  • Desktop video (YouTube or Vimeo) — paste the watch URL.
  • Desktop video (hosted) — upload an .mp4 from your Shopify files.

Video plays muted, loops, and shows no player controls. There is no sound. The first slide's video starts on load; moving to another slide plays that slide's video and pauses the one you left. Set the Desktop image as well — a hosted video uses it as its poster frame, and it stands in wherever the video can't play.

Note: Autoplay respects the visitor's reduced-motion setting. When reduced motion is on, videos don't start and the carousel doesn't advance on its own.

Layout per slide ​

Text position places the text block in one of nine spots — for example Middle left or Bottom center. Overlay darkness sets a black wash over the media from 0 to 90%, which keeps light text readable on a busy photo. Text background style adds a panel behind the text: Semi-transparent black or Glassmorphism, or None for text straight on the media.

Motion and navigation ​

These are section-level settings, applied to every slide.

  1. Transition style — Smooth fade or Parallax slide.
  2. Enable autoplay advances slides on a timer. Autoplay interval sets the gap between slides, from 3000 to 9000 ms.
  3. Show navigation arrows and Show dot indicators toggle the two control styles.

Autoplay pauses while a visitor hovers the hero or gives a control keyboard focus, and while the hero is scrolled out of view. It resumes when they move away. Arrows and dots only appear when there's more than one slide. Arrows sit hidden until the visitor hovers or tabs into the hero, and they're replaced by swipe on mobile. The left and right arrow keys step between slides.

Heading levels ​

The heading of the first slide becomes the page's <h1> — but only when the carousel is the first section on the homepage. Every other slide heading, and the whole carousel on any other page, uses <h2>. This keeps one H1 per page without any setting to manage.