> For the complete documentation index, see [llms.txt](https://blueskytechcos-organization.gitbook.io/umino-shopify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://blueskytechcos-organization.gitbook.io/umino-shopify/theme-sections/image-comparison-slider.md).

# Image comparison slider

**Image comparison slider** shows 2 images next to each other which let customers see the differences between them.

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

{% hint style="info" %}
**Steps:**

1. In your Shopify admin, go to **Online Store ==> Themes**.
2. Click **Customize**.
3. Locate **Image comparison slider**.
4. Change images.
5. Click **Save**.
   {% endhint %}

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

{% hint style="info" %}
You can setup 2 individual pairs of images for mobile and desktop.
{% endhint %}

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

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

**Add focal point:** This feature helps you select the most important part of an image for your store. It ensures that the focal points of the image always remain visible, even if a section crops the image to fit the layout.

<div><figure><img src="/files/IVnL2Q7TKiz1jj4I5yvl" alt=""><figcaption></figcaption></figure> <figure><img src="/files/rSQkdQqaiXuE58dGzvlN" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
Please follow this [link](https://help.shopify.com/en/manual/online-store/images/theme-images) for more information.
{% endhint %}
