# Gempage

{% stepper %}
{% step %}

### **Go to admin app Gempage -> Edit product template**

* Go to Admin app Gempage
* Go to pages
* Select tab Product
* Choose template show app

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FxSK1sdx6TieJCExIX0Nj%2Fimage.png?alt=media&#x26;token=b1eaffbb-a01d-4adb-88d4-76b54fbfd48e" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### **Add element app**

* In edit builder find Apps -> **GLOBO Color Swatch**&#x20;

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FkeccDkz2r9XlBVkaiCfQ%2Fimage.png?alt=media&#x26;token=98789aa9-c131-4cf3-9b49-4d54cd7cce1a" alt=""><figcaption><p>Add element app</p></figcaption></figure>
{% endstep %}

{% step %}

### Choose app block type

* <mark style="color:orange;">Show Vairant Swatch App</mark>
* <mark style="color:orange;">Show Group Product As Variants</mark>
* <mark style="color:orange;">Show Product Bundles</mark>
* <mark style="color:orange;">Show Quantity Breaks</mark>

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FVQqeFeUW6JJLFndR7mPr%2Fimage.png?alt=media&#x26;token=c0f07ba5-8f39-4a49-a121-1e83a2aae5a4" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Keep variant picker default of Gempage

Our app currently works on Gempage variant picker events. So you need to **show Gempage variant picker** too to work perfectly.

If you have double varant picker in your product, please contact us we will fix it

<mark style="color:orange;">**Show variant picker of Gempage**</mark>

* Click **Add Element**
* Select **Product Swatches** or **Product Variants** -> choose any style variant of Gempage and show

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FQ5PdYNWTSqCZTg5NJYo4%2Fimage.png?alt=media&#x26;token=b27df1d3-5c4d-4093-b472-6f49b6cbb93a" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### **Save and view live page**

* Click **Save**&#x20;
* **Public** new update to live theme&#x20;
* Go to the product page in frontstore and check if it works
  {% endstep %}
  {% endstepper %}

***

## Troubleshooting

* If the add to cart variant is not correct, please contact us to integrate it with the template you are using.
* For further assistance, visit our [Help Center](https://globo.io/kb/) or contact our support team.