The widget is too narrow or has a big gap

If the Bundlex widget on your product page looks narrower than the price, quantity selector, and Add to Cart button around it, or there is too much or too little space below it, the fix is small. You can either widen the widget to fill your content column or paste a short CSS snippet into the app embed. This guide covers both.

Why this happens

By default the widget uses a maximum width of 44rem, which matches Shopify's Dawn theme content column. On themes with a wider product information column, the widget ends up narrower than everything around it, so it does not line up with the elements above and below it. A separate spacing issue can leave a gap that is too small or too large between the widget and the rest of the product form.

A real example: on one store we checked, the widget rendered narrower than the product information column and there was a large gap between the widget and the Add to Cart button, which pushed the button down the page. Both issues were fixed with the steps below, without editing any theme code.

Fix 1: Set the widget to full width (try this first)

This is the quickest fix and needs no CSS. In the Bundlex dashboard, open the bundle's widget appearance settings and change the widget maximum width to Full width. This removes the 44rem cap so the widget expands to fill its parent column.

1. Open the bundle in the Bundlex dashboard.
2. Find the widget width setting in the appearance options.
3. Change it from the default to Full width.
4. Save, then reload your product page to confirm the widget now spans the full content column.

If Full width fixes the alignment, you are done. If your theme's column is unusually wide and full width looks too stretched, you can instead set a custom width in pixels to match your column, or use the CSS approach below for finer control.

Fix 2: Paste the width and spacing CSS

If you would rather force the widget to match your content column exactly, or full width does not fully resolve it, add a small CSS snippet to the app embed. This targets the widget container and the full-width countdown timer and forces both to 100% width with proper box sizing.

Where to paste it

1. In your Shopify admin, go to Online Store and click Customize on your live theme.
2. Open the App embeds section in the theme editor.
3. Click the Bundlex app embed to open its settings.
4. Find the Custom CSS field.
5. Paste the CSS below, then Save.

Width fix

This makes the widget and the countdown timer fill the full width of their column. Use it when the widget is narrower than the content around it.

.bx-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.bx-countdown-timer.bx-countdown-timer--full {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

The box-sizing: border-box rule keeps any padding inside the 100% width, so the widget does not overflow past your column edge.

Spacing fix

If the space below the widget is too small, add a controlled bottom margin to the last widget container on the page.

.bx-widget-container:last-of-type {
  margin-bottom: 16px !important;
}

You can adjust the 16px value up or down to taste. Using :last-of-type ensures only the final widget block gets the margin, so spacing between stacked elements is not affected. If the gap below the widget is instead far too large, that is usually theme-specific layout spacing rather than the widget itself, so contact support with your product URL and we can take a look.

Apply both at once

To fix width and spacing together, paste all three rules into the Custom CSS field:

.bx-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.bx-countdown-timer.bx-countdown-timer--full {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.bx-widget-container:last-of-type {
  margin-bottom: 16px !important;
}

After you save

• Reload your product page and check that the widget lines up with the price, quantity selector, and Add to Cart button.
• If you are not running a countdown timer, the countdown rule simply does nothing, so it is safe to leave in.
• If the widget still does not line up, your theme may use an extra-wide layout. Try the custom width option in the dashboard, or reach out to support with your product URL so the exact column width can be measured.