Skip to main content
The product page widget displays your active bundles on product pages, allowing customers to see bundle options and add bundled products to their cart with one click.

​
What is the product page widget?

The product page widget is a Shopify theme app block that shows bundle offers on product pages. When a customer visits a product page for any product that’s part of an active bundle, the widget displays the bundle information and an “Add to cart” button.

​
Adding the widget to your theme

1

Open the theme editor

Go to Online Store → Themes in your Shopify admin, then click Customize on your active theme.
2

Navigate to a product page

In the theme editor, use the page selector at the top to navigate to a product page template (usually “Product” or “Default product”).
3

Add the app block

Click Add block in the product template section. Scroll to the Apps section and select Product Bundles Widget.
4

Position the widget

Drag the widget block to your desired position on the page. Common placements:
  • Below the product description
  • Above the “Add to cart” button
  • In a separate section after product details
5

Save your changes

Click Save in the top right corner of the theme editor.

​
Widget behavior

​
When the widget appears

The widget displays only when:
  • The current product is part of at least one active bundle
  • The bundle products have available inventory
  • The app embed is enabled
If these conditions aren’t met, the widget doesn’t appear (no empty state shown).

​
Multiple bundles

If a product is part of multiple active bundles:
  • All applicable bundles are shown
  • Customers can choose which bundle to add
  • Each bundle has its own “Add to cart” button

​
Widget display for different bundle types

Classic and Fixed Bundles:
  • Shows all products in the bundle
  • Displays original price and bundle price
  • Shows total savings
  • “Add bundle to cart” button adds all products
Mix & Match Bundles:
  • Shows product selection grid
  • Quantity selector (e.g., “Choose 5”)
  • Selected products counter
  • “Add to cart” button (enabled when requirement is met)
Volume Discounts:
  • Shows quantity threshold (e.g., “Buy 3 or more, save 20%”)
  • Quantity selector
  • Price per unit (before and after discount)
  • “Add to cart” button
BOGO Bundles:
  • Shows trigger product(s) and reward product(s)
  • Discount on reward products
  • Total pricing with discount
  • “Add bundle to cart” button

​
Widget settings

Configure the widget appearance in the theme editor:

​
Block settings (in theme editor)

  • Widget position: Top, middle, or bottom of product page
  • Container width: Full width, centered, or custom
  • Spacing: Padding above and below the widget

​
Global style settings (in Product Bundles app)

Go to Settings in the app to customize:
  • Colors (background, text, button)
  • Button style and text
  • Font choices
  • Border and shadow effects
Changes apply to all widgets across your store.

​
Per-bundle customization (optional)

When creating or editing a bundle:
  1. Go to the Style tab
  2. Override global settings for this specific bundle
  3. Save changes
Use per-bundle styles for:
  • Seasonal or promotional bundles with unique branding
  • Testing different visual approaches
  • Special bundles that need distinctive appearance

​
Customizing widget appearance

​
Colors

Match your store’s branding:
  • Background color: Widget container background
  • Text color: Product names and descriptions
  • Price color: Original and discounted prices
  • Button color: Add to cart button background
  • Button text color: Add to cart button text

​
Button text

Customize the button text:
  • Default: “Add bundle to cart”
  • Examples: “Get this deal”, “Shop the bundle”, “Add all to cart”
  • Keep it short and action-oriented

​
Layout options

Some themes support additional layout options:
  • Horizontal vs. vertical product layout
  • Image size (small, medium, large)
  • Show/hide product prices
  • Show/hide savings amount
Check your theme documentation for available options.

​
Best practices

Position the widget where customers will see it without scrolling too far. Above the fold or just below the main product info works well.
Use colors and styles consistent with your theme. The widget should feel like a natural part of your store, not an add-on.
Use action-oriented language that clearly indicates what happens when clicked. “Add to cart” is universally understood.
Make sure the savings amount is visible. Customers should immediately see “Save $X” or “X% off”.
After adding the widget, check how it looks on mobile devices. Adjust settings if needed for mobile optimization.
If you have many bundles on one product, consider limiting to 2-3 most relevant bundles to avoid overwhelming customers.

​
Widget on different page types

​
Standard product pages

Widget appears on all standard product pages where products are in active bundles.

​
Quick view / product modals

Widget behavior in quick view depends on your theme. Some themes support app blocks in quick view, others don’t.

​
Collection pages

Widget typically doesn’t appear on collection pages (only on individual product pages). Use collection page banners or featured sections to promote bundles.

​
Troubleshooting

Widget not appearing:
  1. Verify the product is part of an active bundle
  2. Check that the app block is added in theme editor
  3. Ensure the app embed is enabled (Online Store → Themes → App embeds)
  4. Confirm products have available inventory
  5. Clear browser cache and check in incognito mode
Widget appears but looks broken:
  • Check for theme conflicts (try with a default theme)
  • Verify no custom CSS is interfering
  • Contact support if issue persists
Widget position is wrong:
  • Go to theme editor
  • Find the Product Bundles Widget block
  • Drag it to the desired position
  • Save changes
Multiple widgets appearing:
  • Check that you haven’t added the block multiple times in theme editor
  • Remove duplicate blocks
The widget is fully responsive and works on all devices. Test your widget on desktop, tablet, and mobile to ensure a great experience across all screen sizes.