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

# Ecomposer Builder

{% stepper %}
{% step %}

### **Go to admin app** <mark style="color:orange;">Ecomposer builder</mark> **-> Edit product template**

* Open EComposer Builder app -> navigate to **Templates**
* In templates page -> filter product template and choose your template product&#x20;

<figure><img src="/files/rl1dkF0N7efANIDtGsYc" alt=""><figcaption><p>Templates product</p></figcaption></figure>

* Open product details section

<figure><img src="/files/flB6ooNrVxOYNolzrXZu" alt=""><figcaption><p>Modify template product</p></figcaption></figure>
{% endstep %}

{% step %}

### **Open section product details**

* Click **Elements** -> **Shopify** -> **Code**

<figure><img src="/files/TKPn7VjKG99589nyVZ7H" alt=""><figcaption><p>Add section code</p></figcaption></figure>
{% endstep %}

{% step %}

### Add code to show app

<mark style="color:orange;">Show Vairant Swatch App</mark>

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

<mark style="color:orange;">Show Group Product As Variants</mark>

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

<mark style="color:orange;">Show Product Bundles</mark>

```html
<div class="globo_color_swatch_bundle_combo"></div>
```

<mark style="color:orange;">Show Quantity Breaks</mark>

```html
<div class="globo_color_swatch_bundle_quantity_break"></div>
```

<mark style="color:purple;">Example add code: Show variant swatch app</mark>

<figure><img src="/files/Z5lSB4W1ejQ2LLbDxZGm" alt=""><figcaption><p>Add code show app</p></figcaption></figure>
{% endstep %}

{% step %}

### Keep variant picker default of Ecomposer Builder

> Please keep variant picker default, if it show double variant picker Ecomposer page builder and Globo variant swatch, you can <mark style="color:red;">enable</mark> **hide on desktop, hide on tablet** and **hide on mobile** to working perfect.

<figure><img src="/files/eQcC3HDihcLPYRoImDTE" alt=""><figcaption><p>Hide default variant picker </p></figcaption></figure>

{% endstep %}

{% step %}

### Save and public your page builder

You can preview your change in online store after public template
{% endstep %}
{% endstepper %}

***

**💬 Need help?**

Email us at **📧 <contact@globo.io>** - we’re happy to assist!