Need a custamized filter option for color in the collection page

Store Design
, , ,
1

I need to customize the color field in the filter to look like :

SyntaxChef_0-1724412084005.png

Instead of

SyntaxChef_1-1724412141969.png
SyntaxChef_1-1724412141969.png153Ă—110 1.62 KB

is this possible?

2

  1. Create a Product Metafield: First, create a new product metafield, such as “Filter Colors.” Set the metafield type to a Color Entry Metaobject (e.g., color: hexcode).

  2. Assign Colors to Products: Next, fill in the metafield for each product with the corresponding color values.

  3. Add Metafield to Filters: Navigate to the Search & Discovery app, go to the Filters section, and add the product metafield you created as a filter option.

  4. Adjust Liquid Code: Finally, modify the Liquid code to remove the text and display only the color.

1 Like
3

@WalkYourStyle

what all adjustments needed in the 4 step. that is in liquid code?

4

In liquid you can remove the text if you want and just leave the circle with the color. That’s the only adjustment you have to do in liquid to look exactly like the picture you’ve provided. If you don’t mind the text, then you don’t have to do anything else.

Then the last thing is you have to go to the Search & Discovery app → Filters, and then add a new filter and select the product metafield you created.