Multipurpose theme documentation
Multipurpose Fashion Theme
Image Comparison
Multipurpose Fashion Theme
Theme: Multipurpose Fashion Theme
Help Center > Sections & Blocks > Image & Media Sections > Image Comparison
Overview
The Image comparison section displays a before/after slider. Customers drag, tap, or use the keyboard to reveal one image over another. Use it for product transformations, renovations, or visual comparisons. Supports two Image blocks (Before and After), optional labels, style controls, and RTL.
Where to Add This Section
- Go to Online Store > Themes > Customize.
- Select Homepage or the desired template.
- Click Add section.
- Choose Image comparison.
- Save.
📷 Image placeholder: Add a screenshot of Image comparison with the before/after handle visible.
Quick Setup (3 Steps)
- Add Image blocks - Add two Image blocks: one for Before, one for After.
- Upload images - Upload images (same dimensions recommended).
- Configure slider - Set initial position, labels, and style.
Section Settings
| Setting | Description | Default |
|---|---|---|
| Heading | Section title | Blank |
| Heading size | Small, Medium, Large | Medium |
| Heading alignment | Left, Center, Right | Left |
| Container width | Page, Large, Full | Page |
| Desktop height | Section height on desktop | 600px |
| Mobile height | Section height on mobile | 400px |
| Aspect ratio | Natural, 1:1, 4:3, 16:9 | Natural |
| Initial slider position | Starting position (0 to 100%) | 50% |
| Slider style | Classic, Minimal | Classic |
| Handle color | Color for the handle line and circle | #ffffff |
| Show labels | Show Before/After label chips | On |
| Before label text | Label text for Before | Before |
| After label text | Label text for After | After |
| Label position | Top, Center, Bottom | Center |
| Label background color | Background color for label chips | #000000 |
| Label background opacity | Opacity for label chip background | 30% |
| Enable animation | Animate handle movement and reveal | On |
| Animation duration | Animation speed in milliseconds | 300ms |
| Enable border radius | Rounded corners | Off |
| Enable shadow | Drop shadow | Off |
| RTL support | Automatically flips behavior for RTL languages | On |
| Padding top | Space above the section | 40px |
| Padding bottom | Space below the section | 40px |
Blocks: Image
| Block | Role | Description |
|---|---|---|
| Image (first) | Before | Base image |
| Image (second) | After | Revealed image |
Each Image block supports:
- Image
- Alt text (recommended)
- Label override (optional, overrides the section label for that block)
Step-by-Step Setup
- Add the Image comparison section.
- Add two Image blocks and upload your Before and After images.
- Set Initial slider position (example: 50%).
- Enable Show labels and customize label text if needed.
- Choose Slider style and Handle color.
- Save.
Keyboard Controls
- Tab: Focus the slider control.
- Left / Right Arrow: Move the slider.
- Home: Jump to 0%.
- End: Jump to 100%.
For merchants
- Use the same dimensions for Before and After images for the cleanest results.
- Add meaningful Alt text to both images for accessibility.
- On mobile, customers can tap to reposition the slider and drag to refine.
- If labels are hard to read, increase Label background opacity or adjust the background color.
Troubleshooting
- Images look misaligned: Use images with identical dimensions and similar focal points.
- Handle feels jumpy: Disable Enable animation or reduce duration.
- Labels are not visible: Turn on Show labels.
FAQ
No. The section supports exactly two Image blocks (Before and After).
It sets the background color of the Before/After label chips. Use Label background opacity to adjust visibility.
Yes. Customers can tap to move the slider and drag to fine-tune.
The slider uses a native range input. Tab to focus it, then use Left/Right arrows, Home, and End.