Image comparison#

Let shoppers drag between two related images.

Add this section#

Select Add section > Image comparison on the template you want to edit.

Settings#

The settings below follow the same order as the theme editor.

General settings#

• Subheading: Enter the text to show.

• Heading: Enter the text to show.

• Text: Enter and format the text.

• Button label: Enter the text to show.

• Link: Choose the page or address to open.

• Color scheme: Choose a color scheme from Theme settings > Colors.

• Start position: Use the slider from 10 to 90 %. How much of the first side shows before the shopper drags.

First side#

• Label: Enter the text to show.

• Image: Choose an image from your library. Use two pictures taken from the same position, so the product lines up across the split. 2400 x 1350px recommended, the same for both images.

• Color scheme: Choose a color scheme from Theme settings > Colors.

Second side#

• Label: Enter the text to show.

• Image: Choose an image from your library. For a clear result, use an image around 2400 x 1350px.

• Color scheme: Choose a color scheme from Theme settings > Colors.

Mobile layout#

• Height: Choose Small, Medium, or Large.

Blocks#

Comparison row#

General settings#

• Label: Enter the text to show.

• First side: Enter the text to show.

• Second side: Enter the text to show.

Tips#

• Add your real content before fine-tuning spacing and colors.
• Check the section at both computer and phone widths. Use Mobile layout for the phone-specific choices.