The image comparison section allows you to display two images side by side, making it easy for your customers to compare them. This helps customers to see the differences or variations between products, making their shopping experience more informed and convenient.
To add this section on your store:
Go to your Shopify admin panel.
Click "Themes" and then "Customize."
Click "Add section" in the left sidebar.
Choose "Image Comparison"
Section Settings:
Before Image: Upload an image or select it from your existing Shopify library.
After Image: Image selected will be displayed as after image.
Drag button/line color scheme: Select the color scheme of the drag line:
Drag direction: Change the drag direction by selecting between horizontal or vertical. this also changes the image positions.
Before image label: Write a label in this field and it will be visible on the before image as you can see in the above screenshot.
After image label: Write a label in this field and it will be visible on the after image as you can see in the above screenshot.
Heading position: Control the position of section title/text and button, if you select center it will change the layout:
Headings:
Control the primary and secondary heading text, font size and font family.
Text: Write text for your image comparison section, default text says: "Share information and details about these images".
Button label:
This text will show on the button.'
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.
Spacing
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.