Image Before and After

The "Image Before and After" section is an interactive feature that allows you to display two overlaid images - typically a 'before' and 'after' view. This feature is especially useful for showcasing the visual impact of your products. It includes an interactive slider that users can drag across the screen to compare both images side by side.

Adding the Image Before and After Section

  1. Click on Add Section in the theme editor sidebar.
  2. Choose Image Before and After from the list of available sections.

Configuring the Section

Once you have added the "Image Before and After" section, it's time to customize it by uploading your images and tweaking additional settings.

Uploading Images

  1. In the Image Before and After section settings, you'll find options to upload your 'before' and 'after' images.
  2. Click on the upload fields to select and upload each image.

Additional Customizations

While the basic setup involves uploading the two key images, you have the flexibility to further customize this section:

  • Adding a Heading and Text: You can add a heading and descriptive text to give more context to the images.
  • Adjusting Colors: Customize the color scheme to match your brand or the aesthetics of your website.
  • Other Settings: Explore additional settings in the theme editor to further refine the look and feel of the section.
Remember, the "Image Before and After" section is a powerful tool to visually demonstrate the effectiveness of your products. Use high-quality images to make the most impact.


The "Image Before and After" section is an effective way to showcase product transformations or highlight the differences your products can make. With easy-to-use customization options, you can tailor this section to fit the style and narrative of your brand.

Remember to preview your changes and save them before exiting the theme editor.