> 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="https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2F7RrURAjUIxClHrRgreew%2FBefore%20After%20Slider%20-%20Home%2015.jpg?alt=media&amp;token=e6565196-e9d0-4be3-bb74-fedb3ea5020c" alt=""><figcaption><p>Before &#x26; After slider - Style 1</p></figcaption></figure>

<figure><img src="https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FY2PBeG9anoWonKwIKHYo%2FImage%20Before%20%26%20After%20slider.png?alt=media&amp;token=82a6489f-2fa2-4e10-b62e-ad6acdda8767" alt=""><figcaption><p>Before &#x26; After slider - Style 2</p></figcaption></figure>

<figure><img src="https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FwYvLixeH9yHF3qA8szEV%2FBefore%20After%20Slider%20-%20Home%2016.jpg?alt=media&amp;token=fbb5a4c5-28e5-4920-9a5a-b9d2d05ad8bb" 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="https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FHA7ZNLWJurqkKDZ6pfEs%2FSettings%20Before%20%26%20After%20slider.png?alt=media&amp;token=74b3cb7d-cfff-4954-a31d-5282a578f1b8" alt=""><figcaption></figcaption></figure>