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

# Beae Page Builder

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

{% stepper %}
{% step %}

### Open the template

Open the **Beae Page Builder** app and open the product template you want to edit. Go to the featured product section.
{% endstep %}

{% step %}

### Add a code block

Click **Add block → Basic → Code** and place it where the widget should appear.
{% endstep %}

{% step %}

### Paste the container

```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 Beae's variant picker

Leave Beae's own variant picker on the page. If you end up with two visible pickers, use Beae's **hide on desktop** and **hide on mobile** options on the duplicate rather than deleting it.
{% endstep %}

{% step %}

### Save and publish

Save and publish the template, then check a product page on your storefront.
{% endstep %}
{% endstepper %}

## Related pages

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