Skip to content
Tek Labs
Menu

Bundle widget colors and custom CSS

Bundle widget colors and custom CSS

Match the bundle widget to your brand with color presets, a custom brand color, CSS, and display toggles.

Install Mix & Match Bundles Try it on the demo store Store password: 1
  • Product page
  • Bundle page
Mix & Match Bundles bundle builder
Mix & Match Bundles · App Store listing

What it is

Bundle widget colors and custom CSS, explained

Mix & Match Bundles gives each campaign a Display step. You can pick a color preset, or choose a custom color and the app derives a full palette from it. Display toggles let you show or hide the progress bar and the variant picker, and a Custom CSS box lets developers fine-tune the widget.

Use it when the default look does not fit your theme. The app also offers to remove the Powered by trademark, which you request through the in-app chat.

For the shopper

How it works on your store

Scroll through the steps. The phone shows what the shopper sees at each one; products and prices are an example.

  1. Step 01 / 04

    Shopper sees on-brand colors

    The widget uses your preset or custom color for buttons, borders, and highlights.

  2. Step 02 / 04

    Progress is visible

    If the progress bar is on, it shows how close the bundle is to the next reward.

  3. Step 03 / 04

    Variants are easy to pick

    If the variant picker is on, variants of each product can be chosen directly in the widget.

  4. Step 04 / 04

    Custom CSS applies

    Any CSS you added is applied on top of the widget styles.

For you

Set it up in Mix & Match Bundles

Options you control

  • Color presets: Black, Purple, Pink, Red, Orange, Green, Blue, Teal
  • Custom color derived into a full palette
  • Show progress bar
  • Show variant picker
  • Custom CSS
  • Preview with a maximize option
  • Removed trademark request (Let us know)
  • Volume discount colors with a Yellow preset and individual color fields

  1. 01. Open Display and Color

    In the campaign editor go to step 2, Display and Color.

    Bundle Builder campaign Display step showing the Template and Color cards in the left settings list next to the live bundle preview
    App admin · App Store listing

  2. 02. Pick a color

    Choose a preset in Colors and Styles, or use the custom color picker.

    Bundle Builder campaign Display step with the Color card highlighted, showing the color presets and the Custom option
    App admin · App Store listing

  3. 03. Set display options

    Under Display switch Show progress bar and Show variant picker on or off.

    Bundle Builder campaign Display step with the Display card highlighted, showing the Show progress bar and Show picker options
    App admin · App Store listing

  4. 04. Add custom CSS

    Open Custom CSS and paste your rules. The editor warns to edit it only if you understand CSS.

    Bundle Builder campaign Display step with the Custom CSS card highlighted, with the warning to edit only if you understand CSS
    App admin · App Store listing

  5. 05. Check the preview

    Use the live preview, or maximize it, then Save.

Use cases

Where it pays off

Brand match

Use your brand color to color all buttons and highlights.

Simple layout

Turn off the progress bar for a single-tier offer.

Fine tuning

Adjust spacing or fonts with a few lines of CSS.

FAQ

Frequently asked questions

Can I use any color?

Yes. The custom color option generates a light tint and background from your primary color.

Can I remove the Powered by label?

The Display step has a Removed trademark section with a Let us know button that sends the request to the Tek Labs team.

Is there a live preview?

Yes. The editor has a Preview panel with a maximize option.

Related features

Mix & Match BundlesMix and match and build a boxLet shoppers build their own box or sample packRead more →Free Gifts BOGO & UpsellProduct bundlesFixed bundles and mix and match setsRead more →

Tell us the bundle you want to sell.

Build-a-box, gift sets, tiered bundle discounts: our team sets it up with you and checks it on your theme before it goes live.

Free plan available. Built for Shopify. Rated 4.9 from 35 reviews.

Book a free gift campaign planInstall free