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

Step 1: Add the embed file to the theme

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

1. Open your theme > Edit code

2. Add a new file under Snippets

3. Name the file as: qikify-bundle

4. 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

1. Go to the page editor in Gempages app
2. Add an "Liquid" element to the position you want to embed the offer

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

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

5. Save and the offer is embedded to your page successfully.

Pagefly

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

3. Open code editor of that element

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

5. Save and the offer is embedded to your page successfully.

Updated on: 20/02/2025