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

# Integrate with pagebuilder

**Qikify Upsell & Cross-sell** lets you embed offers directly on your product page when using a third-party page builder (GemPages, PageFly, Foxify, Shogun, etc.). 
There are 5 offer types you can embed this way:
* Add-on (Cross-sell)
* Frequently Bought Together
* Free Gift
* Product Recommendation

All offer types are embedded using the same method: adding a Liquid code snippet to an HTML/Custom Code element in your pagebuilder. 
Only the code itself differs between offer types — the embedding steps are identical.

### General steps:

1. Open your product page in the page builder editor.
2. Drag an HTML/Liquid (or Custom Code) element to the position where you want the offer to appear.
3. Paste the corresponding Liquid code for your chosen offer type into that element.
4. Save and publish the page.

Below are the exact element names for popular page builders, along with the Liquid code for each offer type.

---

## GemPages

Element to use: **Custom Code**

![](https://storage.crisp.chat/users/helpdesk/website/-/3/3/f/6/33f605886cba4e00/gempages-drag_158rqe6.gif)
![](https://storage.crisp.chat/users/helpdesk/website/-/3/3/f/6/33f605886cba4e00/image_1ppfmtu.png)

## PageFly

Element to use: **HTML/Liquid**

![](https://storage.crisp.chat/users/helpdesk/website/-/3/3/f/6/33f605886cba4e00/pagefly-drag_1cwd972.gif)
![](https://storage.crisp.chat/users/helpdesk/website/-/3/3/f/6/33f605886cba4e00/image_y1cf5f.png)

## Foxify

Element to use: **Custom Code**

![](https://storage.crisp.chat/users/helpdesk/website/-/3/3/f/6/33f605886cba4e00/foxify_ce7wg7.gif)
![](https://storage.crisp.chat/users/helpdesk/website/-/3/3/f/6/33f605886cba4e00/image_rl4fjr.png)

## Other page builders

Most other page builders (e.g. Shogun, Zipify, etc.) provide a similar element for adding custom HTML/Liquid code. Look for an element named something like **"Custom Code," "HTML,"** or **"HTML/Liquid,".** Drag it into the desired position on your product page, then add the relevant Liquid code below.

---

## Liquid code by offer type

### 1. Add-on (Cross-sell)

```liquid
{% assign productData = product %}
{% if productData %}
  {% liquid
    assign triggerId = productData.selected_or_first_available_variant.id
    assign handle = productData.handle
    assign productId = productData.id
    assign sectionId = section.id
  %}
  <div id="qbk-bogo-offer-{{ productId }}-{{ sectionId }}"></div>
  <qbk-inject-offer
    mount-id="qbk-bogo-offer-{{ productId }}-{{ sectionId }}"
    handle="{{ handle }}"
    section-id="{{ sectionId }}"
    trigger-id="{{ triggerId }}"
    product-id="{{ productId }}"
    type="bogo"
  >
  </qbk-inject-offer>
{% endif %}
```

### 2. Frequently Bought Together

```liquid
{% assign productData = product %}
{% if productData %}
  {% liquid
    assign triggerId = productData.selected_or_first_available_variant.id
    assign handle = productData.handle
    assign productId = productData.id
    assign sectionId = section.id
  %}
  <div id="qbk-bundle-offer-{{ productId }}-{{ sectionId }}"></div>
  <qbk-inject-offer
    mount-id="qbk-bundle-offer-{{ productId }}-{{ sectionId }}"
    handle="{{ handle }}"
    section-id="{{ sectionId }}"
    trigger-id="{{ triggerId }}"
    product-id="{{ productId }}"
    type="bundle"
  >
  </qbk-inject-offer>
{% endif %}
```

### 3. Free Gift

```liquid
{% assign productData = product %}
{% if productData %}
  {% liquid
    assign triggerId = productData.selected_or_first_available_variant.id
    assign handle = productData.handle
    assign productId = productData.id
    assign sectionId = section.id
  %}
  <div id="qbk-free-gift-offer-{{ productId }}-{{ sectionId }}"></div>
  <qbk-inject-offer
    mount-id="qbk-free-gift-offer-{{ productId }}-{{ sectionId }}"
    handle="{{ handle }}"
    section-id="{{ sectionId }}"
    trigger-id="{{ triggerId }}"
    product-id="{{ productId }}"
    type="free-gift"
  >
  </qbk-inject-offer>
{% endif %}
```

### 4. Product Recommendation

```liquid
{% liquid
  if block.settings.product.id
    assign productData = block.settings.product
  else
    assign productData = product
  endif
%}

{% if productData %}
  {% liquid
    assign triggerId = productData.selected_or_first_available_variant.id
    assign handle = productData.handle
    assign productId = productData.id
    assign sectionId = section.id
  %}
  <div id="qbk-product-recommendation-offer-{{ productId }}-{{ sectionId }}"></div>
  <qbk-inject-offer
    mount-id="qbk-product-recommendation-offer-{{ productId }}-{{ sectionId }}"
    handle="{{ handle }}"
    section-id="{{ sectionId }}"
    trigger-id="{{ triggerId }}"
    product-id="{{ productId }}"
    type="product-recommendation"
  >
  </qbk-inject-offer>
{% endif %}
```

---

## Notes
* The element must support raw HTML/Liquid rendering. If your page builder's element strips or escapes the code, the offer will not render.
* The offer will not render inside the page builder's editor. Please save your changes and check the offer's display on the preview or live page.

| Hopefully this instruction has helped you.
| Things change all the time, so if you run into issues please don't hesitate to share them with us at [contact@qikifysupport.on.crisp.email](mailto:contact@qikifysupport.on.crisp.email) or use the in-app live chat. We're happy to lend a hand 🤗