Customizing the look of each widget element

The Widget style section 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

Each part of the widget gets its own collapsible panel. Click a panel heading to expand it and reveal that element's controls. A helpful detail while you edit: hovering or focusing a panel highlights the matching element in the live preview, so you can always see which part of the widget you are about to change.

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, plus its Position (Left, Center, Center line through, or Right). When the position is set to Center line through, an extra control appears 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. A Decoration control adds an animated background effect (None, Blobs, Rings, Hearts, Starburst, Percent, Stars, Clock, or Money), which appears on the selected offer only. As the in-app note explains, the offer card styling also controls 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 (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 labels

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

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.

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

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.

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): matches Shopify's standard content width.
• 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.

Editing tips

• Watch the live preview as you work. Because hovering or focusing a panel 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 panel at the bottom of the section lets you add CSS to override widget styles.