Image comparison

This section is a powerful way to visually demonstrate value and impact, helping customers quickly understand product effectiveness.

---

The Image comparison section allows you to display a side-by-side comparison between two images (typically Before and After). This is especially useful for showcasing transformations, product results, or visual improvements.

1. Our guide to set up a Image comparison section:

Steps:

• In the theme editor, click Add section.

• Locate Image comparison.

• Click Save.

2. Section settings

• Heading: Add a title to introduce the comparison (e.g., See the difference).

• Heading size: Adjust the prominence of the heading.

• Button label & Button link: Add a call-to-action button below or near the section.

• Use outline button style: Switch between solid and outline button styles.

• Image settings:

  • Desktop image height: Set the height of comparison images on desktop.

  • Mobile image height: Set the height on mobile devices.

  • Adapt section height to first image size: Automatically adjusts the entire section height based on the first image’s original ratio. This setting overrides manual height settings when enabled.

• Corner radius: Applies rounded corners to the section container and “Before” and “After” labels

3. Before block settings

Represents the “before” state in the comparison.

• Image / Mobile image: Upload separate images for desktop and mobile.

• Image overlay opacity: Add a dark overlay to improve label visibility.

• Label: Add a label (e.g., Before).

• Label position: Position the label vertically on the left side.

• Colors: Customize label appearance for contrast and branding.

  • Label background

  • Text color

4. Before block settings

Represents the “after” state.

• Image / Mobile image: Upload corresponding “after” visuals.

• Image overlay opacity: Adjust overlay for readability.

• Label: Add label (e.g., After).

• Label position: Position the label vertically on the right side.

• Colors: Customize label appearance for contrast and branding.

  • Label background

  • Text color