Image Compare Block : "Before and After"

Last updated: May 6, 2026

Overview

The Image Compare block is a visual content block in AppBrew Studio that allows brands to showcase two images side-by-side using an interactive slider. It's designed for "Before & After" style comparisons, giving shoppers a more engaging and informative way to understand a product's impact.

What It Does

The Image Compare block lets brands place two images on the same block and give users an interactive slider to reveal and compare them. The slider can be set to move vertically or horizontally, depending on the visual effect that best suits the content.

How to Set It Up

  1. Navigate to the design page — Open Studio and go to the design page where you want to add the Image Compare block.

  2. Select your page — From the page list, click on the specific page you want to add the block to.

  3. Add the block — Click Add Block in the editor and select Image Compare from the block library.

  4. Add a heading and subheading — Give your block a title and a short description to provide context for the comparison (e.g. "See the Difference" or "Before & After Results").

  5. Upload your Before image — This is the image that represents the starting state — for example, skin before using the product, or a room before a makeover.

  6. Upload your After image — This is the image that shows the result or transformation — for example, skin after 4 weeks of use, or the same room after redecorating.

  7. Link to a product (optional) — You can link the image directly to a product, page, collection or any external link.

  8. Choose your slider orientation — Select Vertical for a top-to-bottom reveal, or Horizontal for a left-to-right reveal. Choose based on what best highlights the difference between your two images.

Common Use Cases

Personal Care

  • Skincare Transformation — Perfect for brands selling serums, moisturisers, or treatments. Show the skin condition before use on one side and the results after consistent use on the other — giving shoppers the visual proof they need to convert.

  • Hair Care Results — Great for brands selling hair growth, repair, or colour products. Compare dry, damaged, or unstyled hair on one side with healthy, treated, or styled results on the other to demonstrate product efficacy.

Home & Lifestyle

  • Material & Texture Comparisons — Show the difference between two materials, finishes, or colourways side-by-side. Ideal for home décor, furniture, or fashion brands evaluating options.

  • Before & After Room Makeovers — Let customers visualise the transformation a product brings to a space, comparing the room before and after styling or renovation.

Fashion & Apparel

  • Feature Highlight Comparisons — Showcase a product with and without a specific feature, such as a bag with and without a personalised monogram, or a jacket in two different colourways.

  • Styling Comparisons — Show the same garment styled two different ways to help customers understand versatility and maximise purchase confidence.

FAQs

  1. What is the Image Compare block?

The Image Compare block is an interactive content block in AppBrew Studio that lets brands display two images side-by-side with a draggable slider, allowing users to reveal and compare them in real time.

  1. Where can I add the Image Compare block?

You can add it to any page in your app through the Studio design page. Simply click Add Block and select Image Compare from the block library.

  1. What types of images work best with this block?

Images that show a clear visual difference work best — such as before and after shots, material comparisons, or contrasting product styles. For the best experience, use images with the same dimensions and aspect ratio.

  1. What is the difference between a vertical and horizontal slider?

A horizontal slider reveals the images from left to right, while a vertical slider reveals them from top to bottom. Choose based on what best highlights the difference between your two images.

  1. Can I add a heading and description to the block?

Yes. You can add a heading and subheading to give context to the comparison, such as "See the Difference" or "Before & After Results."

  1. Is the Image Compare block interactive for app users?

Yes. App users can drag the slider themselves to reveal and compare the two images at their own pace, making it a more engaging experience than a static side-by-side layout.