How to match the widget to your theme colors

Bundlex Bundles can match your bundle widget to your store's look in a few clicks. The Widget color presets panel reads your Shopify theme's color schemes and suggests ready-made color combinations, so your offers feel like a native part of the page instead of a bolt-on.

Where to find color presets

Open a bundle in the editor and go to the Style tab. The Widget color presets panel sits in the Colors section, above the detailed Widget style controls. Use presets to set everything at once, then fine-tune individual element colors in the Widget style section below if you want.

Pick a primary color

The Primary color row is the starting point for the whole palette. You have four ways to set it:

• Suggested swatches - the colored swatches are pulled straight from your Shopify theme's color schemes (button colors, text, backgrounds, and so on). Click one to apply it.
• Default colors - the dark gray swatch after your theme's swatches restores the widget's default black and white colors.
• Custom color - click the swatch with the plus icon to open a color picker and choose any hex value. Press Enter after typing the hex value and check that the preview changes.
• Random color - click the refresh swatch to roll a random color if you just want to explore options.

Whichever you pick, Bundlex Bundles instantly rebuilds the rest of the widget's colors around it and applies the result to the live preview.

Choose an accent (secondary) color

The Secondary color is the accent used for badges, active states, and highlights. Bundlex Bundles auto-generates it to harmonize with your primary color, and it offers a few harmony options as swatches you can click through.

If you'd rather set the accent yourself, you have the same two overrides as the primary row:

• Custom accent color - the plus swatch opens a picker for an exact hex value.
• Random harmony color - the refresh swatch picks a contrasting color from the color wheel that still works with your primary.

Transparent offers toggle

Next to the primary color you'll find a Transparent toggle that controls the background of unselected offer cards:

• Off - unselected offer backgrounds get a solid color (a light tint of your colors when it comes from a preset), so each tier reads as its own card.
• On - unselected offer backgrounds stay transparent for a cleaner, flatter look that blends into the page.

Flipping the toggle changes only the transparency of the unselected offer background. Your selected and hover backgrounds, text, badge and border colors stay as they are. Turning it off makes the background fully opaque again. Swatches you click while it is on apply the transparent version of that preset.

The corner radius suggestion

Colors aren't the only thing Bundlex Bundles can borrow from your theme. If it detects that your theme's corner radius differs from the widget's current corners, a note appears under the color presets: "Match widget corners to your theme", with an Apply button.

1. Click Apply on the banner to apply your theme's corner radius to the widget's offer cards, offer images, and cross-sell images.
2. Or dismiss it with the close icon if you prefer your current corners.

The suggestion can be absent because there is no detected difference, the theme does not provide a usable radius, or you closed it in the last two days. You can still set corners yourself under Widget style.

Fine-tune individual elements

After choosing your palette, expand an element under Widget style. Offer card lets you adjust its border radius, spacing and the selected, hover and unselected states separately. In this example we set the card radius to 8 pixels. Apply presets first, then make these final adjustments, because choosing another preset can replace individual color choices.

Save and check your storefront

Click Save. Test an active discount on its targeted product page. Select each offer, check text and badge contrast, choose variants and use Add to cart. Check the page on desktop and mobile, since the editor preview cannot show every theme background or screen size.

Our example keeps the same quantity-break rules: two Ivory Small bags have a $43.20 merchandise subtotal after 10% off. Styling changes the presentation; it does not change the discount calculation. Check cart and checkout as part of your final review.

How suggestions are generated

Bundlex Bundles reads your theme's color settings and derives matching shades. The theme-derived suggestions are repeatable for the same theme settings. The Random color and Random harmony controls deliberately produce new choices.

Tips

• Presets are a fast starting point. After applying one, you can still adjust any single element color in Widget style.
• If no suggested swatches appear, Bundlex Bundles couldn't read color values from your active theme. You can still use the custom and random options.
• Use the live preview to check contrast, especially with the Transparent toggle on, so badges and text stay readable on your page background.