Image compare
Theme section
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
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.
Change image compare style
Click on the Image compare section to find settings for image Position, Aspect ratio (shape), and the Image reveal slider.
Section content
Add headings
Add a section Heading and Subheading. You can edit their Text alignment and the Heading size.
Add button
Add a Button block to link to your collections or products or any other page with a custom label.
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.
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
Last updated