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.
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.
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