Image comparison

The Image Comparison section allows you to showcase a side-by-side visual comparison using a slider to reveal the "Before" and "After" images.

This section is ideal for highlighting transformations, product effects, or service results. Its interactive slider feature engages users, making it a powerful tool for storytelling and enhancing credibility.

1, How to add section in theme editor:

1

In your theme editor (Customize), scroll to the bottom of the template and select Add section.

2

In the list, locate and select Image comparison section. The section will now be added to your page, ready for customization.

2, Section settings

• Layout:

Standard

The header and description appear above the "Before" and "After" images. Suitable for designs that require a focus on introductory content.

Split

• Image height: Controls the vertical dimensions of the "Before" and "After" images.

  • Small: Compact height, suitable for concise comparisons.

  • Medium: Balanced height that works well for most layouts.

  • Large: Tall images for dramatic comparisons or detailed visuals.

3, Block settings:

Each section consists of two blocks: Before and After. The layout ensures that: The Before block always appears on the left. The After block always appears on the right.

• Before block:

  • Image: Upload the "Before" image.

  • Mobile image: Upload an image optimized for mobile displays. If not uploaded, the desktop image will be used.

  • Image overlay opacity: Adjust the transparency of the overlay on the image (0% to 100%).

  • Label: Add a descriptive label to identify the image, such as “Before” or a more specific descriptor. Examples: “Before Treatment,” “Original,” or “Day 1.” If left blank, the label will not display.

  • Label position: Choose the placement of the label: Top left, Middle left, Bottom left.

• After block

  • Image: Upload the "After" image.

  • Mobile image: Upload an image optimized for mobile displays. If not uploaded, the desktop image will be used.

  • Image overlay opacity: Adjust the transparency of the overlay on the image (0% to 100%).

  • Label: Add a label to describe the image, such as “After” or another specific term. Examples: “After Treatment,” “Enhanced,” or “Final Result.” If left blank, the label will not appear.

  • Label position: Choose the placement of the label: Top right, Middle right, Bottom right.

Note: We recommend:

• To achieve a smooth comparison, ensure that both images have the same dimensions and similar composition. Use identical lighting and framing for a more realistic comparison.

• Experiment with overlay opacity to enhance text visibility without overshadowing the images.