# Display on product page

### <mark style="color:blue;">**1. Enable swatch setting on product page**</mark>

* Open the **Globo Color Swatch** app from your Shopify admin panel.
* Navigate to the **Settings** section.
* Enable the **Swatch on Product Page** option to activate swatches on product pages.

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FcpQOrVQbK5S9th2dE3pi%2Fimage.png?alt=media&#x26;token=bae15e4a-1583-4762-bc1b-fee20193eea1" alt=""><figcaption><p>Setting on product page</p></figcaption></figure>

### <mark style="color:blue;">2. Choose display style</mark>

* Navigate to the **Dashboard** app&#x20;
* **Change the style** for each option in the **Options list.** If you do not change, we display it as default type **Button**

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Frx4iITFrQL5J6GlzFlge%2Fimage.png?alt=media&#x26;token=9f7b0267-e11d-4181-8af4-b5b9e3b53bc6" alt=""><figcaption><p>Change style option</p></figcaption></figure>

* Click the **save** button to save the changes.

### <mark style="color:blue;">3. Add app block in theme settings</mark>

* Go to **Online Store > Themes > Customize**.
* Select **Product Page** in the theme editor.
* Click **Add block > Apps** and choose **Globo Color Swatch > Variant swatchs**  to display variant app

{% hint style="info" %}
You can use the application block to move to the position you want.
{% endhint %}

> #### <mark style="color:red;">Required\* :</mark>
>
> * <mark style="color:red;">The default theme variant picker block must be kept, not deleted to ensure the default theme and add to cart functionality works properly.</mark>&#x20;
> * If you want to hide it before the app displays, please [contact us ](#user-content-fn-1)[^1]

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FwoCOojelTVQorTy3rqpD%2Fimage.png?alt=media&#x26;token=695b24cb-1616-4373-95b4-48d550fd9132" alt=""><figcaption><p>Add block variant swatchs</p></figcaption></figure>

### <mark style="color:blue;">4. Enable app embed and preview</mark>

* In **Online Store -**> **Themes -**> **Customize**
* Click to **App embeds** -> find **Globo Color Swatch** -> **Enable**

  <br>

  <figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FqhDLigrIqvqeKTGLcHI9%2Fimage.png?alt=media&#x26;token=a68148ff-69af-42eb-af28-225d674299d0" alt=""><figcaption><p>Enable app embed</p></figcaption></figure>

### <mark style="color:blue;">5. Result</mark>

* View product online store&#x20;

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FGP6jMqzCp4weetCScfEv%2Fimage.png?alt=media&#x26;token=6788d791-bca8-41c7-bbb7-c9db9d42c209" alt=""><figcaption><p>Result variant swatch app</p></figcaption></figure>

***

## **App still not working on product page?**&#x20;

1. Make sure your current product status is **active** and you have **synced data** in the app.
2. Double check your **pricing**, if you are on free plan, app will only show **first 100 products**
3. If you see it showing in the **default language**, and **not in other languages**, please double check if **pricing supports multi-language**
4. If it still doesn't work, please contact us, our support will help you solve the problem.

[^1]: <hi@globosoftware.net>