# 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FF1SuUMGwEpZx6wU93qRX%2Fimage.png?alt=media&#x26;token=5fb50655-a4de-4dd8-88b3-9f6cc042d805" alt=""><figcaption><p>Templates product</p></figcaption></figure>

* Open product details section

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Ft8OXqywZLGhOlRd0dUxx%2Fimage.png?alt=media&#x26;token=e170c107-3fc1-4714-b63d-b99e6b556ee5" alt=""><figcaption><p>Modify template product</p></figcaption></figure>
{% endstep %}

{% step %}

### **Open section product details**

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

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FtnozBNPy9KXMcu8srW1F%2Fimage.png?alt=media&#x26;token=5b01f8c3-affd-4db6-bbf2-026b3a7049cb" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FEkFVYPFlU6iuiZ50fDzH%2Fimage.png?alt=media&#x26;token=82a4a516-c98b-4fe1-b613-6353160f685d" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FEpri1ZBaTVPUqvPTb6wB%2Fimage.png?alt=media&#x26;token=b809f51a-f333-4b6a-8854-391082aec3c2" 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 %}

{% step %}

### **Need more help?**

If you need more help, contact our support team, we are always here to assist.
{% endstep %}
{% endstepper %}