This guide will walk you through the Before and After section, a great way to visually highlight product results or transformations on your store.

Step 1: Add the Before and After Section

To begin, click on Add section and search for Before and After.
This section allows you to showcase visual product transformations or comparisons — perfect for demonstrating product effectiveness or customer results.

Step 2: Customize Heading and Description

At the top, you’ll find options to edit the Heading and Description.
Use these fields to introduce what your comparison is about — for example, “Real Results After 2 Weeks” or “Before and After Using Our Skincare Set.”

Step 3: Add the Main Image

In the Center Column, upload your main Before and After image.
This image displays the transformation, helping visitors instantly see the difference your product makes before and after use.

Step 4: Add Related Images

On both sides — the Left Column and the Right Column — you can display related images that contributed to the result shown in the center.

Each column allows you to:

• Upload two product images
• Add a heading and short description for each image

This setup helps highlight supporting products or key elements behind the transformation.

Step 5: Adjust Layout and Design

You can further customize this section by:

• Adjusting section padding to control spacing
• Changing background colors
• Applying a gradient to match your store’s branding and aesthetic

Step 6: Final Review

Once all images, headings, and descriptions are added, preview the section to ensure the layout and design appear balanced on both desktop and mobile views.