Choosing a widget layout and background decoration

This guide covers three appearance settings for your bundle widget: the overall layout, the container's maximum width, and an optional background decoration on the selected offer. You'll find the layout under Widget settings, and the width and decoration controls inside Widget style.

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. Expand the Widget settings section.
3. Under Layout, choose one of the options:
   • Horizontal - offer cards sit side by side. This is the default.
   • Vertical - offer cards stack on top of each other.

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

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 section inside Widget style.

1. In Widget style, open the Container section.
2. Use the Max width dropdown to pick one of:
   • Shopify default (44rem) - matches Shopify's standard content width. This is the default.
   • Full width (100%) - the widget fills the available space in its column.
   • Custom - set your own value.
3. If you select Custom, a Width field appears. Enter a value in pixels (px).

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 Widget style, open the Offer card section.
2. Find the Decoration picker and choose one of the styles:
   • None (default, no decoration)
   • 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 shows a suggestion in the Offer card section: Make gift block transparent.

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 section 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).