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.
Text size
Controls the font size of the text. Options include H1, H2, H3, etc., depending on your theme’s scale.
Link
Add a URL or internal link to a page or product. The button will navigate to this link.
Label
Button label text.
Button style
Choose between “Solid” or “Outline” for the button design.
Top padding
Adjusts spacing above the section (in pixels).
Bottom padding
Adjusts spacing below the section (in pixels).
