# Clean up variant option in collection page

## **Here are some functions you can clean up your collection page.**

***

## <mark style="color:green;">Turn off some variation options on collection page</mark>

It's easy to manage which variants are enabled on the collection page, which variants are not visible with this configuration.

* Suppose you have too many options but only want to display color/image options on the collection
* In admin app GLOBO Color Swatch, **Naginate** to page **Options list**&#x20;
* Disable the options you don't want to display on the collection page.\
  \ <br>

  <figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FSBPcDxtCiZDroAMv60Vj%2Fimage.png?alt=media&#x26;token=a9fb1a6a-44e3-4faf-ac77-9e69a2ef44ca" alt="" width="375"><figcaption><p>Turn off some variation options on collection page</p></figcaption></figure>

<mark style="color:purple;">E.g: We have variant size and color</mark>

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FxNHBD5bB6Iw9T7aJqVfn%2Fimage.png?alt=media&#x26;token=6f770de3-7433-4eb7-9fb7-d4b6be209538" alt="" width="563"><figcaption><p>Before turn off variant size </p></figcaption></figure>

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FwQno1hnVeaHWOOqg5Vf3%2Fimage.png?alt=media&#x26;token=6b088ee2-10ac-4af9-befe-96149ffb97d6" alt="" width="563"><figcaption><p>After turn off variant size</p></figcaption></figure>

***

## <mark style="color:green;">Show carousel for variant option in collection page</mark>

If you have a variation with too many options, use carousel mode when collecting, it will shorten your list of options to just one row.

{% stepper %}
{% step %}

### <mark style="color:blue;">**Naginate to page "appearance"**</mark>

In admin app GLOBO Color Swatch naviagtion, click to **Appearance**
{% endstep %}

{% step %}

### <mark style="color:blue;">Click to "set up" button</mark>

On **Appearance** page, you can choose any style swatch and click to setup button this setting apply for all option on collection page. &#x20;

**Except dropdown style**, because dropdown style does not need to use carousel

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FDdDsoWnlVxX85w2a9YKE%2Fimage.png?alt=media&#x26;token=4baa1baf-8f1a-49d8-bb63-a806b9405b54" alt="" width="563"><figcaption><p>Click to set up button</p></figcaption></figure>
{% endstep %}

{% step %}

### <mark style="color:blue;">Click tab "on collection page"</mark>

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FAoHmlzODzneqhhBbfZF3%2Fimage.png?alt=media&#x26;token=337da990-32c5-4bf6-bf52-0babbc6ab3fa" alt=""><figcaption><p>Click tab "On collection page"</p></figcaption></figure>
{% endstep %}

{% step %}

### <mark style="color:blue;">Enable "carousel" and save</mark>

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Flalso0vQISxdVaoqzhJ2%2Fimage.png?alt=media&#x26;token=5947a497-6a14-4500-a371-0330c832d1da" alt="" width="563"><figcaption><p>Enable "Carousel" and save</p></figcaption></figure>
{% endstep %}
{% endstepper %}

<mark style="color:purple;">E.g: Carousel on collection page</mark>

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FTfHsM9ZvU21SzlKIkaIA%2Fimage.png?alt=media&#x26;token=8ee730de-3aee-4f4c-bb43-8b03d7f8698d" alt="" width="563"><figcaption><p>Before enable carousel on collection page</p></figcaption></figure>

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FN580H81m76Adz3H9dOcl%2Fimage.png?alt=media&#x26;token=a947cf86-dbca-497e-b17e-a1f117d542f6" alt="" width="563"><figcaption><p>After enable carousel on collection page</p></figcaption></figure>

***

## <mark style="color:green;">Limit the maximum number of options displayed on a product in the collection page</mark>

If you have a variation with too many options, in addition to using carousel you can use limit number options show.

1. In admin app GLOBO Color Swatch naviagtion, click to **Setting page**
2. **Enable** setting **limit swatch** on collection.
3. Enter the **maximum number** of options that can be displayed on the **desktop**.
4. Enter the **maximum number** of options that can be displayed on the **mobile**.&#x20;
5. Click to **Save**

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FAnSYphwNsXTjDy7AiQJ0%2Fimage.png?alt=media&#x26;token=3da73775-0d13-4cf9-a034-970b74667c9b" alt="" width="563"><figcaption><p>Setting limit</p></figcaption></figure>

<mark style="color:purple;">E.g: Limit maximun number swatch</mark>

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FgcUZAmQ0EEbWsoX9DS65%2Fimage.png?alt=media&#x26;token=b10209e0-7216-4ee4-afb6-96215231ad1a" alt=""><figcaption><p>Demo limit maximun number swatch</p></figcaption></figure>