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

PageFly

Element to use: HTML/Liquid

Foxify

Element to use: Custom Code

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)

{% 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

{% 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

{% 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
  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.

Updated on: 23/06/2026