# Before/ After image slider

<figure><img src="https://content.gitbook.com/content/SnkJrgCgnPuM88XGWwwm/blobs/wlT288wqiSffnk06mPBD/image.png" alt=""><figcaption></figcaption></figure>

With Megamog'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

#### Section header

To 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** on both Mobile and Desktop.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2Fvs3MUoYGJq3kl8Knx3OZ%2FBFAT-header.png?alt=media&#x26;token=81aae30f-88a7-42d9-9641-3abbf3a95037" alt=""><figcaption></figcaption></figure>

#### Settings

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2F30ISJ9HHgy46hSYVfG50%2FBFAT-setting.png?alt=media&#x26;token=14d1fc97-5bb3-4596-9dad-968302eb7ea8" 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="https://content.gitbook.com/content/SnkJrgCgnPuM88XGWwwm/blobs/uwis7af9c1DEPG8vmOxg/image.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Vertical" %}

<figure><img src="https://content.gitbook.com/content/SnkJrgCgnPuM88XGWwwm/blobs/QaYbQV1lq3NUyBVWFh8M/image.png" 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="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2Fz7kPFKQ5Oyz7hNyTjqTf%2Fimage.png?alt=media&#x26;token=4c32d978-b5d6-4a85-a295-51de487f6ffd" alt=""><figcaption></figcaption></figure>