# 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="/files/KfCqfDniZ47XeU9Mbzl6" 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="/files/LwwiC5U9OSBTJyoOHY8H" alt="" width="563"><figcaption><p>Before turn off variant size </p></figcaption></figure>

<figure><img src="/files/80V9gF4XaBJwHNPQJFY1" 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="/files/l5Ja7Y8uYJZRVfUQjxit" 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="/files/WDay50KzB6yNKHhL5CcA" 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="/files/Iye2TAKREtr5rxWewKDK" 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="/files/QfBtbsWHpYI5vTWIJYzZ" alt="" width="563"><figcaption><p>Before enable carousel on collection page</p></figcaption></figure>

<figure><img src="/files/BDOhbv9w0QxZxVMHoO7r" 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="/files/Uq3sYmk2PjHgfVHJOVWv" alt="" width="563"><figcaption><p>Setting limit</p></figcaption></figure>

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

<figure><img src="/files/dCo9mt072SYnq9JbP6tP" alt=""><figcaption><p>Demo limit maximun number swatch</p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.globo.io/product-variants-swatch/display-on-collection-page-home-page-other-pages/clean-up-variant-option-in-collection-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.