To show color swatches in facets on Shopify collection page

I need some guidance on color swatches, need to show color swatches on shopify collection page facets.

Till now I went through shopify algolia facets type guide. But not able to get the solution.

I selected Facet type as disjunctive for color but won’t showing swatches at frontend.
I can say that color facet has been generated from the variant option: color

Does anyone know if this is possible, or how to go about it?

I would like to show following look.

Hi @archdude4458,

a good way to implement what you need would be to implement an if-clause in the "algolia_instant_search_facet_item.hogan.liquid " file.
First you would probably first have to define a variable in your “algolia_facet.js.liquid” file telling if the facet you are dealing with is the “color” one.
For example you can add this in the first lines of the " facetToWidget " function :

var isColor = false

if ( === ‘name’) { isColor = true }

Then you would have to pass this variable in the “transformItems” function so that it would be accessible in your “algolia_instant_search_facet_item.hogan.liquid”. You can do it just by
passing this to the said function :
transformedItem.is_color = isColor

Finally, you can use this “is_color” variable to have two different render in the “algolia_instant_search_facet_item.hogan.liquid” like this :

[[# is_color ]]
… custom HTML you define for color
[[/ is_color ]]
[[^ is_color ]]

[[/ is_color ]]

All the custom CSS can be defined in the “algolia_instant_search.css.hogan.liquid” file.

1 Like

Thanks @cindy.cullen . I will check it out.