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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/minimog-theme/theme-sections/before-after-image-slider.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.