# Product Swatch Grouping

In the article [Best Practice Product Structuring](/configuration-guides/best-practice-product-structuring.md) we run over how to structure products. However, if you have a summer dress for example, with 4 colours and 10 sizes, and you follow the best practice of 4 seperate products - then the question is - how do you group these together?

The best way is using a single product metafields - this enables brands to create a single visual element of swatches, and then click on each one to navigate to the relevant product.

It is also possible (but subject to your website project scope), to handle pre-fetching of connected products - this means that as a customers clicks between the products - there is no page refreshing, even though these a seperate products.

{% hint style="info" %}
In this article, we refer to Elle & Riley website [here](https://elleandriley.com/collections/travel-wraps-scarves).
{% endhint %}

You can see the swatch group example here for Elle & Riley it appears on the product page:

<figure><img src="/files/eduUs5XJP9vMAn65Stbu" alt=""><figcaption></figcaption></figure>

In the Shopify CMS - you can see these are each seperate products:

<figure><img src="/files/Gc18Tx7jiepMsT0Wp9oX" alt=""><figcaption></figcaption></figure>

In the metafields - these are grouped like this:

<figure><img src="/files/jZQV32kveVoBx8sVcscd" alt=""><figcaption></figcaption></figure>

### Hiding the product colour

You can see that the product each have a "- {Colour}" at the end of the name.

This has a number of benefits:

1. This makes it easy to see that actual colour in the CMS.
2. When searching by colour in the Shopify search and any other platform (Google shopping etc) - this colour value is searchable.

However, you can see that on the collection page, and product page for this product - the colour is not showing:

<figure><img src="/files/sQTk8ZylPCnsVPjNmhbj" alt=""><figcaption></figcaption></figure>

This is done by mapping the current selected product and hiding the name from the interface with Javascript. Below you can see 2 of these products - same name - different visuals:

<figure><img src="/files/lLUy1OD4xecHXvQ0yVO4" alt=""><figcaption></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.almond.studio/configuration-guides/product-swatch-grouping.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.