# 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.

<figure><img src="https://content.gitbook.com/content/9icwdCUv3B94Yb9tmqHW/blobs/Hix6Edz8VGtiO656ZQ5l/image.png" alt=""><figcaption></figcaption></figure>

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. |
