Radius BundlesHelp Center

Storefront

Setting up the storefront widget

5 min read

The bundle widget renders on your product pages through Shopify's theme extension system. Two components need to be enabled:

  1. The App Embed: the scripts and styles the widget needs, plus the cart savings banner, bundle analytics and the Hide express checkout buttons setting. Enable this once.
  2. The Widget Block: the visible bundle widget on a product page template. Add it to each template where you want bundles to appear.

Both are configured in the Shopify theme editor, not inside the Radius Bundles app.

#Step 1: Enable the App Embed

  1. In the Radius Bundles dashboard, find the setup guide at the top of the page.
  2. On the step "Enable the app embed", click Open theme editor. This opens your Shopify theme editor in a new tab with the app embed section pre-selected.
  3. In the theme editor, find the Radius Bundles toggle under App embeds and switch it on.
  4. Click Save in the theme editor.
  5. Return to the Radius Bundles dashboard and click Check status on step 1. The step should show as complete.
Theme editor
App embed toggle in the Shopify theme editor
App embed toggle in the Shopify theme editor

If you dismissed the setup guide, you can reach the theme editor directly:

  1. In Shopify admin, go to Online Store → Themes.
  2. Click Customize on your active theme.
  3. In the left panel, click the puzzle-piece icon (App embeds).
  4. Find Radius Bundles and toggle it on.
  5. Click Save.

#Step 2: Add the Widget Block to your product page

The widget block places the bundle widget on a specific page template. Add it to your product page template, plus any other template where you want bundles to appear.

  1. In the Shopify theme editor, navigate to a product page. You can do this by:
    • Clicking Products → All products in the left panel and selecting a product
    • Or navigating to a product page on your storefront preview within the editor
  2. In the left panel under the page sections, look for an Add block button inside the section list. The label may differ between themes. Some call it Add section instead.
  3. Search for Radius Bundles or look under Apps.
  4. Click the Radius Bundles block to add it.
  5. Drag it to the position where you want the widget to appear. Good placements: below the product form (title, price, add to cart button) or below the product description.
  6. Click Save.
your-store.myshopify.com
Adding the Radius Bundles app block on a product page template
Adding the Radius Bundles app block on a product page template

The block is now part of your product page template. It will appear on every product page that uses this template, but only render a widget if that product belongs to at least one active bundle.

#Verifying it works

  1. Open a product that belongs to an active bundle in a browser (not the theme editor preview).
  2. The bundle widget should appear at the position you set.
your-store.myshopify.com
Bundle widget rendered on a product page storefront
Bundle widget rendered on a product page storefront
  1. If you see the widget but it shows no products, the bundle may be in DRAFT status. Switch it to ACTIVE from the bundle list.

If the widget doesn't appear at all:

  • Confirm the App Embed is enabled (step 1 above).
  • Confirm the Widget Block was added and saved.
  • Confirm the bundle is ACTIVE and includes the product you're viewing.
  • Try Settings → Tools → Sync to Shopify to force a data refresh. See Sync to Shopify for details.

#Which bundle shows on a page

The block shows one bundle per product page:

  • It picks from the active bundles that include the product on that page. A Frequently Bought Together bundle shows only on its main product's page.
  • When more than one fits, When more than one bundle fits a product in Settings → General decides: the highest priority number, or the biggest saving. On a tie, the newest bundle wins.
  • If no bundle you built fits, an active automatic Frequently Bought Together offer for the product shows instead.
  • If nothing fits, the block shows nothing. There's no empty box on the page.

#Showing different bundles on different pages

Different products. Put each product in the bundle you want on its page. A product page only shows bundles that include that product.

One product in several bundles. Set each bundle's priority in the editor's Bundle priority card. The highest number shows (with You choose the order in Settings → General).

Different bundle types on different templates. Use the block's Bundle type filter:

  1. In the theme editor, create a product template (for example "product-volume") or open an existing one.
  2. Add the Radius Bundles block and set Bundle type filter to the type it should show, for example Volume Discount. Save.
  3. In Shopify admin, open each product that should use it and choose the template under Theme template.

Products on that template then show only their volume offer, while products on your default template (filter Default) show their highest-priority bundle of any type. If a product has no active bundle of the filtered type, the block shows nothing.

Multiple templates. If your store already uses different templates for different product categories, add the block to each template. Each one has its own settings.

#Positioning the widget

In the theme editor, you can drag the Widget Block to different positions within the page layout. Common placements:

  • Below the add-to-cart form: Shows the bundle right after the buy button. Good for impulse purchases.
  • Below the product description: Less intrusive. Good for stores where the description is the focus.
  • Above the product images: Works in some themes, but test on mobile before committing to it.

#Per-block settings in the theme editor

When you click the Widget Block in the theme editor, Shopify shows a settings panel for that block.

Bundle Filter

  • Bundle type filter: drop-down that restricts this block to one bundle type: Default (shows the highest-priority active bundle regardless of type), Fixed Bundle, Buy X Get Y, BOGO, Volume Discount, Mix & match or Frequently bought together. Useful when different product templates should show different bundle types.

Advanced

  • Override container settings: when on, two extra controls appear:
    • Widget max width: slider from 300px to 2000px in steps of 50 (default 600px) for this block, overriding the global setting
    • Widget alignment: Use global default, Left, Center or Right for this block
  • Override typography settings: when on, two extra controls appear:
    • Heading size: Use global default, Small, Medium or Large
    • Body text size: Use global default, Small, Medium or Large
  • More product settings: on by default; controls the "show more" link for long Fixed bundles (other types ignore it):
    • Product count: how many products show before the link appears (2–10; default: 6)
    • More products text: label on the expand link (default: + {count} more products)
    • Show less text: label on the collapse link (default: Show less)
Theme editor
The Radius Bundles block settings in the theme editor
The Radius Bundles block settings in the theme editor

Changes here apply only to this block instance. Global appearance settings live in Settings → Widget style → Open style customizer. See Customizing the widget appearance.

Next: Customizing the widget appearance