After-Before #
The After-Before section lets merchants create a powerful visual comparison using two images — typically a grayscale and a color version — separated by a draggable slider. This is ideal for showcasing product effects, transformations, or improvements (e.g., before/after using a product).
Color scheme
Selects the color scheme for the section based on the theme’s predefined color options.
Section width
Choose between “Full width” and “Container” to define how the section spans across the page.
Subheading
Text displayed above the main heading. Great for adding context.
Heading
Main heading of the section. Bold and prominent.
Before image
Upload the image to show on the left side (typically the “Before” state).
After image
Upload the image to show on the right side (typically the “After” state).
Text
Optional description text supporting the images. HTML tags such as are supported for line breaks.
Button label
Enter the call-to-action text for the button.
Button link #
Choose the link destination for the button (e.g., All Products collection or a custom URL).
Button Style #
Determines the design of the button.
- Primary button
- Secondary button
- Full button
- Link button
- Button with icon
Top padding
Adjusts spacing above the section (in pixels).
Bottom padding
Adjusts spacing below the section (in pixels).
