Add Color Swatches to Products in Carousel

[nevin]

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

[maddy]

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

[mrnda_darkroom]

How can we make the swatches available in the state?

[sarah]

Hi @mrnda_darkroom , if you are just trying to add color swatches to a product box to show variant color options, you don’t necesarilly need this, and you can follow the steps below to get started:

1. Add a product box to your content, select a product with color variants, and choose a product template with variant options. For this tutorial, I have the Product Variants Picker options set to separate boxes.
2. In the Layers tab, select the options box layer inside the Separate options box layer.
3. In the Data tab under “Element data bindings”, add a new binding. Set the “Get” field to style.backgroundColor, and click the “edit code” button next to the “From” field.
4. Add the code below and update the color names and values:

if(state.optionsItem.name === "Color"){
	switch(state.valuesItem){
		case 'Lavender':
			return '#bcb4d5'
			break;
		case 'Pink':
			return '#d98dbd'
			break;
		case 'Bone':
			return '#eaeaea'
		default: 
			return 'white';
		}
}

If you want to remove the color names and just show a circle with that color, you can follow the steps below:

1. Edit the text binding (for the same options box layer as above) so that it only returns text if the variant option is not a color:

if(state.optionsItem.name !== "Color"){
	let useName = state.valuesItem;
	if (useName.toLowerCase().includes('default title')) {
		useName = state.productInfo.title;
	}
	return useName;
}

2. In the style tab, edit the min-height and min-width to your prefered size. I chose 25px.
3. In the data tab, add another element data binding for style.borderRadius, and add the code below to the binding to make the boxes into circles:

if(state.optionsItem.name === "Color"){
	return "50%"
}

If this doesn’t answer your question, can you share more about your use case?

[mrnda_darkroom]

Hey @sarah Thank you! A few followup questions—

1. how can I have the variant name appear next to the label when selected, see here:
   

2. How can I have an image fill the swatch instead of a background color?

3. How can I style the active border with a gap between the swatch and the border line? See below:
   

4. How do I hide one type of variant? We have a size variant but it’s the default size and doesn’t need to be shown, see below:
   

[mrnda_darkroom]

One more thing, if a variant is sold out, is there a way for it to be automatically hidden?

[garima]

Hi @mrnda_darkroom, We hope you’re doing well!

Could you please share the builder content entry link where you’re implementing this so I can guide you with answers with the same state and ID name?

[mrnda_darkroom]

Hi! yes here:

Builder.io: Drag and drop Visual CMS

[garima]

Hi @mrnda_darkroom, Here are the answers to the questions you asked:-

1. How can I have the variant name appear next to the label when selected?
I think for this, you need to drag a new text box between layers of Product Variants under the Separate options container>Option label box and add a binding to this with the value of the active variant name/value.

2. How can I have an image fill the swatch instead of a background color?
You could do the same binding that you have for the background color, but add it to an image block instead and replace the hex code with an image URL.

3. How can I style the active border with a gap between the swatch and the borderline?
I think for the border you would want to wrap the existing block in a box block and add the border bindings to the new box. Then give the box padding.

4. How do I hide one type of variant?
You could add a binding to the options box like hide if state.valuesItem === “name of variant to hide”.

5. If a variant is sold out, is there a way for it to be automatically hidden?
You can add this code for the ShowIf binding to hide an element if there aren’t variants:

return state.productInfo.variants.length > 1

Thank you!