[P] Before/After

This section helps your customers compare two products easily (such as the difference between two materials) or visualize your products' benefits. Here are some real-life use cases of this section:

  • Comparing different materials from bags or clothes
  • Visualizing the effect on the skin for a cosmetic

Adding the section

To add this section, open the theme editor, click Add section, and select the Before/after section.

Supported blocks

This section has two block types. You can add up to two blocks:

  • Before block: this block represents the "before" image, along with the image and content.
  • After block: this block represents the "before" image, along with the image and content.

Section guidelines

Do

  • Use images of similar dimensions for the before and after images.
  • Upload sufficiently large images (we recommend images at least 2000px wide).
  • Limit the amount of text (images can become short on mobile).
  • Compare similar products or features.

Don't

  • Don't use images whose content can't be easily compared visually.
  • Don't use images with too busy backgrounds if you use text; it might make content hard to read.