How to embed the Product Bundle offer to the product pages from pagebuilder apps (Gempages, Pagefly, etc.)

This article is for "Product Bundle" offer only

Step 1: Add the embed file to the theme

Firstly, you need to add the file to embed the offer to your theme.

Open your theme > Edit code



Add a new file under Snippets



Name the file as: qikify-bundle



Add the following code to that file and save

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



Step 2: Embed the offer
Gempages
Go to the page editor in Gempages app
Add an "Liquid" element to the position you want to embed the offer



Right-click on the element you just added => Edit code



Add this line of code to Template editor: {% render 'qikify-bundle' %}



Save and the offer is embedded to your page successfully.

Pagefly

Open the page editor in Pagefly app
Add an "HTML/Liquid" element to the position you want



Open code editor of that element



Add the following code to the editor: {% render 'qikify-bundle' %}



Save and the offer is embedded to your page successfully.

Updated on: 20/02/2025