Clean up variant option in collection page

If you have a product has too many variant options, if you show all of them on the collection, the overall layout will not be clearn. We provide a solution to limit the maximum number

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


Turn off some variation options on collection page

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

  • Disable the options you don't want to display on the collection page.

    Turn off some variation options on collection page

E.g: We have variant size and color

Before turn off variant size
After turn off variant size

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.

1

Naginate to page "appearance"

In admin app GLOBO Color Swatch naviagtion, click to Appearance

2

Click to "set up" button

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

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

Click to set up button
3

Click tab "on collection page"

Click tab "On collection page"
4
Enable "Carousel" and save

E.g: Carousel on collection page

Before enable carousel on collection page
After enable carousel on collection page

Limit the maximum number of options displayed on a product in the collection page

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.

  5. Click to Save

Setting limit

E.g: Limit maximun number swatch

Demo limit maximun number swatch

Last updated