Before + After Slider
Add an interactive before-and-after comparison to your Showit website. Visitors can drag the slider from side to side to reveal the transformation.
WHAT YOU'LL NEED
Two images with the same dimensions and aspect ratio. For the smoothest transition, use images with similar framing and subject placement.
HOW TO INSTALL
1. Upload your images
Upload your Before and After images to your Showit Media Library.
2. Copy the image links
Select each image in your Media Library and copy its image link.
3. Add your links to the code
Open the supplied code and find the CUSTOMIZE HERE section near the top.
Replace the existing links beside:
BEFORE_IMAGE
AFTER_IMAGE
with the links you copied from Showit.
4. Customize your slider
In the same section, you can optionally change:
BEFORE_LABEL — changes the Before text
AFTER_LABEL — changes the After text
ACCENT_COLOR — changes the slider line and handle color using a hex code
You don't need to edit anything below NO EDITING NEEDED BELOW THIS LINE.
5. Add it to Showit
Add an Embed Code box to your Showit canvas and paste the entire completed code into the box.
6. Size your slider
Resize and position the Embed Code box just like any other Showit element.
7. Preview + test
Preview your site and drag the slider from side to side. Test both the desktop and mobile versions before publishing.
QUICK INFO
Difficulty: Easy
Requires: Embed Code + 2 images
Mobile friendly: Yes
Coding knowledge: Not required