> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://koala-gift.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).

# Koala Free Gift + GemPages Integration Guide

### In this guide, you will learn how to integrate Koala Free Gift with GemPages Page Builder.
---

# App block Types

1. Our app comes with three app blocks that you can find in the Shopify theme editor called:
* **Announcement Bar**,
* **Product Page Upsell**,
* **Product Page Widget**.

The **Announcement Bar** and **Product Page Widget** app blocks refer to the Announcement bar and Product page widget options you may find in the Offer exposure section within a gift offer. And the **Product Page Upsell** app block refers to all upsell offers.

Adding the correct app block allows you to place the widget exactly where you want it and can help resolve layout or compatibility issues.

![](https://storage.crisp.chat/users/helpdesk/website/-/6/3/8/0/63800cb929deb000/app-blocks-1_xv81x5.png)
![](https://storage.crisp.chat/users/helpdesk/website/-/6/3/8/0/63800cb929deb000/app-blocks_jqhf7w.png)
![](https://storage.crisp.chat/users/helpdesk/website/-/6/3/8/0/63800cb929deb000/image_1l96wau.png)

# App block Integration

1. Navigate to the Shopify Apps section within **GemPages** and add the **Shopify App** app block.

![](https://storage.crisp.chat/users/helpdesk/website/-/6/3/8/0/63800cb929deb000/shopify-app_t0njgq.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_18ni0ps.png)
3. Publish the page. Then, click the **Shopify app** block and open the **Shopify editor**.

![](https://storage.crisp.chat/users/helpdesk/website/-/6/3/8/0/63800cb929deb000/shopify-editor_183ifnz.png)
4. From the Shopify editor, click on the section that contains the **Shopify App** block you placed in GemPages.

![](https://storage.crisp.chat/users/helpdesk/website/-/6/3/8/0/63800cb929deb000/add-block_gaqqtp.png)
5. Click **Apps** in the pop up and add **t**he correct app block from the dropdown. In this example, the **Product Page Widget** app block is added.

|| Choose the block that matches the exposure setting or offer type you are using in Koala Free Gift:
|| Announcement Bar – for announcement bars,
|| Product Page Wid­get – for the product page widget,
|| Product Page Upsell – for all upsell offers.

![](https://storage.crisp.chat/users/helpdesk/website/-/6/3/8/0/63800cb929deb000/app-block-1_1l3dc6k.png)
6. The widget should now load and appear in the preview exactly where you placed the Shopify App block in **GemPages**.

![](https://storage.crisp.chat/users/helpdesk/website/-/6/3/8/0/63800cb929deb000/app-block-2_1u7vpcd.png)