Articles on: Mix & Match Bundle

How Theme Colors Work in the Mix & Match Bundle Editor

Theme Colors provide a shared color system for your Mix & Match Bundle.
You can use a preset theme, customize the main colors, adjust automatically generated supporting colors, and save your own color theme.
Each component can either use a Theme Color or use its own custom color.


Open the Color Theme Settings

Open your Mix & Match Bundle and click:
Bundle Design
Then open:
Color theme
[IMAGE: Bundle Design → Color theme]


Store Background Preview

The Store background preview setting helps you preview how the Bundle may look against your storefront background.
This setting only affects the editor preview.
It:

  • Does not change your Shopify theme background
  • Is not saved as part of the Bundle theme
  • Does not affect the storefront

Use it only to check whether the Bundle colors work well with your store background.
[IMAGE: Store background preview]


Choose a Preset Theme

uShopAid includes preset color themes such as:

  • Black
  • Sage
  • Warm

Click a preset to apply its color scheme to the current Bundle.
A preset provides a coordinated set of:

  • Primary colors
  • Text colors
  • Background colors
  • Border colors

This is the fastest way to establish a consistent visual style.
[IMAGE: Black, Sage, and Warm preset themes]



Current Theme Colors

The current theme is built from four main colors:

Primary

Used for important interactive and highlighted elements, such as:

  • Main buttons
  • Selected states
  • Progress states
  • Important labels
  • Other highlighted elements

Text

Used as the main text color throughout the Bundle.

Background

Used as the main background color for Bundle areas and components.

Border

Used for borders, dividers, product cards, and other outlined elements.
[IMAGE: Current theme colors]


When one of these colors is changed, components using that Theme Color will update automatically.


Advanced Color Settings

uShopAid automatically generates supporting colors from the four main Theme Colors.
Open:
Advanced color settings
to view or customize them.
These supporting colors include:

Primary colors

  • Hover
  • Subtle

Text colors

  • Secondary
  • Muted
  • On primary

Background colors

  • Hover
  • Subtle

Border colors

  • Strong
  • Focus

[IMAGE: Advanced color settings]


These colors help maintain consistent hover states, secondary text, subtle backgrounds, borders, and focus states.
You can manually adjust any supporting color when the automatically generated result does not match your design.


How Components Use Theme Colors

Each component has its own Styling settings.
When editing a component color, the color picker allows you to select from:

  • Primary colors
  • Text colors
  • Background colors
  • Border colors
  • A custom HEX color

[IMAGE: Component color picker showing Theme Colors and custom color]


If a component uses a Theme Color, it remains connected to the global theme.
For example, if a product title uses the global Text color, changing the global Text color will also update the product title.


Using a Custom HEX Color

You can also enter a custom HEX value for an individual component property.
For example, you can assign a custom font color to a Product Title.
After a custom HEX color is assigned:

  • That specific property no longer follows the global Theme Color
  • Future global color changes will not update that property
  • The custom color applies only to that component property

Example:

If the Product Title font color is changed to a custom HEX value, changing the global Text color later will not change the Product Title font color.

This allows you to keep most components connected to the global theme while styling selected elements independently.


Theme Colors vs. Custom Component Colors

Use Theme Colors when:

  • You want multiple components to update together
  • You want a consistent Bundle design
  • You expect to change the overall color scheme later
  • You want components to remain connected to the global theme

Use a custom HEX color when:

  • Only one component should use a different color
  • A specific element needs stronger contrast
  • You want an individual component property to remain unchanged when the theme changes

A good workflow is to use Theme Colors for most elements and custom HEX colors only when necessary.


Save a Custom Theme

After customizing the current Theme Colors, click:
Save as New
The new color scheme will appear in the Themes section as a custom theme.
[IMAGE: Custom theme displayed in the Themes section]


This allows you to:

  • Reuse the color scheme
  • Switch between preset and custom themes
  • Create multiple brand or campaign color schemes


What Happens When You Select Another Preset?

Selecting Black, Sage, or Warm changes the active global Theme Colors.
However, it does not reset:

  • Manually customized Advanced colors
  • Custom HEX colors applied inside individual component Styling settings

This means component-level custom colors remain independent from preset theme changes.

Selecting a preset does not remove existing custom component colors.


For the most efficient setup:

  1. Set the Store background preview
  2. Choose the closest preset theme
  3. Adjust Primary, Text, Background, and Border
  4. Review the automatically generated Advanced colors
  5. Fine-tune supporting colors when needed
  6. Open individual components and check their Styling settings
  7. Use Theme Colors for elements that should update together
  8. Use custom HEX colors only for exceptions
  9. Preview the Bundle on desktop and mobile
  10. Click Save as New if you want to reuse the theme


Why Did Multiple Components Change Together?

Multiple components may use the same shared Theme Color.
For example, several buttons and selected states may use the Primary color.
When the Primary color changes, all components using that color update automatically.
This helps keep the Bundle design consistent.


Why Did One Component Not Change?

A component property may not follow the global theme because:

  • It uses a custom HEX color
  • It uses a different Theme Color
  • The changed global color is not connected to that property
  • The element belongs to the Shopify theme rather than the Bundle

Check the component’s Styling settings to see which color is being used.


Frequently Asked Questions

Will changing Theme Colors affect my products or discounts?

No.
Theme Colors only affect the Bundle’s appearance.
They do not change:

  • Product Lists
  • Product variants
  • Prices
  • Discount Rules
  • Inventory
  • Add to Cart behavior


Can I customize only one component?

Yes.
Select the component, open its Styling settings, and assign a custom HEX color to the required property.


Will a custom HEX color change when I update the global theme?

No.
Once a component property uses a custom HEX color, it no longer follows the related global Theme Color.


Can I save my own theme?

Yes.
Click Save as New after customizing the current colors.
The saved theme will appear in the Themes section.


Will selecting Black, Sage, or Warm reset my custom component colors?

No.
Preset themes do not reset custom HEX colors applied in component Styling settings.
They also do not automatically reset manually customized Advanced colors.


Should I use Theme Colors or custom HEX colors?

Use Theme Colors for most components so the Bundle remains easy to maintain.
Use custom HEX colors only when one specific component needs a different appearance.


Summary

The Color Theme system works in three levels:

Preset Theme
→ Main Theme Colors
→ Automatically Generated Advanced Colors

Components can then use:

A shared Theme Color
or
A custom HEX color

Components using Theme Colors update with the global theme.
Components using custom HEX colors remain independent.

Updated on: 20/07/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!