Choosing a widget layout and background decoration

This guide covers three appearance settings for your Bundlex Bundles widget: the overall layout, the container's maximum width, and an optional background decoration on the selected offer. Open the Style tab for layout, width, and decoration controls.

Set the widget layout

The layout controls how the offer cards (your quantity tiers) are arranged in the widget.

1. Open the bundle you want to edit.
2. Open the Style tab.
3. Under Widget layout, choose one of the options:
   • Stacked - offer cards sit one above another. This is the default.
   • Grid - offer cards sit side by side.

Use the live preview to check which arrangement fits your product page best.

This setting arranges the offer cards. To arrange the products inside one product-bundle offer, use that offer's separate bundle layout controls.

Choose the container max width

The max width sets how wide the whole widget container can grow on the product page. It lives in the Container panel under Widget style in the Style tab.

1. In the Style tab, open Container under Widget style.
2. Use the Max width dropdown to pick one of:
   • Shopify default (44rem) - caps the widget at 44rem within the available space.
   • Full width (100%) - the widget fills the available space in its column. This is the default for new bundles.
   • Custom - set your own value.
3. If you select Custom, a Width field appears. Enter a value in pixels (px).

Full width fills the available parent container; it does not widen your theme's product-information column. For spacing above and below the widget, use Margin top and Margin bottom in the same Container panel. See widget width and alignment if the surrounding theme layout is the restriction.

Add a background decoration

A decoration adds an animated background effect to the offer card. The decoration plays on the selected offer only, so it draws attention to whichever tier the customer has chosen.

1. In the Colors section of the Style tab, turn on the Decoration toggle. It is off by default, and turning it off removes the decoration.
2. Choose one of the styles that appear:
   • Blobs
   • Rings
   • Hearts
   • Starburst
   • Percent
   • Stars
   • Clock
   • Money

Each option has its own icon in the picker so you can tell the styles apart. The icons are simple glyphs, not an exact render of the effect, so check the live preview to see how the animation actually looks and to confirm it reads well against your selected-offer background color.

Tip: make the gift block transparent

If your bundle offers a free gift and you turn on a decoration, the gift block can sit on top of the effect and hide it. When that happens, Bundlex Bundles shows a suggestion under the decoration styles: Let the decoration show through the selected gift background.

Click Apply on that suggestion to add transparency to the selected gift's background color so the decoration shows through behind it. You can also do this manually in the Gift & upsell panel under Widget style by lowering the opacity of the Selected offer gift background color.

This suggestion only appears when a decoration is active, the bundle includes at least one gift, and the selected gift background color is still fully opaque (no transparency yet). Once you close it, it stays hidden for two days.