Collection filter color swatch from metaobject
display the color swatch using the metaobject in the collection filter, follow the steps below
From your Shopify admin, go to Settings > Custom data.
Click on "Add definition".
Add the desired name if needed and Add field.
Select File type.
Add the desired name if needed and Accept all file types, then click on Add button.
To add a second field, click on 'Add Field' again.
Click on "Single line text".
Add the desired name if needed and click on "Use as filter in metaobject index", then click on Add button.
The metaobject fields you created will be displayed. Then click 'Save'.
From your Shopify admin, go to Settings > Custom data > Products.
Click on "Add definition".
Add the desired name if needed. The name you add here will be displayed in the collection page filter. then click on Select type.
Click on "Metaobject".
Select the "Reference".
Click on created metaobject, then select the "List of entries" and Save.
From your Shopify admin, go to Content > Metaobjects.
Click on "Add entry".
Select the image you want to display in the color swatch filter and add a label, Then Save.
Install the "Search & Discovery" app and open it.
Click on "Filters" and Add filter.
Select the source.
Select the metafield for the name that you created in the product here and Save.
From your Shopify admin, go to Products and select any one product.
Select the entry you added in the metaobject under the content section here and Save.
The color swatches created from the metaobject will be displayed within the filter on the collection page.
Last updated
