[Version 2] How to manually 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.

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:

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

5. Save

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.

• Related Articles

• [Version 2] How to manually embed the "Cross-sell, Upsell" offer to the product pages from pagebuilder apps (Gempages, Pagefly, etc.)?

  This article is for "Cross-sell, Upsell" 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. 1. Open your theme > Edit code 2. Add a new file under Snippets 3. Name the file as: ...

• [Version 2] Product Bundle offer

  1. What is Product Bundle offer? A product bundle allows you to sell multiple products together as a single unit such as a combo or package on your online store (e.g. Frequently bought together). 2. How to setup a Product bundle offer? Step 1: Create ...

• Product Offer

  Product Offer is to show recommended products on the checkout page and encourage customers to buy more before moving to Payment. Let's explore how to set a product offer. Step 1: General Settings Before creating a product offer, you should set up the ...

• [Version 2] How to enable embed offer?

  Step 1: Open Theme Editor Step 2: Enable theme app extension Open product detail page of item you want to embed the created offer Note: To preview the embed offer, you should open the detail page of the trigger product in the offer that you created ...

• [Version 2] Upsurge (Upgrade) offer

  1. What is Upsurge (Upgrade) offer? An Upsurge (Upgrade) offer typically involves encouraging the customer to purchase a higher-end version of the product they originally intended to buy. 2. How to setup an Upsurge (Upgrade) offer? Step 1: Create ...