Before and after

Before and after stacks two photos and lets shoppers drag a handle to reveal one or the other. Each photo has a label, such as "Before" and "After", and an eyebrow, heading and text sit beside the slider.

The handle is a standard slider control, so it also works with the arrow keys on a keyboard. Screen readers announce the two images by their labels unless the images have their own alt text.

Best practices#

• Use two images with the same size and framing. Take them from the same angle, distance and light, so the only change is the one you want to show.
• Use real photos. Don't retouch one image more than the other, and keep any claims in the text accurate. Product claims may also be regulated in your market.
• Say what changed. Use the text to explain the timeframe and the product used, for example "After four weeks of daily use".
• Short labels. One word each keeps them clear of the subject.

Preset tips#

• Sorrel uses it on the home page to show a skincare result, which is the most common use.
• For Vellora, it works for a room before and after styling. For Graphite, for a garment before and after wear or washing.

Handle

before-after

Group

Story and content

Where

Add it to any template with Add section in the theme editor.

Settings#