Restricting sizes from showing in results

Hello, I’m trying to restrict the size variant from showing in the results on the search page, but keep the different colour variations showing.

Currently with the “Show products instead of variants” setting turned off the results are showing every different colour and every different size. However I would like it to display the first available size, and every colour variant in the results.

I have had a look at the docs, named tags, restricting variants etc… and I’m totally lost on where I can achieve this.

Many thanks, also I am using the Shopify plugin.

Hi @HarryK !

Under the hood, when you check “Show products instead of variants”, this will:

  • change a specific setting on your Algolia index, [attributeForDistinct]( and set it toid` (the product id)
  • make every request send distinct = true

For a more in depth presentation of this Algolia feature, you can read the guide here:

What this does is that Algolia will deduplicate based on the id attribute, and return only one result for results that share the same value.
What you’re looking for is to do a distinct on two different attributes at once: id and options.color.
This is however not supported by Algolia, which can only deduplicate based on a single attribute.

I see only three solutions to this, none of them being perfect:

  1. With JavaScript, when the result list renders, de-duplicate the results which have the same id but different sizes.
    • Benefit: Easy to implement with a little bit of JavaScript
    • Downsides: Not a consistent amount of results on all pages (which could be solved by using infinite scroll)
  2. If all of your products share a common size (e.g. ‘M’), you could filter results to only show ‘M’ results
    See Shopify: Add a filter to the autocomplete and / or the search page for information on how to filter the result set
    You would likely want to hide the In Stock / Out of stock information though, as there might be other sizes which have it in stock
    • Benefits: Easy to implement
    • Downsides: Only works with a common size for all products & you lose the stock display information on the results list
  3. The more complex but closer to what you want method would be to create an attribute with both the id and the size merged together
    This could be done in a named tag or a metafield.
    To do this automatically, I describe a programmatic way of doing so here: Add Product Ratings Attribute to Shopify Products Index
    • Benefits: Exactly what you need
    • Downsides: Harder to implement

Hey, thanks for the quick reply!

Unfortunately I’m unable to find a unique ID for each color variant. Do you know where I can find a list of all the responding variables?

I’m assuming it would be something along the lines of: [[& _highlightResult.color.variant ]]

Thanks again!