Skip to main content
Libautech
← Back to BlogSetup

Using Libautech Smart Upsell with custom page builders (Shopify)

Using Libautech Smart Upsell with Custom Page Builders on Shopify

If you're using a custom page builder, you can still show Libautech Smart Upsell offers by adding a few simple hooks.

Step 1 - Enable the App Embed

  • In Shopify Admin: Online Store → Themes → Customize
  • Go to App embeds
  • Toggle on "Libautech Smart Upsell"
  • Save

Placement Targets by Upsell Type

Frequently Bought Together (rendered after target)

Place this marker where you want FBT to appear afterwards:

<div class="lbtu-fbt-block-target"></div>

Product Addons (rendered after target)

Place this marker where you want Product Addons to appear afterwards:

<div class="lbtu-pa-block-target"></div>

Volume Discount & Bundles (rendered before target)

Place this marker; the widget will appear before it:

<div class="lbtu-vd-b-block-target"></div>

Popups (Checkout Button Hook)

Add this class to every checkout button (cart page, cart drawer, sticky bars, etc.):

  • Class: .cart--button-checkout

Example:

<button class="<other classes...> cart--button-checkout">Checkout</button>

Notes

  • Ensure the class names match exactly.
  • If your builder loads sections via AJAX (e.g., cart drawer), make sure the elements and classes exist in the final rendered DOM.

Need Help?

If you encounter any issues or need custom work or further help, reach us at support@libautech.com.

‍

Frequently Asked Questions

How do I add Libautech Smart Upsell to a custom Shopify page builder?
First, enable the Libautech Smart Upsell app embed in Shopify Admin under Online Store, Themes, Customize, then App Embeds. After saving, paste the appropriate HTML marker div into your page builder template wherever you want each upsell widget to appear. For checkout popups, add the class cart--button-checkout to every checkout button across your cart page, cart drawer, and any sticky bars.
What HTML markers does Libautech Smart Upsell use to place Frequently Bought Together and other widgets?
Libautech Smart Upsell relies on specific div class names to determine where each widget renders. Frequently Bought Together uses lbtu-fbt-block-target and renders after that element, Product Addons uses lbtu-pa-block-target and also renders after it, while Volume Discount and Bundles uses lbtu-vd-b-block-target and renders before it. The class names must match exactly, including hyphens, for the widgets to appear correctly.
Does Libautech Smart Upsell work with AJAX-loaded cart drawers in custom Shopify themes?
Yes, but you need to ensure the required marker elements and the cart--button-checkout class are present in the final rendered DOM after the AJAX load completes, not just in the initial HTML source. If your page builder injects the cart drawer dynamically, confirm those elements exist post-render, as the app reads the live DOM rather than the pre-load markup.