> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/zest-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/zest-theme/theme-sections/before-after-image-slider.md).

# Before/after image slider

<figure><img src="/files/uO7ICOFzHrLmnsyQSm0v" 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="/files/hrPXR0NqB36tDwGcJhnP" 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="/files/XgOiaKdb4OoSdsgAC8Ms" 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="/files/ykdk9Z8uAtYJ6L7ABcge" alt=""><figcaption></figcaption></figure>