Home App Docs Blog Github

Add Color Swatches to Products in Carousel

We want to create swatches that a user can use to select the color of a product that is being displayed in the carousel. If you look at this page here, there is a group of products right below the header. We want to add color swatches right below the image to allow the user to see that there are multiple colors and select a color within the carousel and have the main image change to match the main image of that variant in Shopify.

We have managed to successfully select the available color names for these products with “get text from JSON.stringify(state.productInfo.options[0].values)” but the issue is that I can’t match those variants to swatches. We have the swatches in Shopify as files within the files section of Shopify. The swatch for the color name Ivy Camo would be called “color-ivy-camo” or the color swatch for Caviar Black would be “color-caviar-black”. We basically want to pull the swatch from Shopify.

Builder Page where we want this to work: home
A page where it is working already (but this page is not built with builder): Best Sellers All

1 Like

Hi @nevin,

Great question! This may be achievable with custom code which is an option you could explore.
Since the swatches aren’t available in the state for the product boxes, they can’t be added to the Builder page since the data isn’t available. If they were available in the state then you could add a repeat for each (e.g. for the variants or options), add a click action for the functionality, and a binding to grab the images (similar to our variants block).