[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 blockId = block.id

 %}

 <div id="qbk-bundle-offer-{{ productId }}-{{ blockId }}"></div>

 <qbk-inject-offer

   mount-id="qbk-bundle-offer-{{ productId }}-{{ blockId }}"

   handle="{{ handle }}"

   section-id="{{ section.id }}"

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

• 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] How to setup an upsell/cross-sell offer?

  Step 1: Manage Extensions Let's start creating a new offer by clicking on the "Create Offer" button on Dashboard. It will automatically redirect you to the "Manage Extensions" tab. Or you can directly access to "Manage Extensions" tab through the ...

• [Integration] How to use qikify Upsell, Cross-sell app with PageFly

  About PageFly Page Builder PageFly is a user-friendly page builder app specifically designed for Shopify stores. It allows you to create visually appealing and high-converting website without needing any coding knowledge. With its drag-and-drop ...