> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/swatch/app-integrations/gempages.md).

# GemPages

Show the app's widgets on a GemPages product template.

{% stepper %}
{% step %}

### Open the template

Open the **GemPages** app, go to **Pages**, choose the **Product** tab and open the template you want to edit.
{% endstep %}

{% step %}

### Insert the app's element

In the builder, go to **Apps** and find **GLOBO Color Swatch**. Drag the element to where the widget should appear.
{% endstep %}

{% step %}

### Choose which widget to show

The element offers the app's three widgets — variant swatches, product groups and product bundles. Pick the one you want.

If you'd rather paste the container by hand, use a code element with:

```html
<div class="globo-swatch-product-detail"></div>
```

and the equivalents for the other widgets.
{% endstep %}

{% step %}

### Keep GemPages' variant picker

The app works from the GemPages variant picker's events, so that picker must stay on the page. Add either **Product Swatches** or **Product Variants** from GemPages' own elements.

{% hint style="warning" %}
Don't leave two variant pickers visible. If you end up with a duplicate, [contact support](/swatch/help/contact-support.md) and we'll hide it for your template.
{% endhint %}
{% endstep %}

{% step %}

### Save and publish

Save, publish to your live theme, then check a product page on your storefront.
{% endstep %}
{% endstepper %}

## Related pages

* [App integrations](/swatch/app-integrations/overview.md)