To show color or image swatches on your store front, you can follow these steps:

In the Filter Menu admin, click on the 'Display' button next to the filter group you want to show as swatches and set it to 'Color Swatch'.

The Filter Menu has a list of colors built in that will automatically map to many common colors. This list currently only supports the English translations for colors.

For any colors that are not automatically matched, you can set custom colors in the Theme Editor.

Go to your Shopify Admin and select Sales Channels, then Online Store. Click on the Customize button for the theme you're working on. In the Theme Editor, click on the little arrow next to Filter Menu in the sidebar, then Add Block and Color Swatch.

The Color Swatch option allows you to add both colors or images, the images will be placed inside the swatch outline. For more control over your image swatches you can select Image Swatch instead, this will allow you to set the height and width for the image swatches. You also have the option for adding a left icon.

After adding a color swatch block, you can click on it again to set it up.

To assign a color swatch you will need to select a collection. When you set up your color filters, the app will have created a collection for every color filter, you need to use these color collections when assigning colors for your swatches. For example, the Red color collection should have the color red assigned to it.

TLDR; Here is our video guide on adding swatches, the Shopify UI is a little out of date here, but the process is still the same:

If you are not seeing any swatches on your storefront, check to make sure that checkboxes are enabled. This can be either in the Display options for each filter group. Or in the Theme Editor in Theme Settings > Filter Menu > Show Checkboxes.