Before/After Slider
The Before/After Slider lets customers compare two images by dragging a divider, perfect for showing product results, color comparisons, or transformations.
Settings
Section titled “Settings”| Setting | Description |
|---|---|
| Before Image | Left/first image |
| After Image | Right/second image |
| Before Label | Label for the first image |
| After Label | Label for the second image |
| Initial Position | Starting position of the divider (0-100%) |
| Orientation | Horizontal or Vertical |
Use Cases
Section titled “Use Cases”- Product before/after results (skincare, cleaning products)
- Color or finish comparisons
- Room staging comparisons
- Design variations
Best Practices
Section titled “Best Practices”- Use images of the same dimensions for best results
- Keep labels short and descriptive
- Set initial position at 50% for balanced reveal
- Ensure both images have similar lighting and composition
- The slider is touch-friendly and keyboard accessible