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:
- Open your product page in the page builder editor.
- Drag an HTML/Liquid (or Custom Code) element to the position where you want the offer to appear.
- Paste the corresponding Liquid code for your chosen offer type into that element.
- 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
Thank you!