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 (facet.name === ‘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.