Before-After Image Widget
The Before-After Image widget is part of the Special widget category. For more information on the widgets, please refer to Widgets configuration in the visual editor.
Introduction
The Before & After widget enables you to display 2 images and compare them side by side.
This can be useful:
If you want your visitors to be presented with or a product
To compare a product (before using the product and after)
To test a new way of displaying images on your product pages
To showcase an offer (“Drag to discover your bonus”)
Configuration
Layout tab
The Before-After image widget has two available layouts:
Modal
This option enables you to display the widget as a window that appears on top of the main screen. In the layout section, select where you want your modal to be placed on the screen (9 available options).
Free placement
This option enables you to position the widget in a specific place in relation to an existing HTML element:
Click Select element.
On the page, select the element on which you want to hook the widget.
Select the appropriate option to position the widget Before, At the Start, At the End, or After the element.
Before
Fix the widget before a specific element of the page
After
Fix the widget after a specific element of the page
At the Start
Place the widget in the HTML code, at the start of the element definition
At the end
Place the widget in the HTML code, at the end of the element definition
Content tab
Required options
Option
Usage
Select the first image
Select the desired image by uploading it from your browser or by entering the image path. You must add two images.
Select the second image
Optional options
Option
Usage
Display a title
Enter a title common to both your images that will be displayed above the first image (depending on the chosen configuration) and above your message (if any).
Display a message
Enter a message common to both your images that will be displayed above the first image (depending on the chosen configuration).
Display image captions
Enter a caption for both your imported images. This caption will be displayed below each image.
Widget link type
You can decide whether your widget should contain a clickable button (to close or redirect), whether it should be entirely clickable (to close or redirect) or whether it should have no link at all.
"The button is a link": you will need to specify a button URL and a button text. The widget will display a button.
"A click on the button closes the widget": you will need to specify a button text. The widget will display a button.
"The whole widget is a link": you will need to specify a URL. The widget will not display a button.
"A click on the whole widget closes the widget": you won't need to add anything. The widget will not display a button.
"None": the widget will not be clickable. If you use a background image which looks like a "big ad", we recommend selecting "The whole widget is a link" and removing the paragraph with the editor once the widget is set.
Second CTA/link option

If you toggle on the “Add a second link” option, you can configure a second link/ CTA in your widget, the same way as the first one.
Style tab
Select the style options (Container, Border, Close button) you want to apply to your widget.
From here, you can configure the size and layout of your modal.
Conditions tab
Select the Triggering and Recurrence options you want to apply to your widget.
Last updated
Was this helpful?