Articles on: Discount Buy X Get Y BOGO Gift

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

This article is for Buy X Get Y offer only

Gempages

Go to the page editor in Gempages app > Choose Elements

Scroll down to the Advance tab > Select the Custom Code element > Drag and drop it to the position you want to embed the offer

Click on the Custom Code element > Choose to Edit code.

Add the following code to the HTML section:

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

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

Click on the HTML/Liquid section > Open code editor

Add the following code to the HTML section:

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

Save and the offer is embedded to your page successfully.

Updated on: 21/02/2025

Was this article helpful?

Thank you!