How do I add swatches to the products in Magento?

Currently, "product swatches" are not available in the Magento extension out of the box. Implementing this will take customization. 

Below is a general implementation strategy you could use. 

- You would need to have the details of all the variants in a product
- You would then swap out the variant being shown in a similar way as we describe for color here: https://www.algolia.com/doc/guides/managing-results/refine-results/grouping/how-to/item-variations/#dataset-example.

Basically, you would toggle which of the sets of product data to show.

This would require extensive customization of both your backend and frontend.

On your backend :

You would need to index all the child data into the records of the parent (colour, stock and image) so that it is available to be used to power the swatch.

You can learn more about customizing the Magento extension backend here.

On your frontend :

You would need to add logic that replaces the images and add the strike through on the colors which are not in stock.

You can learn more about customizing the Magento extension frontend reviewing InstantSearch page Configuration and Frontend custom events.