# PageFly Landing Page Builder

{% stepper %}
{% step %}

### **Go to admin app PageFly -> Edit product template**

* Go to Admin app PageFly
* Go to pages
* Select tab Product
* Choose template show app

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

{% step %}

### **Add element HTML/Liquild**

* In edit builder find Element HTML/Liquid
* Move element to position app show&#x20;

<figure><img src="/files/13TNoIMpb9gi9KLFUQZB" alt=""><figcaption><p>Add Element HTML/Liquild</p></figcaption></figure>
{% endstep %}

{% step %}

### Open code editor

<figure><img src="/files/Iz8azeY46Vk6VTGkiAct" alt=""><figcaption><p>Open Code Editor</p></figcaption></figure>
{% endstep %}

{% step %}

### **Add code show app**

1. <mark style="color:blue;">**Show Vairant Swatch App**</mark>

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

2. <mark style="color:blue;">**Show Group Product as Variants**</mark>

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

3. <mark style="color:blue;">**Show Product Bundles**</mark>&#x20;

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

4. <mark style="color:blue;">**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/1S1KJOciJGOKHcoWLjCD" alt=""><figcaption><p>Example add code</p></figcaption></figure>

{% endstep %}

{% step %}

### Keep variant picker default of PageFly

Our app currently works on pageFly variant picker events. So you need to **show PageFly variant picker** too to work perfectly.

If you have double varant picker in your product, please contact us we will fix it

<mark style="color:orange;">**Show variant picker of PageFly**</mark>

* Click **Add Elements** -> **Shopify**
* Select **Product Variant** -> choose any style variant of PageFly and show

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

{% step %}

### **Save and view live page**

* Click **Save**&#x20;
* **Public** new update to live theme&#x20;
* Go to the product page in frontstore and check if it works

{% endstep %}
{% endstepper %}

***

## Troubleshooting

* If the add to cart variant is not correct, please contact us to integrate it with the template you are using.
* For further assistance, contact us via **<hi@globosoftware.net>**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.globo.io/app-integrations/pagefly-landing-page-builder.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.