> 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-product-pages.md).

# Configure on Product Pages

We have demonstrated the Product Group creation process on the product page with snapshots.&#x20;

&#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 in some simple steps:

### Step 1: Activate on the Product Page

Enable the toggle to activate the product 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%2F6OCoOLjI4SOe8xAj3xCy%2F1.png?alt=media&amp;token=a9e897d6-48e6-4be0-b085-23feb75db98d" 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%2FbHwC9Wf3uArfWNHuzokU%2F2.png?alt=media&amp;token=5a951af6-fec8-47cc-9f04-6b85589bfd4d" 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%2FoIz66uoPI27flO8eNBgn%2F3.png?alt=media&amp;token=cbe00843-5df2-4da2-ae8c-5d37706950a5" 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%2F1WHVVEWCiVK6hZi7QOHe%2F4.png?alt=media&amp;token=dcf7fcfb-3c96-4596-b151-8ba8ded32980" 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 above the default variant options.
* **Below the product option**: It will show the product group 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%2FlLQpqWiB0jsaC1xsofG8%2F5.png?alt=media&amp;token=65308408-7484-4c9b-8239-3207e8150aea" alt=""><figcaption></figcaption></figure>

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

### Step 5: Select a swatch configuration

You can choose to display different swatch styles on the product page.

<figure><img src="https://696655714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ25KbJvXBPUEkv6S8Myq%2Fuploads%2FMNhTgLA4RRBdcqQtNQHM%2F6.png?alt=media&amp;token=09578ce2-6ee8-40c9-aa7c-74963c8a315d" alt=""><figcaption></figcaption></figure>

The Product Group is ready for use. You can check out the visibility of swatches on the product 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%2FbAFsnB2hBipv6UD7I0AC%2FProduct-page.png?alt=media&amp;token=b8d384e3-0b14-463d-aa04-1a4acc1aa851" alt=""><figcaption></figcaption></figure>
