Customizing the look of each widget element

The Widget style section in Bundlex Bundles breaks the product-page widget into individual elements so you can style each one on its own. Open it in the bundle editor and you will find a set of accordion panels, one per element, where you control colors, fonts, borders, spacing, badges, and more.

How the Widget style section works

Open the bundle's Style tab and find Widget style. Click a panel heading to reveal that element's controls. Hovering over a heading highlights the matching element in the preview. Some panels appear only when the corresponding feature is available in the bundle.

Most panels share the same building blocks: a color picker, a font size, and a font style selector. Panels that style a box, such as the offer card or a badge, also expose a background color, border color, border width, and corner radius. Your changes save with the rest of the bundle.

The panels, element by element

Header

Controls the text color, font size, and font style of the widget header. Enter header text higher up in the Style tab to reveal Header alignment (Left, Center, Center line through, or Right). When the alignment is set to Center line through, an extra control appears in this panel for the line's color and thickness.

Offer card

This is the box around each offer (quantity tier). It is the largest panel because it covers three visual states:

• Offer not selected: background color, border color, and border width for the default state.
• Offer hover: the same three controls applied when a shopper hovers over the card.
• Offer selected: the same three controls for the currently chosen offer.

The panel also sets shared card properties: corner radius, the gap between cards, horizontal and vertical padding, and a Radio option to show or hide the radio button. The animated background effect is set separately with the Decoration toggle higher up in the Style tab (Blobs, Rings, Hearts, Starburst, Percent, Stars, Clock, or Money), and it appears on the selected offer only. The offer card colors also control the radio button appearance.

Offer title and offer subtitle

Two separate panels, each with a color, font size, and font style for the offer's title line and its subtitle line.

Discount label

Styles the discount label with a text color, background color, font size, and font style. Note that these settings also affect gift extra badges.

Offer image

Controls the offer image's size, corner radius, border color, border width, and a Shadow (None, Small, Medium, or Large). It also sets how the image is displayed:

• Original: keeps the image's native aspect ratio.
• Square: crops the image to a square.
• Square (top): crops the image to a square, keeping its top part.
• Square (fit): fits the whole image inside a square without cropping.

Quantity badge

Styles the small quantity number that can sit on the offer image. You can set its text color, background color, corner radius, font size, font style, and Position (Top right, Top left, Bottom right, or Bottom left). This number shows on the offer image when "Show quantity badge" is enabled.

Variant label

Sets the color, font size, and font style of variant option titles (for example Size or Color) and their row numbers.

Dropdown

For variant dropdowns, use the separate Dropdown panel to adjust text, background, border, corners and padding.

Offer badge

The badge is the callout (such as "Most popular") on an offer. Alongside the usual text color, background color, font size, and font style, this panel offers a Badge shape selector with many presets:

• Default, Folded, Pill
• Arrow Right, Arrow Left
• Square
• Banner, Banner Rounded
• Corner Ribbon, Side Ribbon, Side Ribbon Alt, Side Ribbon Rounded

Price

The Price panel groups three text styles, each with its own color, font size, and font style:

• Main price: the active selling price.
• Compare price: the struck-through "before" price.
• Per item text: the per-unit price text.

Bundle

Product bundles also have a Bundle panel for product-title text, the border between bundle items and the plus sign between products.

Benefits

Styles the benefit bullet list. Here you set a shared font size and font style, plus a separate Text color and Icon color so the icons and the wording can differ.

Gift & upsell

Styles the free gift block in two states, each with a background color, title color, font size, and font style:

• Selected offer gift: the gift block on the chosen offer.
• Not selected offer gift: the gift block on other offers.

A third group, Gift image, controls the gift image's width and corner radius.

Gift and mix-and-match popup images

Open Style > Modal style > Gift modal and find Image fit. You can also reach these controls from the Customize modal style button beside an offer's Gift picker wording or Mix & match wording. Choose Original to preserve the whole photo's proportions or Square for uniform thumbnails. The setting is shared by gift-selection and bundle-pool popups within this discount; the main widget's images use the separate Offer image controls.

Footer

Sets the color, font size, and font style of the widget footer text.

Container and max width

The Container panel controls the overall width of the widget through a Max width setting:

• Shopify default (44rem): caps the widget at 44rem within the available space.
• Full width (100%): lets the widget stretch to its container.
• Custom: reveals a Width field where you enter a pixel value.

This panel also includes an Alert color used for the low-stock alert text.

Use Margin top and Margin bottom here to adjust the space around this discount's widget before adding custom CSS.

Full width fills the widget's parent container. It cannot widen a narrow product-information column in your theme.

Editing tips

• Watch the live preview as you work. Because hovering over a panel heading highlights the matching element, you can confirm you are editing the right part before changing a value.
• Style the offer card's three states (not selected, hover, selected) together so the selected state stands out clearly from the rest.
• If you need styling that the panels do not expose, the Custom CSS row in the Advanced section, at the bottom of the Style tab, lets you add CSS to override widget styles.