> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://koala-bundles.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to integrate Koala Bundles with PageFly?

### In this article, you will find out how to integrate our Koala Bundle app with PageFly Page Builder.
---

# Integration via App block

This method explains how to integrate the **Koala Bundle** app with **PageFly **using an App Block.

1. From **PageFly **Page editor, go to Third-party elements and add an **App block**.

![](https://storage.crisp.chat/users/helpdesk/website/-/6/3/8/0/63800cb929deb000/app-blocks-pagefly_18metvg.png)
2. Next, drag & drop the app block onto the section where you would like your widget to appear.

![](https://storage.crisp.chat/users/helpdesk/website/-/6/3/8/0/63800cb929deb000/image_1d535vm.png)
3. Publish the page and click **Go to theme editor**.

![](https://storage.crisp.chat/users/helpdesk/website/-/6/3/8/0/63800cb929deb000/theme-editor_17unbra.png)
4. From the Shopify editor, go to the **PageFly **section and click** Add block**.

![](https://storage.crisp.chat/users/helpdesk/website/-/6/3/8/0/63800cb929deb000/add-block-pagefly_189rn8c.png)
5. Click **Apps** in the pop up and add **t**he correct app block from the dropdown. In this example, the **Koala Deals** app block is added to display the volume discount offer.

|| Choose the block that matches the exposure setting or offer type you are using in Koala Bundles:
|| Koala Announcement Bar - for the Announcement bar widget.
|| Koala Bundle – for Bundle offers.
|| Koala Countdown Timer - for the Countdown timer widget.
|| Koala Deals – for Quantity Break, Volume Discount Bundle and Quantity Discount offers.
|| Koala Related Products - for Related Product offers.

![](https://storage.crisp.chat/users/helpdesk/website/-/b/1/c/5/b1c5f3d5ac381000/app-block-2_18n5ure.png)
6. The widget should now load and appear in the preview exactly where you placed the Shopify App block in **PageFly**.

![](https://storage.crisp.chat/users/helpdesk/website/-/b/1/c/5/b1c5f3d5ac381000/app-block-3_1bfn6gz.png)
|| Note: It's possible to display a Koala offer on both Product & Home pages, by following the same steps as above for each template.


# Integration via Code Snippet

* **Step 1:** 
Add a **koala-atc-btn** HTML class to the Add to cart button. (see Screenshot 1) 


![Screenshot 1](https://storage.crisp.chat/users/helpdesk/website/-/b/1/c/5/b1c5f3d5ac381000/pagefly1_1ofck2e.png)

* **Step 2:**
Add new element "Basic -> HTML/Liquid" to the desired position. Add content: **<div class='koala-insertion-point'></div>** (see Screenshot 2)

![Screenshot 2](https://storage.crisp.chat/users/helpdesk/website/-/b/1/c/5/b1c5f3d5ac381000/pagefly2_tipo3c.png)
![](https://storage.crisp.chat/users/helpdesk/website/-/b/1/c/5/b1c5f3d5ac381000/pagefly3_8ddksv.png)