> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/minimog-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/minimog-theme/theme-sections/before-after-image-slider.md).

# Before/ After image slider

<figure><img src="/files/yJcuhI4iqemBEAGr0tIs" alt=""><figcaption></figcaption></figure>

With Minimog's Before/ After image slider section, you can create horizontal or vertical sliders for your Shopify store, unleashing the creative potential of your site.&#x20;

Using a Before/ After image slider can bring you several benefits such as:&#x20;

* boosting engagement on your Shopify store through interaction;
* creating compelling visual stories;
* showcasing impressive or persuasive presentations.

In this article, we will show you how to add and customize a **Before/ After image slider** section.

{% hint style="success" %}
Steps:

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

## Section settings

### General settings&#x20;

Select the section's container type as **Default**/ **Full width**/ **Use a container box**.

Then, give your section a heading, subheading, and description. Leave any of the fields blank if you don't want to show the content.

You can either set your **Text alignment** as **Center** or **Left**.

<figure><img src="/files/DmJzA8aHkijJSUj65osc" alt=""><figcaption></figcaption></figure>

### Slider settings

<figure><img src="/files/XX5xB8hQKgfYPmPNtF68" alt=""><figcaption></figcaption></figure>

The layout settings let you decide whether to have your images slide horizontally or vertically.

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

<figure><img src="/files/qxpBvMp7yPwM85WoSqGS" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Vertical" %}

<figure><img src="/files/cUOOmfLLvsQiU3ulSmjH" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

Set the section's image height as **Adapt to image**/ **Small**/ **Medium**/ **High**.

## Block settings

There are two blocks of images within a Before/ After image slider. You need to fill in both blocks to make the slider work.&#x20;

In each block, you can add a separate image for the desktop/ laptop/ tablet view, a separate image for the mobile view, and also the heading for that image.&#x20;

<figure><img src="/files/4PITA3xCK3RbpBC5BaLS" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/SX65AqudlKxDPLIUfi25" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_minimog&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>