Multipurpose theme documentation
Multipurpose Fashion Theme
Sections Image Media
Multipurpose Fashion Theme
Theme: Multipurpose Fashion Theme
Help Center > Sections & Blocks > Image & Media Sections
Overview
Image and media sections display photos, videos, galleries, and interactive elements like image comparison and hotspots. Use them to showcase products, tell stories, or create engaging content. This guide covers all image and media sections in the theme (excluding Header and Footer). It is written for merchants, prospective merchants, and theme reviewers.
Sections in This Category
| Section | Description | Blocks | Documentation |
|---|---|---|---|
| Image hotspots | Image with clickable product hotspots | Product hotspot | Image Hotspots |
| Image comparison | Before/after slider | Image (before/after) | Image Comparison |
| Gallery | Grid of images | Image | Gallery |
| Media with text Pro | Image or video with text side-by-side | None | Media with Text Pro |
| Advanced image with text | Two images with text overlay | None | Advanced Image with Text |
| Video Pro | Standalone video with optional overlay | None | Video Pro |
📷 Image placeholder: Add a screenshot of an image section (e.g. Gallery or Media with text).
Image Hotspots
Display an image with clickable hotspots that reveal product information. Ideal for lookbooks, room scenes, or styled shots.
Blocks
Product hotspot - Each block adds a hotspot. Settings:
| Setting | Description |
|---|---|
| Product | Product to display in popover |
| Vertical position | Hotspot position (percentage) |
| Horizontal position | Hotspot position (percentage) |
| Show vendor | Show vendor in popover |
| Show cents superscript | Price display option |
Section settings
| Setting | Description |
|---|---|
| Heading | Section heading |
| Image | Main hotspot image |
| Full width | Stretch to viewport |
| Hotspot icon style | Pin style |
| Hotspot color | Icon color |
| Hotspot size | Icon size |
| Enable mobile tap | Tap to open on mobile |
| Show vendor | Global vendor display |
| Overlay opacity | Overlay on image |
📷 Image placeholder: Add a screenshot of Image hotspots with product popover open.
Image Comparison
Before/after slider. Use for product transformations, renovations, or visual comparisons.
Blocks
Image - Before and after images (two blocks or one block with both).
Section settings
| Setting | Description |
|---|---|
| Heading | Section heading |
| Container width | Full, boxed, custom |
| Desktop / mobile height | Section height |
| Aspect ratio | Image ratio |
| Initial position | Slider start position (e.g. 50%) |
| Slider style | Handle, overlay |
Gallery
Grid of images. Use for lookbooks, portfolios, or multi-product showcases.
Blocks
Image - Each block adds an image. Settings: image, link, aspect ratio.
Section settings
| Setting | Description |
|---|---|
| Heading | Section heading |
| Images per row | Desktop columns |
| Full width | Stretch to viewport |
| Grid spacing | Gap between images |
| Enable zoom | Click to zoom |
| Fade overlay | Hover overlay |
| Animation | Entry animation |
Media with Text Pro
Image or video with text content side-by-side. Flexible layout options.
Section settings
| Setting | Description |
|---|---|
| Media type | Image or Video |
| Image / Video | Media source |
| Video URL | For YouTube, Vimeo |
| Media width | 50%, 40%, 60% etc. |
| Media crop | Crop style |
| Object fit | Cover, Contain |
| Enable zoom | Hover zoom on image |
| Content | Heading, text, button |
| Layout | Media left/right |
Advanced Image with Text
Two images with text overlay. More complex layouts for creative storytelling.
Section settings
| Setting | Description |
|---|---|
| Subheading, Heading, Text | Content |
| Button label / link | CTA |
| Image 1, Image 2 | Two images |
| Image 1/2 shape | Square, rounded, circle |
| Text alignment | Left, Center, Right |
| Vertical alignment | Top, Center, Bottom |
Video Pro
Standalone video section. Use for product demos, brand videos, or tutorials.
Section settings
| Setting | Description |
|---|---|
| Video | Upload or URL |
| Poster image | Thumbnail when paused |
| Autoplay | Auto-play on load |
| Mute | Mute by default (required for autoplay) |
| Loop | Loop video |
| Show controls | Play/pause, volume |
| Click to play | Overlay play button |
| Play button style | Button appearance |
| Aspect ratio | 16:9, 4:3, etc. |
| Overlay | Color, opacity |
📷 Image placeholder: Add a screenshot of Video Pro section.
For merchants
- Use high-quality, optimized images (JPEG/WebP, appropriate size).
- Image hotspots work well for lookbooks; keep hotspot count manageable.
- Gallery and media-with-text are versatile - use for products, brand, or content.
- Video Pro: use poster image for faster perceived load; mute + autoplay for background videos.
FAQs
Gallery - Grid of images, optional zoom. Best for lookbooks, portfolios. Image Hotspots - One image with clickable product pins. Best for styled shots, room scenes.
FAQs - Simple Q&A format. Advanced Accordion - Rich content (HTML, links). Use FAQs for support questions; use Accordion for product details, size guides, policy summaries.
Browsers require videos to be muted for autoplay. Enable Mute in the video section settings.
Media with Text Pro supports one media type per section (image OR video). Add two sections if you need both.