Image compare
Last updated
Was this helpful?
Last updated
Was this helpful?
The Image compare section shows a side-by-side comparison of 'before' and 'after' images with a slider to reveal them.
Editing a template changes all pages that use that template. To edit specific pages, you can or
In the editor side panel, click (+) Add section and select Image compare. Click and hold the drag handles ⋮⋮ to re-order sections.
Click the section to edit the general section styles: | |
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.
Click on the Image compare section to find settings for image Position, Aspect ratio (shape), and the Image reveal slider.
The Section header appears above the section. Add a Heading, Subheading, and optional Button.
Click section to find settings
Heading
Enter text to display a section title above the section.
Heading tag
Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. This option doesn't change the heading's appearance.
Subheading
Enter text to display a section subheading below the heading.
Button link
Select or paste a URL for the button.
Button label
Enter text to display a button label. Leave this field blank to remove the button.
Adjust the overall section style by changing the Padding around the section content, and add an optional Top divider to clearly separate sections.
Click the Image blocks to find the following settings.
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
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
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.
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.
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.
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.
Related links
Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's .
The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more,
Learn more about in Stiletto.
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 .
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 to learn more.
