Before After Section – Crafton
The Before/After section in Crafton allows you to showcase visual transformations by comparing two images with an interactive slider.
This is perfect for stores selling products or services that create a noticeable “before and after” effect (e.g., beauty, home decor, fitness).
In Crafton, you can also link a product to the section, letting customers directly shop for the featured transformation.
Features of the Before/After Section:
- Add two images (Before and After) with a draggable comparison slider.
- Include headings, descriptions, and call-to-action buttons.
- Link a product from your store to make the section shoppable by block of this section.
- Adjustable layout settings for desktop and mobile optimization .
- Fully responsive and touch-friendly slider.
- Add the heading below the products to make more eye catching.
How to Set Up the Before/After Section:
- Go to Online Store → Themes → Customize.
- Click Add section and select Before/After from the section list.
- In the settings panel, configure the following.
Before/After Section Settings::
-
Before Image: Upload the first image showing the “before”
state
After Image: Upload the second image showing the “after” state. - Heading & Subheading: Add a title and optional supporting text.
- Description: Provide context about the transformation or product..
- Button Text & Link: Add a call-to-action (e.g., Shop Now, Learn More) and set its link.
- Select Product: Choose a product from your store to display below or alongside the comparison slider.
Pro Tips:
Use high-resolution images for a crisp comparison effect.
Link the product directly so customers can purchase the
item responsible for the transformation.
Keep text minimal to let the visuals stand out.