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

[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: qikify-bogo

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

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-bogo' %}

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-bogo' %}

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