How do I add a before and after image slider?

The Before and after section puts two images on top of each other with a divider. Shoppers drag the divider to show more of one image or the other. Use it for results (before and after), two colors, or two finishes of a product.

Add the section

1. Open the builder and go to the page you want. It works on the home, product, landing, collection, and collections pages, up to 3 per page.
2. In the Sections tab, click Add new section and pick Before and after from the Content group.
3. Click the Before and after block inside it and pick your two images, then click Publish.

The Before and after block

This block holds the two images. It is always in the section and cannot be removed.

• Before image and After image: the two pictures. Use photos taken from the same angle, so they line up.
• Before label and After label: a short tag on the corner of each image, like "Before" and "After", or "Black" and "White". Leave it empty to hide the tag.
• Direction: Horizontal uses a divider that shoppers drag left and right. Vertical uses a divider that shoppers drag up and down.
• Ratio: the shape of the frame. Auto follows the before image, or pick Portrait, Square, or Landscape. Both images are cropped to the same frame.
• Divider position: where the divider starts, from 5% to 95%. At 50% shoppers see half of each image.
• Show a hint when it comes into view: the divider moves a little on its own, so shoppers see they can drag it.
• Follow the mouse on desktop: on computers the divider follows the mouse without a click. On phones shoppers always drag.
• Use parent color scheme: the divider, handle, and tags use the section colors. Turn it off to pick another Color scheme.

Section settings and title

Add up to 2 Text blocks, 1 Divider, and 1 Group for a heading and a short text.

• Direction: Vertical puts the heading above the images, Horizontal puts it beside them.
• Stack vertically on mobile: on by default, so the images keep the full phone width.
• Position and Alignment, Section width, Color scheme, Padding, and a Custom CSS tab.

On the product page

The same Before and after block can also go inside the Product info and Landing info sections, and inside collapsible tabs, so the comparison sits next to the buy button. See How do I add collapsible tabs, delivery dates, a size guide, badges, or before and after images to my product page?

Good to know

• On your live store, the comparison only shows once both images are picked. The builder shows sample images until then.
• Shoppers can also move the divider with the keyboard.
• Shoppers who turned on reduced motion on their device do not see the hint movement.
• Images look cut? Pick the Ratio closest to your photos, or use photos of the same shape.
• Only use real photos of real results.