# Group product style

**Group Products as Variants** is a feature that allows you to link similar products together to enhance the customer experience. 

* You can also use it to link related products together and display them as colors, images, buttons, dropdowns.
* Connect different variants of a product without using Shopify's variant system
* Give each variant its own URL for better Google search indexing

<mark style="color:purple;">Example 1:</mark>

Let’s say you have a **T-shirt** with 4 attributes:

* **Colors**: Red, Black, White, Blue
* You have created it into 4 separate products
* **T-shirt Red, T-shirt Black, T-shirt White, T-shirt Blue**

With product group you can display 4 colors as variants color in product without modifying the variant

<mark style="color:purple;">Example 2:</mark>

Let’s say you have a **T-shirt** with 4 attributes:

* **Colors**: Red, Black, White, Blue
* **Materials**: Cotton, Regular Fabric, Cotton 50%
* **Sizes**: S, M, L, XL
* **Gender**: Men, Women

In Shopify, you can only create 3 variants for this product. But by using **Group Products as Variants**, you can link products with different attributes (such as color and material) together. This way, you can display a fourth variant, like the **Material** option, while keeping all variations connected under one product group.

## Style display product group

### <mark style="color:blue;">1. Button</mark>

<figure><img src="/files/b1AlwLtb9AI6aCcYJq9w" alt="" width="563"><figcaption><p>Style button</p></figcaption></figure>

### <mark style="color:blue;">2. Swatch image/color</mark>

<figure><img src="/files/p0LJFuXFnyMkZRhSR7VH" alt="" width="563"><figcaption><p>Style image/color</p></figcaption></figure>

### <mark style="color:blue;">3. Dropdown list</mark>

<figure><img src="/files/FgqsxLqjYHwt6SV7Uwlv" alt="" width="563"><figcaption><p>Style dropdown list</p></figcaption></figure>

### <mark style="color:blue;">4. Dropdown list with image/color</mark>

<figure><img src="/files/cAyyNNe0TNYw0zgIztNv" alt="" width="563"><figcaption><p>Style dropdown list with image/color</p></figcaption></figure>

### <mark style="color:blue;">5. Image with title product and price</mark>

<figure><img src="/files/haVF7qn2ePmsNNQFEdoL" alt="" width="563"><figcaption><p>Image/color with title product and price</p></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.globo.io/group-products-as-variants/group-product-style.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.