> For the complete documentation index, see [llms.txt](https://help.spicegems.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.spicegems.com/evs-easy-variation-swatches/product-group/configure-on-collection-pages.md).

# Configure on Collection Pages

We have demonstrated the Product Group creation process on collections page with the help of snapshots.

&#x20;For the product group functionality, we have selected the similar T-Shirt products for grouping:

<figure><img src="https://696655714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ25KbJvXBPUEkv6S8Myq%2Fuploads%2FOmxGK1ribyT67UAeJwKx%2FScreenshot_1.png?alt=media&amp;token=c6ab8abb-ae22-4e62-a98e-787831e3b273" alt=""><figcaption></figcaption></figure>

Let's create a Product Group for collections page in some simple steps:

### Step 1: Activate on the Collection Page

Enable the toggle to activate the product group on the collection page.

<figure><img src="https://696655714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ25KbJvXBPUEkv6S8Myq%2Fuploads%2FId0HcTmdTzepF1SWaaDp%2F1.png?alt=media&amp;token=20cddbf0-2e60-471f-991e-777cc7978943" alt=""><figcaption></figcaption></figure>

* Click on Product Group → click on "Create Your First Product Group".

<figure><img src="https://696655714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ25KbJvXBPUEkv6S8Myq%2Fuploads%2Fl4DBrKYFLsvw3kZ2JJco%2F2.png?alt=media&amp;token=3f90bf96-f199-4137-b1e6-6d57ec592a30" alt=""><figcaption></figcaption></figure>

### Step 2: Product Details

In this section, you are required to fill in the details as shown in the image below:

* Group Name - Add a name for the group to identify that specific group in the group list.
* Option Name - Add option name (for eg. color/size) for the group. It will be shown as the label of the group on the product page.

<figure><img src="https://696655714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ25KbJvXBPUEkv6S8Myq%2Fuploads%2FaKAszkFf6pVZ3LtDaSwi%2F3.png?alt=media&amp;token=c2c210b9-6587-4d7a-b09b-12bc70fac97e" alt=""><figcaption></figcaption></figure>

### Step 3: Group Products

* Search for the products - Similar products or the product that you want to group together.
* Display Name - Add a display name for each product.

<figure><img src="https://696655714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ25KbJvXBPUEkv6S8Myq%2Fuploads%2F7ZAQEADg0h5tkxnLpC9z%2F4.png?alt=media&amp;token=bba947fd-7ebf-447a-9b22-ab235737b13f" alt=""><figcaption></figcaption></figure>

### &#x20;Step 4: Advance Options (if required)

You can change the position of the Product Group widget on the product and collection pages.

* **Above the product option**: It will show the product group just above the default variant options.
* **Below the product option**: It will show the product group just below the default variant options.

<figure><img src="https://696655714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ25KbJvXBPUEkv6S8Myq%2Fuploads%2FaTxPj8QCJM32T8a5S4ly%2F5.png?alt=media&amp;token=996b567f-609b-4f2e-94ce-981f1468fa9b" alt=""><figcaption></figcaption></figure>

Click on **Save** to create the product group.

### Step 5: Select a swatch configuration

You can choose to display different swatch styles on the collection pages.

<figure><img src="https://696655714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ25KbJvXBPUEkv6S8Myq%2Fuploads%2FfjGH2BvV4ioIvHWZH2iH%2F6.png?alt=media&amp;token=93930953-92cc-4869-8edd-618629fd4abb" alt=""><figcaption></figcaption></figure>

The Product Group is ready for use on collections page. You can check out the visibility of swatches on the collection page in the below snapshot.

<figure><img src="https://696655714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ25KbJvXBPUEkv6S8Myq%2Fuploads%2F3peroeY9Vn882AGwNkDi%2FCollections-8.png?alt=media&amp;token=d8d1718c-4795-424f-8a01-5e1c1f78562a" alt=""><figcaption></figcaption></figure>
