Image compare

Theme section

Last updated 8 months ago

Update This section was added in v1.5.0 on Oct 27, 2022. See our Changelog and theme update guide to learn more.

The Image compare section shows a side-by-side comparison of 'before' and 'after' images with a slider to reveal them.

Set up section

Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.

Editing a template changes all pages that use that template. To edit specific pages, you can create new templates or insert dynamic content with metafields

STEPS

In your theme editor (Customize):

Select a Template to edit from the dropdown menu in the top bar.
Learn how to use templates in our Templates guide.
Under Template, click (+) Add section and select Image compare.
Click and hold the drag-and-drop handles ⋮⋮ to re-order your sections.

Add before and after images

Upload an image to both the "Before" and "After" blocks. You can edit the Filter effects, Colors, and image Labels.

We recommend images with the same dimensions and similar composition to best reveal the differences between them.

STEPS

In your theme editor (Customize):

Click on the Before or After block to open the settings.
Under Image, use the Select image button to add an image featuring multiple products.
There are no required image dimensions but we recommend both images have the same dimensions.
Images with a minimum width of 2500px will help ensure optimal quality across devices.
Use Image focal points to specify the main focus of your images. The focal point of your image will remain centered and within frame when your site adapts to different screen sizes.
See our image guide to learn more about specifying a focal point for an image used within a section or for an uploaded image file when used anywhere on your site.
(Optional.) Select one of 7 Filter effects to apply to the image.
Available filters: Blur, Brightness, Contrast, Grayscale, Invert, Saturate, Sepia.
Use the Filter amount slider to increase or decrease the degree of the filter effect.
Change the Overlay color and Overlay opacity using the slider to increase the contrast between the text and slide image.
These settings help make your text clear and readable.
Set the Opacity to 100% to create a solid color slide. This helps avoid images that include text in the image itself, which are not responsive or recommended.
(Optional) Click the Overlay gradient option to add a color overlay that fades across a range of hues.
You can choose the style, angle, position, and opacity of the gradient. See Shopify's color gradient guide ↗ to learn more.
Enter Label text to display on the image.
Select a Label position to move the label to a different part of the image.
Uncheck Show label to hide the label.
Under Color, use the color selectors to change the label Background and Text colors.
We recommend using WebAIM's contrast checker when matching colors to make sure your text is clear and readable for everyone.
Repeat steps 1 - 8 for both "Before" and "After" blocks.
See the Section image styles to edit the position, shape, and Image reveal direction for both images.
Click Save.

Change image compare style

Click on the Image compare section to find settings for image Position, Aspect ratio (shape), and the Image reveal slider.

STEPS

In your theme editor (Customize):

Click on the Image compare section to open the settings.
Choose an Image position to display the image reveal block to the Left, Right, or Below the section headings.
Select the Image aspect ratio to crop your images to Square, Landscape, or Portrait.
The Natural setting displays the original shape of your image.
Choose to set the Image reveal direction to Horizontal or Vertical to let customers reveal the image from left to right or top to bottom.
Use the Max width for image slider to limit the maximum width of the combined "Before" and "After" images.
Use the Color selector to change the color of Reveal slider and Reveal slider arrows.
Click Save.

Section content

Add headings

Add a section Heading and Subheading. You can edit their Text alignment and the Heading size.

STEPS

In your theme editor (Customize):

Click on the Image compare section to open the settings.
Enter Heading text to display a section title.
we recommend one to three words.
Set the Heading size to Small, Medium, or Large.
Enter Subheading text to display beneath the heading.
We recommend one to three short sentences.
Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's Rich text editor guide ↗.
Click Save.

Add button

Add a Button block to link to your collections or products or any other page with a custom label.

STEPS

In your theme editor (Customize):

Click on the Image compare section to open the settings.
Select or paste a URL for the Button link.
Enter text for the Button label.
The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"
Select a Button style: either Solid, Outline, or Text.
The button uses the theme-wide button color set in the Theme settings.
Click Save.

Section style

Adjust the overall section style by changing the Padding around the section content, and add an optional Top divider to clearly separate sections.

STEPS

In your theme editor (Customize):

Click on the Image compare section to open the settings.
Choose to Enable animation to show visual effects when scrolling, hovering, or interacting with the section.
Learn more about Section animations in Stiletto.
Choose to display a Top divider that separates sections with a Solid line.
The Top divider uses the color of Lines and borders set in the Theme settings.
Select a Padding option to change the spacing between sections. Choose between Top and bottom, Top only, Bottom only, or set it to None.
Click Save.

Settings reference

Click the Image blocks to find the following settings.

Before and After blocks

Setting

Description

Image

Upload images for the before and after blocks. We recommend images with the same dimensions and similar composition to best reveal the differences between them. A minimum width of 2500px will help ensure optimal quality across devices.

Image focal point

Select the most important part of your image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes. You can specify a focal point for an image used within a section or for an uploaded image file. Learn more in our Image settings guide.

Filter effect

Select one of graphical effects to apply to the image. Available filters: Blur, Brightness, Contrast, Grayscale, Invert, Saturate, Sepia.

Filter amount

Use the slider to increase or decrease the degree of the filter effect.

Overlay

Select a color to overlay the image. This option helps provide contrast with text and headings to keep them clear and readable.

Overlay gradient

Add a color overlay that fades across a range of hues. You can choose the style, angle, position, and opacity of the gradient. See Shopify's color gradient guide ↗ to learn more.

Overlay opacity

Use the slider to adjust the transparency of the overlay color. Set the opacity to 0% to turn off the overlay color. If set to 100%, the overlay will be opaque.

Show label

Choose to show 'Before' and 'After' labels.

Label

Change the default text of the labels.

Label position

Select a position for the label on the images.

Label text color

Select the color of the label text.

Label background color

Select the color of the label background.

Click the Image compare section to find the following settings.

Section layout

Setting

Description

Image position

Display the Before/After image to the Left, Right, or Below the section headings.

Image aspect ratio

Crop the shape of your images to Square (1:1), Landscape (3:2), or Portrait (2:3). Choose Natural to display the original image shape.

Image reveal direction

Select Horizontal or Vertical to reveal the images from left to right or top to bottom.

Max width for image

Use the slider to limit the maximum width of the combined "Before" and "After" images.

Color

Setting

Description

Reveal slider

Select the color for the divider line and icon for revealing the images.

Reveal slider arrows

Select the color of the arrows of the slider icon.

Section content

Setting

Description

Text alignment

Align section headings to the Left, Right, or Center.

Heading

Add text to show a main heading above the section.

Heading size

Change the font size of the heading to Small, Medium, or Large.

Subheading

Add text to show a subheading below the main heading.

Button link

Select or paste a URL for a button.

Button label

Enter text to display as the button label. The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now).

Button style

Choose a style for the button. Select Solid, Outline, or Text.

Section style

Setting

Description

Enable animation

Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See the Animation guide to learn more.

Top divider

Show a solid border above the section to visually separate it from other sections. The Top divider uses the Lines and borders color selected in the theme color settings.

Padding

Add a margin of space around the section to either the Top and bottom, Top only, Bottom only, or set it to None.

Related links
Image hero Image hero split Image with text Image with text split