Plugin Details
Home / Plug-in market / Comparison Image Decoration Module
Comparison Image Decoration Module
Image Compare Decoration Module
Overview
Image Compare is a plugin that adds a before-and-after comparison image module to the admin "Design → Decoration" builder. Upload a "front image" and a "back image", and the storefront overlays them into a single draggable comparison image. Visitors can drag the center handle left/right to smoothly transition between the two images, effectively showcasing before/after transformations, old vs new models, real vs fake comparisons, and more. Perfect for product upgrade showcases, effect comparisons, case studies, and similar use cases.
Key Features
🖼️ Draggable Before & After Comparison
| Feature | Description |
|---|---|
| Front + Back images | Upload two comparison images – displayed as an overlay on the storefront |
| Drag handle to compare | Visitors drag the center handle to transition between the two images in real time |
| Touch support | Fully supports touchscreen devices – slide with finger to compare |
| Keyboard control | Focus the handle and use left/right arrow keys to fine-tune the comparison position |
| Image ratio | Recommended size: 1000×500px (2:1 ratio) |
🏷️ Text Labels & Colors
| Feature | Description |
|---|---|
| Front image label | Customize the label text on the "front" side (e.g., "Before") |
| Back image label | Customize the label text on the "back" side (e.g., "After") |
| Independent text colors | Front and back labels can each have their own text color |
📝 Module Configuration Options
| Option | Description |
|---|---|
| Title | Main module title (multi-language support) |
| Description | Rich text description (multi-language support) |
| Initial handle position | Set the default handle position percentage (0–100%) – e.g., 50% shows half of each image |
| Module width | Narrow (container) / Wide (container-fluid) / Full (w-100) |
Technical Features
-
✅ Pure CSS cropping implementation : Uses
clip-pathto crop the front image – excellent performance, no flickering -
✅ Smooth dragging experience : Supports Pointer Events (unifies mouse/touch/stylus) with fallback for older devices
-
✅ Responsive design : Automatically adjusts comparison image ratio (3:2) and label positions on mobile
-
✅ Accessibility support : Handle has ARIA attributes and keyboard controls – supports screen readers
-
✅ Visual feedback : Handle subtly scales when dragging – enhances interactivity
-
✅ Any theme compatible : Frontend views are plugin-bundled – completely independent rendering
-
✅ Full design editor support : Real-time preview – handle can be dragged to test the effect
Use Cases
-
Product upgrade before/after comparison (old model vs new model)
-
Renovation/transformation effect showcase (before renovation vs after renovation)
-
Beauty/skincare effect comparison (before use vs after use)
-
Authentic vs counterfeit product identification
-
Image restoration/retouching effect display
-
Any visual display that requires "before & after" comparison
