# 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FyAVX5WAYchCuB7ApRsn6%2Fimage.png?alt=media&#x26;token=97b84918-1d4d-49d4-9eee-d67ce306ae19" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2F5bix4iGdGd1gox2iO2uG%2Fimage.png?alt=media&#x26;token=7a5bd213-dbc7-4daa-9626-fb5d2c727380" alt="" width="563"><figcaption><p>Add app block</p></figcaption></figure>

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

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FcSPAQd4Myq7lBaKU47KT%2Fimage.png?alt=media&#x26;token=a6f1bd87-632a-4fe5-bd8b-a816c9e307ae" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fu5h5EAbjPk9hmYqbvqzi%2Fimage.png?alt=media&#x26;token=c97fa652-f8f6-409d-89d0-88d515153081" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FjgyzuXluufkfCLvniRo5%2Fimage.png?alt=media&#x26;token=cccdc381-4889-40cf-b6b3-89f666fd2c04" 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>**