> ## 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 GemPages?

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

# Integration via App block

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

1. From **GemPages** Page editor, go to Shopify Apps and search for the **Koala Bundle** app block.

![](https://storage.crisp.chat/users/helpdesk/website/-/b/1/c/5/b1c5f3d5ac381000/app-block_fgsgtf.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/-/b/1/c/5/b1c5f3d5ac381000/image_ibegzv.png)
3. Click **Publish **and view the live page. The offer should now appear :)  

![](https://storage.crisp.chat/users/helpdesk/website/-/b/1/c/5/b1c5f3d5ac381000/image_mgv3g7.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:**
Please navigate to the **"Deal not visible?"** button in the upper right corner of the offer's settings.

![Deal not visible?](https://storage.crisp.chat/users/helpdesk/website/-/b/1/c/5/b1c5f3d5ac381000/screenshot-2025-03-20-at-16485_178pm3a.png)
* **Step 2:**
Add a **Custom code** element and paste the following code snippet to the **HTML/Liquid section**: **<koala-deal product-id="{{product.id}}"></koala-deal>**

![GemPages editor](https://storage.crisp.chat/users/helpdesk/website/-/b/1/c/5/b1c5f3d5ac381000/screenshot-2024-07-03-at-13071_1nuqeqx.png)
![](https://storage.crisp.chat/users/helpdesk/website/-/b/1/c/5/b1c5f3d5ac381000/image_qd9ut5.png)
|| Note: Make sure to have all display settings enabled in Advanced settings, in case the offer is not visible.

![Display settings](https://storage.crisp.chat/users/helpdesk/website/-/b/1/c/5/b1c5f3d5ac381000/image1ed4ns6-2-1_20l15l.png)
* **Step 3:**
Publish :)  
 
For more complicated use-cases please take a look at [GemPages documentation](https://help.gempages.net/articles/custom-code-liquid-element) related to the custom code element.