How to match the widget to your theme colors

Bundlex 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 widget settings. The Widget color presets panel sits 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 three 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.
• Custom color - click the swatch with the plus icon to open a color picker and choose any hex value.
• Random color - click the refresh swatch to roll a random color if you just want to explore options.

Whichever you pick, Bundlex 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 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 how each offer card is filled:

• Off - offer backgrounds get a light tint of your colors, so each tier reads as its own card.
• On - offer backgrounds stay transparent for a cleaner, flatter look that blends into the page.

Flipping the toggle re-applies the current preset in the new style, so the change shows up in the preview right away.

The "Apply border radius" suggestion

Colors aren't the only thing Bundlex can borrow from your theme. If it detects that your theme's corner radius differs from the widget's current corners, a small Apply border radius suggestion appears, labeled Suggested, with the note "Match widget corners to your theme."

1. Click the suggestion 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 only shows when there's an actual difference to apply, so if you don't see it, your corners already match.

No AI involved

These presets are generated entirely in your browser from your theme's color schemes using a fixed, deterministic palette method. There's no AI service and no guesswork: Bundlex simply reads your theme settings, derives matching shades, and applies them. The same theme always produces the same suggestions.

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