# 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2F0uOegQMEE0jfsB033zLi%2Fimage.png?alt=media&#x26;token=0a17ace6-e5f9-495f-a72b-422e5b1f15fc" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FJPhS2SHDkyLhXLEBeIBH%2Fimage.png?alt=media&#x26;token=997e8fbd-7498-412b-9b60-299fb15dda21" alt=""><figcaption><p>Add Element HTML/Liquild</p></figcaption></figure>
{% endstep %}

{% step %}

### Open code editor

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FEIvwP66aWizCl5y3Zeea%2Fimage.png?alt=media&#x26;token=0982db50-e80d-4b10-b205-16431ad01929" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FBwv2Ury5GLMUF8nJeEGv%2Fimage.png?alt=media&#x26;token=83fc0dad-4ba3-45f3-9ee7-efc4e94092ed" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2F3s55bsoRLp6Nj7dKlvre%2Fimage.png?alt=media&#x26;token=d1409356-8e97-4c8d-8844-4813fea96f73" 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>**