How can I make the Before & After Slider widget compare images clearly without confusing users?
The most important part of this widget is image pairing clarity. If the image pair or labels are unclear, users won’t trust the comparison.
This screenshot should show the full image and label setup area.
Open your Before & After Slider widget and go to Content.
Upload a true comparison pair:
Before Image = original state
After Image = changed state
Use short, explicit labels (for example: “Before Retouch” and “After Retouch”).
Keep Show Labels enabled for first-time users.
Check that both images represent the same frame/angle to avoid misleading results.
Preview interaction and confirm users can understand the transformation in one glance.
Use this setting when users interact with the slider but still ask what they are looking at.
Check this if the result does not look right:
If comparison feels misleading, ensure both images are aligned and same crop.
If users misread sides, rewrite labels with clear action words.
If visuals feel noisy, simplify labels and remove extra text elsewhere on page.