The Image comparison section makes it possible for you to add a section where your customers can compare the images by sliding a slider. That way you can show perfect before and after samples!
To activate this section you first have to add the section to your page. This can be done in a few small steps.
1) Click on 'add section' which can be found in your left sidebar
2) Scroll down, or search for 'Image comparison', then click on 'Image comparison'.
3) Done, your Image comparison section is added.
General settings
The general settings contains the settings for the styling, layout and the setup of the 'Image comparison' section.
Simply click on the 'section' to open the settings.
On the right sidebar, the following settings will show
Before image:
Set the image that will be used for the 'Before picture' in your 'before/after' slider.
We recommend an image with a 3:2 aspect ratio for the best result.
After image:
Set the image that will be used for the 'After picture' in your 'before/after' slider.
We recommend an image with a 3:2 aspect ratio for the best result.
Drag button/line color scheme:
Set the color scheme for the drag button and the line within the image comparison element.
Drag direction:
In which direction should the button be dragged?
Initial drag position:
On what position should the drag button sit? It's defaulted on 30%. So 70% of the 'after' photo will already be revealed.
Show labels:
Enable this if you want a label in the before and after picture. This label contains text.
Before image label:
Set the text for the before label here, we recommend using 'Before'.
After image label:
Set the text for the afterlabel here, we recommend using 'After'.
Heading position:
Configure the position of the heading text. You can choose between left and center.
Heading size:
Select the size of the heading from a range of small to extra large.
Heading:
Fill in the title of the section. Don't want to show a title? Simply leave the field empty!
Text:
This will be the text that will be shown in this section.
Button label:
This text will show on the button, for example: 'All categories'
Link:
Enter a link for the button, for example to the full collection page.
Button color scheme:
Select the color scheme for the button.
Show link instead of a button:
Check this box if you don't want a button to show, but only a clickable text.
Bottom spacing desktop/mobile:
Set the spacing on the bottom for desktop and mobile.
That way you will get the amount of whitespace below the element you want. The default for desktop is 50px and the default for mobile is 30px.