> 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/pagefly.md).

# PageFly Landing Page Builder

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

PageFly builds its own product templates, so the app's widgets need a container element to render into.

{% stepper %}
{% step %}

### Open the template

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

{% step %}

### Add an HTML/Liquid element

In the builder, find the **HTML/Liquid** element and drag it to the position where the widget should appear.
{% endstep %}

{% step %}

### Paste the container

Open the element's code editor and paste the container for the widget you want:

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

<!-- Product groups -->
<div class="globo-product-groups-detail"></div>

<!-- Product bundles -->
<div class="globo_color_swatch_bundle_combo"></div>
```

{% endstep %}

{% step %}

### Keep PageFly's variant picker

Add PageFly's own variant element — **Add Elements → Shopify → Product Variant** — and leave it on the page in whichever style you prefer. The app works alongside it.
{% endstep %}

{% step %}

### Save and publish

Save the template, publish it to your live theme, then open a product page on your storefront and check the widget.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
If the wrong variant ends up in the cart, or you see two variant pickers, [contact support](/swatch/help/contact-support.md) — we'll adjust the integration for your template.
{% endhint %}

## Related pages

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