> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/halo-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/halo-docs/sections/banner/before-and-after-slider.md).

# Before & After slider

<figure><img src="/files/SaX3pfy6pJSEE0YZDViH" alt=""><figcaption><p>Before &#x26; After slider - Style 1</p></figcaption></figure>

<figure><img src="/files/nOVQVmnZXu83jFFWwirT" alt=""><figcaption><p>Before &#x26; After slider - Style 2</p></figcaption></figure>

<figure><img src="/files/HZx3P3cJ58JD4nzV9hch" alt=""><figcaption><p>Before &#x26; After slider - Style 3</p></figcaption></figure>

To add this section, please follow below steps:

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Add section** and choose "**Before & After slider**".

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