# Show product group online store

{% stepper %}
{% step %}

### <mark style="color:blue;">Enable app embed</mark>

Go to theme customize -> find GLOBO Color Swatch -> enable app embed

<figure><img src="/files/VDdoLYo9uaHLh3SYgK2X" alt=""><figcaption><p>Enable app embed</p></figcaption></figure>
{% endstep %}

{% step %}

### <mark style="color:blue;">Show on product page</mark>

{% hint style="info" %}
You can use the app block to move product group up and down to the position you want.
{% endhint %}

Go to product page -> add block&#x20;

<figure><img src="/files/MaiDRrylICSpnNU6Okfd" alt="" width="563"><figcaption><p>Add app block</p></figcaption></figure>

In tab **Apps** -> Choose **Product Groups** of GLOBO Color Swatch

<figure><img src="/files/XGMEena9hU42CljvAmH0" alt="" width="563"><figcaption><p>Add app block</p></figcaption></figure>

<mark style="color:purple;">E.g: show on product page</mark>

<figure><img src="/files/cK6ajdCLiZwIAFrGwfei" alt=""><figcaption><p>Show on product page</p></figcaption></figure>
{% endstep %}

{% step %}

### <mark style="color:blue;">Show on collection page</mark>

{% hint style="info" %}
The application will **automatically** find the product card on the collection page and other pages to display **bellow product title**, so for the collection page you just need to enable the show on collection page setting in the product group configuration to complete.

In case the application has not recognized the product card to display the product group, please contact us via **<hi@globosoftware.net>**
{% endhint %}

If you want to control the position, use the following code and add it to the prodct item card, note that this action you need to understand the liquid code. App automatic show on collection page if you enable on

```html
<div class="globo-product-groups-collection"></div>
```

<mark style="color:purple;">E.g: show on collection page</mark><br>

<figure><img src="/files/ey7PQie7UExp4y9Tk5Kl" alt=""><figcaption><p>Show on collection page</p></figcaption></figure>
{% endstep %}
{% endstepper %}

***

### More customize?&#x20;

* Show sold out style for product group
* Hover option color/image and change image in card product on collection
* Customize style product group

For further assistance, contact us via **<hi@globosoftware.net>**


---

# 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/show-product-group-online-store.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.