# Show Image / Color Swatch slider

This feature allows you to display option values in a **slider format** for Image Swatch and Color Swatch elements — giving your storefront a cleaner and more organized look.

## <mark style="color:blue;">Steps to manage:</mark>&#x20;

{% stepper %}
{% step %}

### Set up Image and Color Swatch

Add all your desired **option values** to the element.
{% endstep %}

{% step %}

### Enable custom layout

* Go to the **Advanced Settings** tab > Enable **Custom Layout**.
* Under **Layout Type**, select **Slider**.
* Configure the display:
  * Choose the **number of rows**
  * Set the **number of swatches per row**

<figure><img src="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2FXOWRGwRdKNpUgUXIgkhQ%2Fimage.png?alt=media&#x26;token=d281e6fd-7cdc-4ccf-8578-5ce3c0f6bdbc" alt=""><figcaption></figcaption></figure>

* Enable **Show navigation arrows** and/or **Show indicators** if desired

<figure><img src="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2FRlTHJP0N5QDcdJrZ1W3R%2Fimage.png?alt=media&#x26;token=64f28227-68f3-4961-8862-cbf98fd5eed1" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Click Save to apply the change

{% endstep %}

{% step %}

### Preview on the site&#x20;

{% endstep %}
{% endstepper %}

📧 **Need Help?**\
If you run into any issues while setting up your option set, feel free to reach out to us at **Chat** or email **<contact@globosoftware.net>**.

We’re always here and happy to help — with sincerity and care!