> ## Documentation Index
> Fetch the complete documentation index at: https://bundles-docs.getappfox.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Product page widget

> Add and configure the bundle widget on product pages

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

<Steps>
  <Step title="Open the theme editor">
    Go to **Online Store** → **Themes** in your Shopify admin, then click **Customize** on your active theme.
  </Step>

  <Step title="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").
  </Step>

  <Step title="Add the app block">
    Click **Add block** in the product template section. Scroll to the **Apps** section and select **Product Bundles Widget**.
  </Step>

  <Step title="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
  </Step>

  <Step title="Save your changes">
    Click **Save** in the top right corner of the theme editor.
  </Step>
</Steps>

## 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

<AccordionGroup>
  <Accordion title="Place widget prominently" icon="eye">
    Position the widget where customers will see it without scrolling too far. Above the fold or just below the main product info works well.
  </Accordion>

  <Accordion title="Match your store design" icon="palette">
    Use colors and styles consistent with your theme. The widget should feel like a natural part of your store, not an add-on.
  </Accordion>

  <Accordion title="Keep button text clear" icon="text">
    Use action-oriented language that clearly indicates what happens when clicked. "Add to cart" is universally understood.
  </Accordion>

  <Accordion title="Show value prominently" icon="dollar-sign">
    Make sure the savings amount is visible. Customers should immediately see "Save \$X" or "X% off".
  </Accordion>

  <Accordion title="Test on mobile" icon="mobile">
    After adding the widget, check how it looks on mobile devices. Adjust settings if needed for mobile optimization.
  </Accordion>

  <Accordion title="Don't overcrowd" icon="maximize">
    If you have many bundles on one product, consider limiting to 2-3 most relevant bundles to avoid overwhelming customers.
  </Accordion>
</AccordionGroup>

## 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

<Tip>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.</Tip>