Image comparison slider

Image comparison slider shows 2 images next to each other which let customers see the differences between them.

You can setup 2 individual pairs of images for mobile and desktop.

Steps:

  1. In your Shopify admin, go to Online Store ==> Themes.

  2. Click Customize.

  3. Locate Image comparison slider.

  4. Change images.

  5. Click Save.

Section settings

Section header and General

Use the provided text fields to add a suitable heading/subheading/description. Leave any of them blank if you do not want to display them.

Adjust the text alignment (left/center/right) along with the background color and container type.

Layout: You can choose among Fluid Container, Stretch width, Full width for the layout or just leave it with the default layout of the video.

Color schema: You are allowed to change text color, background color, etc. with preset color.

Height image: Adjust the height of the slider to fit the visual layout and content requirements of your webpage or presentation.

Section padding

Section padding allows you to specify the space between this section and the preceding or following sections, or both.

Block settings

Select distinct images for the slider to be displayed on desktop and mobile devices separately, ensuring optimal visual compatibility and user experience across different screen sizes.

Last updated