Matching Product Recommendations by Color

[byraf_studio]

I'm using Search and Discovery App to suggest other products in the product page but I'm wondering how to make sure the swatches match with the main product and the suggested products.

Best example I'm trying to achieve would be here https://frankiesbikinis.com/

When you click into a product, all the products match in color under the "Complete the Look".

However, I know when you change colors on the product page, the products don't change - but that's totally fine. 

Are they using a different app or is there custom code to change it based on color? 

Here's my site https://1d15b7-5f.myshopify.com/

pw: miaz123

[Promer]

Hi @byraf_studio 

Looking at Frankie's Bikinis approach, they're likely using product tagging or collections to group items by color. You can achieve similar results with Search & Discovery by creating specific recommendation rules based on product tags, metafields, or collections that group items by color.

Try setting up a custom recommendation rule where products with the same color tag/metafield as the main product are prioritized. You'll need to ensure all your products have consistent color tagging. This works best with a structured naming convention like "color:blue" across your catalog.

For more advanced matching, you might need some custom code to filter recommendations by the currently selected color variant, but the app's built-in rule system should get you most of the way there without coding. Reach out to the Search & Discovery support team if you need help setting up these specific color-matching rules.

[Promer]

You can consider these step:

• First, ensure all your products use consistent color tagging or metafields. Tag products with something like "color:blue" or create a color metafield.
• In the Search & Discovery app, create a custom recommendation rule. Look for options like "Products with same tag" or "Products with matching metafield" in the rule criteria.
• Set the rule to prioritize products with the same color tag/metafield as the currently viewed product.
• For a more advanced solution using code, you'd need to:
  • Capture the currently selected variant color
  • Filter the recommendation results using JavaScript to match that color
  • Replace the default recommendations with filtered ones

Hope this helps