# Beae Page Builder

{% stepper %}
{% step %}

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

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fhv0dIfxD0kWqMGE4hP2G%2Fimage.png?alt=media&#x26;token=f4f95f23-e328-4354-985c-9db130b76ef8" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### **Open section feature product**

Click **add block** -> **Basic** -> **Code**

<div data-full-width="true"><figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FIuj3PGMf8rMFA4MmIFPi%2Fimage.png?alt=media&#x26;token=d0433241-7043-494c-8fd0-d846ff8f7c7b" alt=""><figcaption></figcaption></figure></div>
{% 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%2Fs5vNKOGM6jHqYTX3Dkz3%2Fimage.png?alt=media&#x26;token=b7ef718a-6cb4-4875-a958-3ba7e3e6b8bb" alt=""><figcaption><p>Example add code show variant swatch app</p></figcaption></figure>
{% endstep %}

{% step %}

### Keep variant picker default of Beae Page Builder

> Please keep variant picker default, if it show double variant picker beae page builder and Globo variant swatch, you can <mark style="color:red;">enable</mark> **hide on desktop** 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%2FlGTNacRPERBH4eSSb59l%2Fimage.png?alt=media&#x26;token=839ff92b-ac8e-46fa-b6d3-d23b30f6d31d" alt=""><figcaption></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 %}