Multipurpose theme documentation
Multipurpose Fashion Theme
Sections Hero Banner
Multipurpose Fashion Theme
Theme: Multipurpose Fashion Theme
Help Center > Sections & Blocks > Hero & Banner Sections
Overview
Hero and banner sections create the top-of-page impact for your homepage and key campaign pages. They display large images, video, text overlays, and promotional messaging. This theme includes several feature-emphasis sections; choose the one that fits your brand and content. This guide is for merchants, prospective merchants, and theme reviewers.
Sections in This Category
| Section | Description | Blocks | Documentation |
|---|---|---|---|
| Hero (optional slides) | Full-width image or video slides with overlaid text | Overlaid Hero Slide | Hero (Optional Slides) |
| Video hero | Single video background with heading and CTA | None | Video Hero |
| Image (optional slides) | Image-only slideshow (carousel) | Overlaid Hero Slide | Image (Optional Slides) |
| Split (optional slides) | Split layout: image on one side, text on other | Slide | Split (Optional Slides) |
| Large image with text box | One large image with text overlay | None | Large Image with Text Box |
| Scrolling text | Marquee-style scrolling announcement | None | Scrolling Text |
| Countdown | Countdown timer with background image | Content, Timer, Button | Countdown |
📷 Image placeholder: Add a screenshot of a hero section on the homepage.
Hero (Optional Slides)
Full-width slideshow with optional text overlay. Each slide can have subheading, heading, text, links, and image. See Hero (Optional Slides) for detailed documentation.
Blocks
Overlaid Hero Slide - Add one block per slide.
| Block setting | Description |
|---|---|
| Subheading | Small text above heading |
| Heading | Main headline |
| Text | Body text |
| Links | Buttons or links |
| Image | Slide background image |
| Mobile image | Optional separate mobile image |
| Text protection | Overlay for readability on busy images |
| Alignment | Left, Center, Right |
Section settings
| Setting | Description |
|---|---|
| Full width | Stretch to viewport |
| Desktop height | Slide height on desktop |
| Mobile height | Slide height on mobile |
| Animation type | Slide, Fade |
| Navigation style | Dots, Arrows, None |
| Auto play | Rotate slides automatically |
| Auto interval | Seconds between slides |
| Enable drag | Swipe/drag on mobile |
| Pause on hover | Pause when cursor over (desktop) |
📷 Image placeholder: Add a screenshot of Hero optional slides section settings and block.
Video Hero
Single video background with text overlay. Use for a cinematic, high-impact welcome.
Section settings
| Setting | Description |
|---|---|
| Heading | Main headline |
| Subheading | Text above heading |
| Button text / link | CTA button |
| Video | Upload or URL (YouTube, Vimeo) |
| Text protection | Overlay for text readability |
| Height | Section height (desktop, mobile) |
| Text alignment | Left, Center, Right |
Image (Optional Slides)
Image-only carousel. Use for lookbooks, campaigns, or minimal hero content without text overlay.
Blocks
Overlaid Hero Slide - Image and optional link per slide.
Section settings
Similar to Hero optional slides: full width, height, auto play, navigation, etc.
Split (Optional Slides)
Split layout: media on one side, text on the other. Supports slides for multiple splits.
Blocks
Slide - Image, color scheme, subheading, heading, text, buttons per slide.
Section settings
Full width, height, navigation, autoplay, animation.
Large Image with Text Box
One large background image with a text box overlay. Simpler than a slideshow.
Section settings
| Setting | Description |
|---|---|
| Subheading, Heading, Text | Content |
| Button label / link | CTA |
| Image | Background image |
| Layout | Image left/right, text position |
| Section height | Desktop and mobile |
| Enable parallax | Parallax scroll effect |
| Horizontal / vertical alignment | Text box position |
Scrolling Text
Marquee-style banner for announcements (sale, free shipping, etc.).
Section settings
| Setting | Description |
|---|---|
| Text | Scrolling message |
| Link | Optional URL for whole banner |
| Text size | Font size |
| Add spacing | Space between repeated text |
| Direction | Left to right, Right to left |
| Speed | Scroll speed |
| Color scheme | Background and text |
Countdown
Countdown timer with optional background image. Ideal for limited-time offers.
Blocks
| Block | Purpose |
|---|---|
| Content | Heading, text |
| Timer | Countdown display |
| Button | CTA |
Section settings
Layout, full width, height, background image, overlay, color scheme, animation.
Important: Set Countdown timezone (or equivalent) so the timer expires correctly for your audience.
📷 Image placeholder: Add a screenshot of Countdown section with background image and timer.
For merchants
- Use a hero or video hero for strong first impression.
- Keep hero text short; use clear CTAs.
- Enable text protection on busy images for readability.
- Test on mobile - hero height and parallax may need adjustment.
FAQs
Hero (Optional Slides) - Multiple slides, autoplay, navigation. Best for campaigns with several messages. Large Image with Text Box - Single image, simpler. Best for one clear message.
FAQs - Simple Q&A (question + answer). Advanced Accordion - Rich content (HTML, links). Use FAQs for support; use Accordion for product details, size guides.
Set a separate Mobile image in the slide block for better mobile display. Or adjust Desktop/Mobile height in section settings.
Countdown is a separate section with its own blocks. For hero + countdown, add both sections and place Countdown below the hero.