> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/swatch/product-groups/product-group-styles-and-swatches.md).

# Product group styles and swatches

Choose the display style for a group and set what each product's swatch shows.

## The styles

**Style** in the **Product group configuration** section decides how the group is displayed:

| Style                                | What shoppers see                                               |
| ------------------------------------ | --------------------------------------------------------------- |
| **Product image swatch**             | Each product's own image, used as the swatch.                   |
| **Product title button**             | A button with each product's label.                             |
| **Dropdown list**                    | A plain select list of the labels.                              |
| **Dropdown list with product image** | A select list with a thumbnail beside each label.               |
| **Product image, title and price**   | A tile per product with its image, name and price.              |
| **Pill swatch**                      | A colour or image chip inside a pill, with the label beside it. |
| **Button with price**                | A button showing the label and the price.                       |

**Product image swatch** is the default and the right choice for colour families. **Product title button** and the dropdowns suit groups where the label matters more than the picture — models, capacities, lengths.

## Set a product's swatch

Click the swatch thumbnail on any product row to open **Select color**.

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fgit-blob-99a2a8d0a2c3e9784d0ed24139b00f697a566ee9%2Fimage%20(57).png?alt=media" alt=""><figcaption><p>Click on the swatch thumbnail</p></figcaption></figure>

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fgit-blob-617a23dbff8d9a7c753ead540e5591ec60728dd8%2Fimage%20(58).png?alt=media" alt=""><figcaption><p>The <strong>Select color window</strong> for one product in a group</p></figcaption></figure>

You have four ways to fill it, and you can set more than one:

| Control                      | What it does                                                       |
| ---------------------------- | ------------------------------------------------------------------ |
| **Color 1**                  | A single colour.                                                   |
| **Two colors** + **Color 2** | Tick **Two colors** and set a second colour for a two-tone swatch. |
| **Enable uploaded image**    | Tick it, then use **Add file** to upload a JPG, PNG or GIF.        |
| **Enable image URL**         | Tick it and paste a link starting with `http://` or `https://`.    |

Click **Save** in the window, then **Save** on the group.

## Change the alternative name for the product name

By default, we use the product name as option value.

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fgit-blob-243c736b1f5ec3b3085efd6fe7506e47a3ba9179%2Fimage%20(59).png?alt=media" alt=""><figcaption></figcaption></figure>

\
Click **Save** in the window, then **Save** on the group.

## Which one wins

If you set several, the app uses them in this order:

1. Image URL
2. Uploaded file
3. Two colours
4. One colour

If none is set, the product's own Shopify image is used.

## Group settings that apply to every group

**Settings → Product groups** holds the storewide options:

* **Show Group Name** — show or hide the option name above the swatches.
* **Show Tooltip for Product Group** — show the label on hover. Only applies to the product image swatch style, and may not display properly when Carousel is enabled.
* **Show Carousel** on collection pages and on product pages — put the group on one scrollable line.
* **Limit of the product number displayed for Product Group** — hide extra products behind a "More" button on collection pages, with a **Limit** you set.

See [Product groups settings](/swatch/settings/product-groups.md).

## Related pages

* [Create a product group](/swatch/product-groups/create-a-product-group.md)
* [Show product groups on your storefront](/swatch/product-groups/show-product-groups-on-your-storefront.md)