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

# Beae Page Builder

{% stepper %}
{% step %}

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

<figure><img src="/files/W64FJn3Dwp3BjpwQmSTq" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### **Open section feature product**

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

<div data-full-width="true"><figure><img src="/files/Mt1MZr90sqnj5XWk94qA" 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="/files/WJD1o9LrenWAyLXK56K2" 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="/files/mEPTmaRobORq0QAIlZls" alt=""><figcaption></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!