# Before/after image slider

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FlDKYUzMT3rz0o6L9fIt6%2FFox-BG%20Light%20(18).jpg?alt=media&#x26;token=4c1881a8-ee48-4440-bff3-731661037471" alt=""><figcaption></figcaption></figure>

The **Before/sfter image slider** section lets you visually compare two images side by side—perfect for showcasing product effectiveness, transformation results, or progress stories.

## How to add a Before/after image slider to your Shopify store <a href="#how-to-add-a-before-after-image-slider-to-your-shopify-store" id="how-to-add-a-before-after-image-slider-to-your-shopify-store"></a>

{% hint style="success" %}
Steps

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Before/after image slider section**
3. Make necessary changes.
4. **Save.**
   {% endhint %}

To achieve the effect, it is recommended to use images of the same size and position, and there are visually distinguished differences between the before and after photos.

## How to edit a Before/after image slider <a href="#how-to-edit-a-before-after-image-slider" id="how-to-edit-a-before-after-image-slider"></a>

### Section settings

#### Section header

Customize the text and alignment to ensure the banner effectively communicates your message and encourages engagement.

<details>

<summary>See settings</summary>

* **Subheading**: Add a short, secondary heading to complement the main heading. This can provide additional context or detail.
* **Heading**: Enter the primary title for your banner.
* **Heading size:** Adjust the size to fit your design preference and ensure readability. Choose from available heading sizes.

[Add Highlighted text to your Headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings)

* **Description:** Add a detailed explanation or summary for the banner. Use rich text formatting like **bold**, *italic*, links, and lists for better visual emphasis.

</details>

**Before/ after image settings**

* **Layout:** Choose the orientation of the slider.

{% tabs %}
{% tab title="Horizontal" %}
The images are displayed side by side, with the slider moving left or right.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FHjSUDL3SqqlJHXsiLrOT%2Fimage.png?alt=media&#x26;token=5ed3d01a-91b8-4089-b0bb-2f68bd9a5296" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Vertical" %}
The images are stacked on top of each other, with the slider moving up or down.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FZnRzALRUfLoCOUv6liwB%2Fimage.png?alt=media&#x26;token=5285d815-79bd-47bc-b9f9-b4b9a9a27710" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Image height**: Control the height of the image as **Adapt to image/ Small/ Medium/ Large**.

### Block settings <a href="#block-settings" id="block-settings"></a>

Add the Before image and After image for the section.<br>

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FZGhIPjFyH2II0xemxi86%2Fimage.png?alt=media&#x26;token=7030d95e-ccc5-4087-a604-119a39743231" alt=""><figcaption></figcaption></figure>