> For the complete documentation index, see [llms.txt](https://awecommerce.gitbook.io/awe-color-swatches/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://awecommerce.gitbook.io/awe-color-swatches/getting-started/product-groups/create-a-product-group.md).

# Create a product group

Link two or more products as swatches in a few steps.

Link separate products so they show as swatches on each other's pages.

## 🛠️ Steps

{% stepper %}
{% step %}

### Open Product groups

Go to **Product groups** and click **Create group**.

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-49dbda9faacdd4a0120065547c545be250408903%2Fproduct-groups-02-create-button.png?alt=media" alt="Create group button"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Name the group

* **Group name** — only for you, to find the group in the app, e.g. `Classic tee colors`.
* **Option name (visible on store)** — the label shoppers see above the swatches, e.g. `Color`.

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-0045a604ef81c3b182093bc779b24b5af0e322b3%2Fproduct-group-edit-01-name.png?alt=media" alt="Group name and option name"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Choose option styles

* **Style on product page** — default **Auto image swatch** (each product's featured image).
* **Style on Collection page** — default **No show**, so new groups stay off collection cards until you change it.

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-a37ca8f0b1f87efac42fa9733ab4e3669f5f500d%2Fproduct-group-edit-02-styles.png?alt=media" alt="Choose option styles for the product and collection page"><figcaption></figcaption></figure>

→ *Picked **Custom swatch** or **Custom card**? Click the gear icon to set a color or image for each product — or **Auto-assign colors** to fill them from the product names.*
{% endstep %}

{% step %}

### Add products

Click **Add product** and pick the products to link. A group needs **at least 2 products**.

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-87092445d58a081ddedacbd9fa4bf47b694fbc15%2Fproduct-group-edit-03-products.png?alt=media" alt="Products in the group with display names"><figcaption><p>1. Add products. 2. Drag to reorder. 3. Set an optional display name.</p></figcaption></figure>

* Drag the handle to reorder — that's the order of the swatches.
* **Display name** — the text shown for that swatch. Leave it empty to use the product title.
  {% endstep %}

{% step %}

### Save

Click **Save** in the save bar at the top. The group is **Active** right away.
{% endstep %}
{% endstepper %}

## What shoppers see

* Every product in the group shows the group's swatches, in your order. Clicking one opens that product's page.
* Products that aren't published on your Online Store are left out.
* On collection cards, the swatches show only if **Style on Collection page** isn't **No show**.

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-909d37fc05a208d06804dffa8d2e60b91f74e584%2Fproduct-group-edit-04-preview.png?alt=media" alt="Product group preview"><figcaption></figcaption></figure>

{% hint style="info" %}
The **Preview** on the right shows the group on a product page and a collection page before you save.
{% endhint %}

→ *Want the swatches somewhere else on the page? See* [*Reposition swatches on the product page*](/awe-color-swatches/getting-started/product-groups/reposition-swatches.md)*.*

***

💬 If you have any related questions, please contact us via **Live chat** in the app.