Skip to main content

Widget placement

Where the widget can appear, and exactly how the store-wide settings and each bundle's own toggles combine to decide whether it shows.

Written by Andrey Gadashevich

Bundle-level placement settings

Show the widget on product pages of included bundle items

Found in Bundle form → Advanced tab → Widget placement, on every bundle type and structure. Greyed out on a non-primary variant of a running A/B test.

Tick this to make the bundle appear on the product pages of the products it contains.

What the shopper sees: the bundle widget on the page of each included product.

Select where the widget will be displayed

Found in Bundle form → Advanced tab → Widget placement → "Selected items: {count}" button, on Separate products and Product groups bundles. Greyed out while "Show the widget on product pages of included bundle items" is unticked.

Use this to pick exactly which of the bundle's items show this bundle on their own product page — every item is selected by default, and the button caption reports how many are selected.

What the shopper sees: the bundle only on the product pages you ticked here.

Show the widget on the bundle's own product page

Found in Bundle form → Advanced tab → Widget placement, on Physical and Shopify bundles — that is, bundles that have their own Shopify product.

Ticked and greyed out when the bundle offers a choice (any group with more than one product, or a first product with more than one variant), with the help text "Cannot be deselected if the bundle includes variants, as they will be chosen through this widget"; also greyed out on a non-primary A/B test variant.

Tick this to show the bundle widget on the bundle product's own page. When the bundle lets the shopper choose products or variants, it stays ticked and locked, because that choice is made inside the widget.

App-wide widget settings

Widget on product pages

Found in Widget customization → General tab → Global display, always available.

Set "Widget on product pages" to Yes for the app to show bundle widgets on the product pages of products included in your bundles.

Widget on bundle pages

Found in Widget customization → General tab → Global display, always available.

Set "Widget on bundle pages" to Yes for the app to show the bundle widget on the product page of a bundle's own product.

On product page

Found in Widget customization → General tab → Global display, shown while "Widget on product pages" is set to Yes (hidden, not greyed out, when it's No).

Choose "Top of the product form" or "Bottom of the product form" to decide where the automatic widget sits relative to your theme's Add-to-cart form. The app only applies this when it creates the widget container itself — if you've added the "Widget for product page" app block, that block's position in the theme editor wins, and this setting has no visible effect.

On bundle page

Found in Widget customization → General tab → Global display, shown while "Widget on bundle pages" is set to Yes (hidden when it's No).

Choose "Top of the product form" or "Bottom of the product form" to decide where the widget sits on a bundle product's own page — with the same caveat: a placed "Widget for bundle page" app block overrides it.

Placing widgets in your theme

MBC Bundles App (app embed)

Found in Shopify theme editor → App embeds, on every theme as soon as the app is installed. It's a per-theme on/off toggle.

Turn the "MBC Bundles App" embed on in the theme editor of the theme you're viewing — every block, widget and snippet on your storefront depends on it, and the setting is per theme, so a duplicated or draft theme needs its own.

Widget for product page (app block)

Found in Shopify theme editor → product template → Add block, on product templates only.

Add the "Widget for product page" block to your product template to pin the automatic product-page widget to an exact spot on the page.

Widget type

Found in Shopify theme editor → "Widget for product page" block → settings, once the block is placed.

Set "Widget type" to Default to place the regular bundle widget, or to Quantity breaks to place the volume-discount widget. A Default placement renders only non-volume-discount bundles, and a Quantity breaks placement renders only volume-discount bundles.

Widget for bundle page (app block)

Found in Shopify theme editor → product template → Add block, on product templates only.

Add the "Widget for bundle page" block to your product template to pin the widget that appears on a bundle product's own page.

Featured bundle (temp. 1)

Found in Shopify theme editor → any template → Add section/block, on any template, home page included.

Add "Featured bundle (temp. 1)" to any page to show one or more chosen bundles as a full promotional section with a product list, product and option selectors, a quantity selector, and Prev / Next buttons when several bundles are listed.

Featured bundle (temp. 2)

Found in Shopify theme editor → any template → Add section/block, on any template, home page included.

Use "Featured bundle (temp. 2)" only for a fixed bundle with no choices — it renders just an image, a title, a description, a countdown and one Add-to-cart button, and it shows only the first bundle ID you enter.

ID

Found in Shopify theme editor → Featured bundle block (both templates) → settings, once the block is placed.

Enter the bundle's numeric ID — the same number as in the copied shortcode's data-bundle-id — and separate several IDs with commas, for example 130,139, which temp. 1 shows in turn and temp. 2 reduces to the first match.

What the shopper sees: nothing at all when no listed ID matches a bundle of a supported type.

Hiding the widget's own Add to Cart button

Widget Customization → Add to cart button → Show button in widgets. This controls only the button the widget draws — never your theme's own Add to Cart button. It has two settings: On product pages, and On product and bundle pages.

It matters on exactly one page: the bundle's own product page. There, by default, the widget does not draw its own button, on the assumption that your theme's native buy button is the one shoppers should use. Switch to On product and bundle pages to have the widget draw its button there too.

Everywhere else — any other product's page, where the widget appears as a cross-sell — the widget always draws its own button, and this setting has no effect.

This control is shown for every bundle type except Volume discount. Do not confuse it with Hide "Add to Cart" button, option and quantity selection in Advanced settings, which is Volume-discount-only and hides your theme's button instead.

Placing a widget by hand

After a bundle has been saved once, the Widget placement card shows a read-only field with a Copy button holding this exact snippet:

<mbc-bundles-widget data-bundle-id="12345"></mbc-bundles-widget> 

(12345 is that bundle's numeric ID.) Copying it confirms with the toast "Copied to clipboard".

You can embed this bundle manually in any page via HTML

Found in Bundle form → Advanced tab → Widget placement → bottom of the card. Only shown when editing a bundle that's already been saved at least once — on the create screen there's no bundle ID yet, so no snippet is shown. It's also hidden on a non-primary A/B test variant.

Save the bundle once, then copy the snippet from the Widget placement card and paste it into any page, section or template to place that exact bundle's widget by hand.

What the shopper sees: that one bundle's widget wherever the snippet sits — home page, collection, blog, static page, cart, a custom Liquid block — with no product page and no Add-to-cart form required.

The manual snippet ignores the bundle's own Show the widget on product pages of included bundle items tick — the snippet carries only the bundle's ID, so that per-item filter is never applied.

The legacy <div id="mbcBundleItemsWidget"> element

This is a different thing from the manual snippet above, and shouldn't be confused with it. It's emitted by the "Widget for product page" app block when its Widget type is Default (the Quantity breaks option emits <div id="mbcBundleVolumeDiscount"> instead), and the app reuses the div verbatim if it already exists in your theme.

  • What it does: it's a placement marker, not a widget. It only moves the automatic product-page widget to that spot; the app then injects an <mbc-bundles-widget> inside it.

  • Where it works: on product pages only — the app runs its product-page setup only when the URL path contains /product and a product is present, and the block's own schema is restricted to the product template.

  • Where it does nothing: on any non-product template, and on a bundle's own product page, where the app uses <div id="mbcBundleItems"> from the "Widget for bundle page" block instead, and ignores this div.

  • Filtering: it's filtered exactly like the automatic widget — the store-wide setting, the per-bundle tick and the per-item selection all apply to it too.

What both placement methods require, without exception

  1. The "MBC Bundles App" embed must be enabled in the theme being viewed — without it the custom element is never defined, and the tag renders as empty inline HTML.

  2. The bundle must be in the storefront payload: Active, inside its active period, in the shopper's market, and not excluded for a B2B shopper.

  3. The bundle must still be within the shop's app plan — bundles beyond the plan are dropped from the payload.

How the store-wide setting and the per-bundle toggles combine

On the product page of an included item, the store-wide setting is evaluated first and rejects every bundle before any per-bundle field is read. Set Widget on product pages to No and no bundle's widget appears on any product page, regardless of anything else. With it set to Yes, a widget still only appears on a given item's page when both of the following are also true:

  • The bundle's own Show the widget on product pages of included bundle items tick is on.

  • That item is selected in Select where the widget will be displayed.

Miss either one and that item's page shows no widget for that bundle.

On a bundle's own product page, the same store-wide-first rule applies, with one exception: when the bundle offers a choice of product or variant — any group with more than one product, or a first product with more than one variant — the widget always shows, regardless of both the store-wide Widget on bundle pages setting and the bundle's own tick. When the bundle offers no such choice, the widget needs both: store-wide Widget on bundle pages set to Yes, and the bundle's own Show the widget on the bundle's own product page tick on. Either one missing, or store-wide set to No, means no widget.

A product page that is a bundle's own product page always returns that bundle — and, when "Allow other bundle widgets on this page" is on, the related bundles — without consulting the store-wide product-page setting.

Saving a store-wide setting rewrites every bundle

Found in Widget customization → General tab → Global display → Save, always.

Saving "Widget on product pages" writes that same Yes/No onto every bundle's own tick, and saving "Widget on bundle pages" writes it onto every Physical bundle whose products each have one variant. So if you flip a store-wide setting to No and back to Yes, every per-bundle tick resets to Yes, and you'll need to set your exceptions again.

Responsive placement — mobile versus desktop

There is one placement rule, and it's the same at every screen width. The widget is inserted into the theme's product form at the Top or Bottom position chosen in Global display — or into the "Widget for product page" / "Widget for bundle page" app block, or wherever the <mbc-bundles-widget> snippet was pasted — by a single DOM insertion with no viewport branch of any kind. The app has no mobile-specific placement setting and no breakpoint that moves the widget. The only width-dependent rule it ships is a cosmetic item separator below 767px, which changes how the rows inside the widget look, not where the widget sits.

What the shopper sees: the widget at the same point in the page on both breakpoints.

If you see the widget sitting in a different spot on mobile than on desktop, that isn't coming from a mobile-specific rule in the app — there isn't one. The likely explanation is your theme: many themes render a different product form, a second hidden form, or a sticky add-to-cart bar at mobile widths, and the widget lands in whichever form the app finds first on that breakpoint. This isn't confirmed for any specific theme, so if you run into it, contact support and mention which theme you're using and where the widget lands on each screen width — this is a case we want to capture.

Did this answer your question?