Skip to main content

Color mapping

Group messy product color names into clean swatches that shoppers understand.

Updated over 3 months ago

What is color mapping?

Your products may use different names for the same color — like navy, dark blue, or royal blue. Without mapping, all of these show up as separate filter options. That makes your color filter long and confusing.

Color mapping solves this by letting you connect all those values to one clean swatch, such as “Blue.” Shoppers see a neat set of color choices, while your store data stays the same.

⚠️ Important: Color mapping only changes how filters look in your store. It does not edit product data in Shopify.


Manage your color list

Color mapping can be found under Configuration > General > Color mapping.

Navigate to Color mapping from Configuration > General --> Click "Customize" on the Color mapping card.

Navigate to Color mapping from Configuration > General, then click "Customize".

When you install the app, you’ll get a default color list. You can:

  • Add new colors with a display name and hex code

  • Remove colors you don’t use

  • Edit existing colors at any time

This list powers both your swatches and your groups under your color filter.

 We provide you with an extensive (editable) color list to manage your palettes.

We provide you with an extensive (editable) color list to manage your palettes.

Import colors from Shopify

If you’ve already used Shopify’s color metaobject, you can import those values into Prefixbox instead of manually adding them each. You can only do this import once, but it saves time if you already have colors defined.

Import previously defined colors from your Shopify color metaobject

Import previously defined colors from your Shopify color metaobject


Map product colors

  1. Go to Configuration > General > Filters.

  2. Find and click your Color palette filter.

  3. Scroll to the filter values, and select the ones you'd like to group (e.g. navy, midnight, light blue).

  4. Click "Add to group" and select the desired display text name from the selector.

  5. Save your changes.

Add your colors to the connecting group from under Color mapping

Add your colors to the connecting group from under Color mapping

Add your colors to the connecting group from under Color mapping

💡 Hint: Should you add new values to your products (or new products in general), make sure you sync your catalog, and once the new filter values appear under your Color filter, add them to the connecting group.


How mapped colors display

  • Shoppers see a single color swatch with a display text (e.g. “Blue”) instead of all the messy product values.

  • Unmapped colors don't show up on the storefront.

  • If you add new colors to your products in Shopify later, update your mappings to keep the filter tidy.

Color filter displayed on the storefront, when expanded

Color filter displayed on the storefront, when expanded

Did this answer your question?