# Before/ After image slider
With the **Before/ After image slider** section in Sleek, you can create horizontal or vertical sliders for your Shopify store, unleashing the creative potential of your site.
Using a Before/ After image slider can bring you several benefits such as:
* Boosting engagement on your Shopify store through interaction;
* Creating compelling visual stories;
* Showcasing impressive or persuasive presentations.
## How to add a Before/ After image slider
{% 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
#### General
Adjust the **Container** (Fixed width/Small) for this section.
#### Section header
Select your preferred **Layout** for the section:
{% tabs %}
{% tab title="Vertical" %}
{% endtab %}
{% tab title="Left column" %}
{% endtab %}
{% tab title="Right Column" %}
{% endtab %}
{% endtabs %}
Add the content you want in the **Heading** to attract customers' attention
* Leave it blank if you do not want to display it
You can also change the **Heading size** to:
* Heading xs
* Heading sm
* Heading md
* Heading lg
* Heading xl
* Heading 2xl
* Display md
* Display lg
* Display xl
#### Highlight text
[How to apply Highlight text to the section heading and block headings?](https://docs.foxecom.com/sleek-theme/pages-global-sections/general-settings#highlight-text)
Use the provided text fields to add a suitable **Subheading** and **Description**.
* Leave them blank if you do not want to display them
The call-to-action button will get the link from the provided **Button link** field.
Give the button a **label,** and a specific **Button style**:
* Primary button
* Secondary button
* Underline button
#### Before/ After image settings
The settings let you decide which **Direction** to slide (**Vertical**/ **Horizontal**).
{% tabs %}
{% tab title="Horizontal" %}
{% endtab %}
{% tab title="Vertical" %}
{% endtab %}
{% endtabs %}
Set the section's image height as **Adapt to image**/ **Small**/ **Medium**/ **High**.
Change the **Image heading style** to **Badges** or **Plain text**.
{% tabs %}
{% tab title="Badges" %}
{% endtab %}
{% tab title="Plain text" %}
{% endtab %}
{% endtabs %}
You can also add **Product** to this section, so customers can easily navigate to the target product.
### Block settings
There are 2 blocks of images in a Before/ After image slider.
You need to fill in both blocks to make the slider work.
You can select images to display on desktop and mobile (**Image** and **Mobile image**).
Add an **Image heading** to your Before/ After image block and change the **Color scheme** if needed.
