Where does the bundle widget show, and how do I move it?

Updated · SMART Bundles App & Upsells (E-TRADE PARTNER)

By default the widget inserts itself above your theme's Add to cart button on product pages. To put it somewhere else, add the Bundle widget app block in the theme editor, paste the app's HTML snippet into a page builder, or set a Custom position in Settings > Placement.

SMART Bundles App & Upsells is a free Shopify app for bundles, quantity breaks, free gifts and upsells.

Try it free
On this page
  1. How the app picks the spot
  2. Move it with the Bundle widget block
  3. Page builders: the HTML snippet
  4. Automatic insertion and Custom position
  5. Show a bundle outside product pages
  6. Limits and edge cases
  7. Frequently asked questions

How the app picks the spot

On a product page, the widget mounts in the first of these it finds. The app's Placement page states the same order.

  1. The Bundle widget app block, wherever you placed it in the theme editor.
  2. The HTML snippet from Settings > Placement, for page builders.
  3. Automatic insertion: above Add to cart, or before the element you set in Custom position. This is on by default.

All three need the app embed (Deal widget) turned on. See Turn on the app embed.

Move it with the Bundle widget block

  1. In your Shopify admin, go to Online Store, find your theme and click Edit theme.
  2. Open a product page in the theme editor.
  3. In the product information section, click Add block. Under Apps, choose Bundle widget.
  4. Drag the block to where the widget should go, then click Save.

In the theme editor the block shows a short hint that it displays on products with an active bundle. The block has no settings. Shopify notes that app blocks only work with compatible themes (Shopify Help Center). If your theme can't add app blocks, use the snippet or Custom position instead.

Page builders: the HTML snippet

  1. In the app, go to Settings > Placement.
  2. Next to HTML snippet, click Copy.
  3. In your page builder, add a custom HTML block to the product page and paste the snippet. The widget renders inside it.

The snippet is one empty placeholder element:

<div data-smart-widget></div>

Automatic insertion and Custom position

  • Insert automatically when no block or placeholder is present is on by default. The widget finds your theme's Add to cart button and goes above it.
  • Custom position takes a CSS selector of the element the widget should go before. Leave it empty to use the built-in theme list. It works while automatic insertion is on.
  • Turn automatic insertion off only if every product template has the block or the snippet. Products without either then show no widget.
  • Click Save in the save bar. Placement applies to every bundle in your store.

Show a bundle outside product pages

To show a bundle on the homepage, a landing page or a custom section, add the Bundle widget for a chosen product app block to that section and pick the Product. Leave it empty to use the section's own product, for example in a featured product section. The product needs an active bundle that targets it. In this block the widget shows its own Add to cart button.

Limits and edge cases

  • One bundle per product page. If two bundles target the same product, the editor warns you on the Show this bundle on card and only one widget shows.
  • Product pages only by default. There is no widget in the cart, the cart drawer or at checkout.
  • The theme's Add to cart button is used. On a product page the widget adds the chosen offer through your theme's own button. It shows a button of its own only when the product form has none.
  • Heavily customized themes. If the widget can't find your Add to cart button, set it in Settings > Theme selectors > Add to cart button. Automatic insertion then places the widget near it.
  • Only bundles have a product page widget. Volume discount, Order goal, Buy X get Y, Shipping discount and Advanced discount show nothing on the product page; they apply in the cart and at checkout. See Cart discounts.

Still no widget? Work through Bundle widget not showing.

Put bundle offers next to Add to cart

SMART Bundles App & Upsells is free on the Shopify App Store. Quantity breaks, mix and match and product bundles in a widget that uses your theme's own button.

Install free on Shopify

Frequently asked questions

›The widget shows in the wrong place on my product page. How do I fix it?

Add the Bundle widget app block where you want it and save the theme. An app block always wins over automatic insertion.

›I use a page builder for product pages. Will the widget show?

Paste the HTML snippet from Settings > Placement into a custom HTML block on the page. The widget renders inside it.

Related articles