Before / After image

The Before / After Image section is a preset section designed to visually compare two images using a draggable slider or toggle buttons. This is ideal for showcasing product transformations, design changes, or results-based visuals. The section supports drag-and-drop image blocks and toggle buttons for switching views without the slider.

Possibilities:

• Add up to two image blocks

• Reorder images by dragging

• Switch between images using the “Before” and “After” buttons when slider is not preferred

---

How to Configure the Before / After Image

1. In Shopify admin, go to Online Store → Themes.

2. Click Customize next to the Elemento theme.

3. In the theme editor, navigate to the desired page template (e.g., Home page) using the top preview dropdown.

4. In the left sidebar, click Add section, then select Before / After Image, or locate it if it’s already added.

5. Upload the “Before” and “After” images.

6. You can drag and drop this section to reorder it on the page.

7. Click Save.

Section Settings

Setting	Type	Description
Color scheme	Color scheme selector	Apply a color theme for the section background and text.

Section Padding

Device	Setting	Type	Description
Desktop	Top padding	Range	Space above the section on desktop view.
Desktop	Bottom padding	Range	Space below the section on desktop view.
Mobile	Top padding	Range	Space above the section on mobile view.
Mobile	Bottom padding	Range	Space below the section on mobile view.

---

Blocks

Image (max 2 blocks)

Setting	Type	Description
Image	Image	Upload the image to compare.