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

# EComposer Builder

Show the app's widgets on an EComposer product template.

{% stepper %}
{% step %}

### Open the template

Open the **EComposer Builder** app, go to **Templates**, filter for product templates and open the one you want to edit. Open the product details section.
{% endstep %}

{% step %}

### Add a code element

Click **Elements → Shopify → Code** and drag it to the position 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 EComposer's variant picker

Leave EComposer's own variant picker on the page — the app needs it. If both pickers end up visible, hide the duplicate rather than removing it.
{% endstep %}

{% step %}

### Save and publish

Save and publish the template, then preview a product page in your online store.
{% endstep %}
{% endstepper %}

## Related pages

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