Plugin Details
Home / Plug-in market / Comparison Image Decoration Module
Comparison Image Decoration Module
Comparison Image Decoration is a BeikeShop plugin. adds a 'before & after' module to the admin design builder. It helps merchants manage multilingual content more efficiently.
View more
0 Downloads
625 Views
2026-08-20 Last Update
$5.74
$8.68
One-time purchase for lifetime use, with 1 months of technical support included
Plugin Purchase Process
1
Access your BeikeShop admin dashboard
2
Click on "Plugin Marketing" in the top right corner
3
Select the desired plugin for purchase
4
Click on Purchase
Plugin Description
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
