Add color filters to collection pages

Let shoppers filter product groups by base color using Shopify Search & Discovery, and review how swatches are assigned to those colors.

Color Swatches can provide color filters for product groups through Shopify's Search & Discovery app. This integration requires the Color Swatches Advanced or Premium plan and a theme that supports Shopify storefront filtering.

Shoppers filter by base colors such as Blue, Red, or Multicolor. For example, Navy and Sky Blue swatches can both appear under Blue. This integration does not create a separate filter value for every individual swatch name.

If your colors are Shopify variants within one product, use Shopify's product-option or category-metafield filters instead. Configuring Variant swatches in Color Swatches does not automatically configure your filter sidebar.

Enable filter data in Color Swatches

  1. Open Settings > Product groups in Color Swatches.

  2. Find Collection filters and enable Enable metafields for filters.

  3. Under Which option names to use in filters?, select the color option used by your product groups, such as Color.

  4. Select Save.

The app prepares the filter data in the background. The selected option shows Syncing while its Shopify filter source is being created. Once that source is ready, you can add it in Search & Discovery.

If the option stays on Syncing and its source never appears in Shopify, contact support with your store URL and the option name. Repeatedly changing the setting is not needed to finish setup.

Review the filter colors

  1. In Collection filters, select Manage filter colors.

  2. Select the swatch count beside a color to see which swatches are assigned to it.

  3. Use Move to beside a swatch to choose a different filter color if needed.

If a Review color mapping banner appears, open it to check uncertain automatic assignments. Select Keep for a correct assignment or Move to to correct it. You can select several swatches and use Keep selected or Move selected to to review them together.

Use Add color to create another filter color, or Edit to change an existing color's Name and Color, then select Save. A filter color with no mapped swatches does not appear as a filter value.

These assignments organize the filter values. They do not change the original swatch's name, color, or image on your product pages.

Add the filter in Shopify

  1. In Shopify admin, open Apps > Search & Discovery.

  2. Open Filters and select Add filter.

  3. In Source, select the product metafield named Platmart Swatches: Filter / Color, or the equivalent for the option name you selected.

  4. Choose a customer-facing filter name, such as Color.

  5. For visual filter values, use Name as the label field. Enable Include visual, choose Swatch, set Swatch color to Color, and set Swatch pattern to Image.

  6. Select Save.

Your theme must support visual filter values to show the color swatches. Shopify's filter setup guide explains the available display settings.

Open a collection containing your grouped products and test one of the colors. Enable filtering in that collection template's theme settings if it is turned off.

If the filter is missing or looks wrong

  • No filter sidebar: check that filtering is enabled in your theme and supported by the collection template. Shopify does not display filters on collections containing more than 5,000 products.

  • The Platmart source is missing: check that you saved the selected option under Collection filters and review its sync status.

  • Products appear under the wrong color: review their assignments in Manage filter colors.

  • Names appear but color visuals do not: check the visual settings in Search & Discovery and your theme's support for visual filters.

If your existing filter comes from a Shopify variant option or another filter app, its colors may be controlled by that source or your theme. Check which Source the filter uses before changing Color Swatches settings.

For an unresolved issue, send support the collection URL, filter source, selected color, and an example product showing the problem.

Did this answer your question?
๐Ÿ˜ž
๐Ÿ˜
๐Ÿ˜