# Before/after image slider

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FUsfrPWNj11PIxDrDbIoc%2FHyper%20docs%20screenshot%20do%20not%20delete%20(39).jpg?alt=media&#x26;token=11fe2fb6-63b0-47e4-bb58-16315b5a5efb" alt=""><figcaption></figcaption></figure>

The **Before/After 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

{% 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 best result, 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

### 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 "mention")

* **Text:** Add a detailed explanation or summary for the banner. Use rich text formatting like **bold**, *italic*, links, and lists for better visual emphasis.
* **Text size:** Select the size of the description text.
* **Button label:** Input the text for the call-to-action button.
* **Button link:** Add a link to the button to direct users to a specific page, product, or collection.
* **Button style:** Choose a style for the button.
* **Text alignment:**
  * Align the text in the section to the **Left**, **Center**, or **Right**.
  * Adjust alignment based on your banner’s design and layout.
* **Text alignment on Mobile:** Override desktop alignment settings specifically for mobile devices if needed.

</details>

#### Before/ after image settings

* **Direction:** Choose the orientation of the slider:
  * **Horizontal:** The images are displayed side by side, with the slider moving left or right.
  * **Vertical:** The images are stacked on top of each other, with the slider moving up or down.

{% tabs %}
{% tab title="Horizontal" %}

<figure><img src="https://content.gitbook.com/content/AJrvmfqcj9TMoPkl3bNc/blobs/8msm2K8CsOp9GEggg4Nl/image.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Vertical" %}

<figure><img src="https://content.gitbook.com/content/AJrvmfqcj9TMoPkl3bNc/blobs/qQ9g99iEB9dvKyjR3zL5/image.png" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Image height**: Select how the image height is determined: **Adapt to image**/ **Small**/ **Medium**/ **High**.
* **Image heading style:** Customize how the heading appears above the images.

{% tabs %}
{% tab title="Badges" %}

<figure><img src="https://content.gitbook.com/content/AJrvmfqcj9TMoPkl3bNc/blobs/fzoWcqONGu5MYC2e6Uug/image.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Plain text" %}

<figure><img src="https://content.gitbook.com/content/AJrvmfqcj9TMoPkl3bNc/blobs/HQeSSU4icLqce6IToFkR/image.png" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Product:** Link the slider to a specific product from your store.

### Block settings

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2Fq1Y5xdHZ28qHe7nID1ul%2Fimage.png?alt=media&#x26;token=c1839afb-55d2-4f58-bc49-4c8c88a572d4" alt=""><figcaption></figcaption></figure>

There are 3 blocks that can be added to the section:

* Before
* After
* Text

{% tabs %}
{% tab title="Image block" %}
This block enables the core functionality of the slider. Add 2 Image blocks for the Before and After images.

| Setting           | Description                                           |
| ----------------- | ----------------------------------------------------- |
| **Image**         | Upload the desired comparison image.                  |
| **Mobile image**  | Optional: upload a version optimized for mobile.      |
| **Image heading** | Add a short label (e.g., *Before*, *After 2 months*). |
| **Color scheme**  | Match the background to your site style.              |

💡 **Tip**: Use high-resolution images taken under similar lighting for best results.
{% endtab %}

{% tab title="Text block" %}
You can add **multiple text blocks** to the left panel. Each block includes:

| Setting           | Description                                               |
| ----------------- | --------------------------------------------------------- |
| **Heading**       | Add a title                                               |
| **Heading color** | Customize the heading text color.                         |
| **Heading size**  | Choose heading scale: Extra small to Large.               |
| **Text**          | Use this space for a description or supporting statement. |
| **Text size**     | Adjust body text size.                                    |

🔹 Every text block is **automatically separated by a divider line**, ensuring clear visual hierarchy for clinical results, customer stats, or testimonials.
{% endtab %}
{% endtabs %}

***

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FkUIzEsJKOeRiz891zyf5%2Flivechat883x471%20(1).png?alt=media&#x26;token=90cbed2c-e791-49c8-9f43-49a08bed6f1f" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_hyper&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>