Swatches

Swatches are a concept in Replo which allows you to associate colors, images, gradients, and more with product option values or variants.

Swatches are useful for product features where you want display options (for example, colors of clothing, flavors of drinksa) with branded colors or images that are distinct from what can be set in Shopify.

Creating and Updating Swatches

Swatches can be created or updated using the Option List or Variant List component.

To edit swatches:

1. Find a Product component in Replo, or create one by dragging it in
2. Drag in a Variant List component or an Option List component
3. Under Config in the right bar, find Swatches
4. Click on the Swatch you want to edit, or click the plus button to create a new one

When editing a swatch, you can select products from your Shopify store to associate colors, images, gradients, and more with each of those products' options or variants.

Swatches and Products

A Swatch can associate colors and images with either option values or variants. If you need to have a swatch of both option values and variants, you can create two different swatches with the same product.

To change the type of the Swatch that you're editing

1. Find the swatch you want to edit
2. Ensure that you have products selected by clicking the "Select Products" button in the swatch editor popup
3. Find the dropdown in the upper-right of the swatch editor popup, which will say either "By Variant" or "By Option"
4. Select the type you want - the swatch editor popup will update with all the option values or variants, depending on the swatch type.

Editing Swatch Values

Swatches associate values (colors, images, etc) with an option value or variant.

To edit the values of a Swatch:

1. Find the watch you want to edit
2. Click on the swatch to open the swatch editor popup
3. Ensure you've selected products using the "Select Products" button - the swatch editor will automatically show all variants and option values for the products you've selected
4. On the right of each variant or option value, select the button that says "no fields set"
5. In the popup that opens, select a color, image, gradient, or image list

All edits to Swatches are automatically saved.

Multiple Swatch Values

Replo supports setting multiple values for a single variant or option. For example, one variant can have both an associated color and an associated image. To set multiple values, simply set both in the swatch editor popup.

Using Swatch Values

Swatch values are available via Dynamic Data. To add a swatch value as a color or image:

1. Inside an Option List or Variant List component, select the component you want to add a color or image to
2. Find the property you want to add a color or image to (for example, background color or background image)
3. Select dynamic data, then find Swatches and select the swatch you want to take the value from
4. Select Add Dynamic Data to confirm the swatch value selection

Swatches Examples

Creating a Carousel with Different Images for Different Variants

Having multiple featured images for a product variant is not possible in Shopify, but you can use the image list swatch value to associate multiple images with a variant in Replo. To do this:

• Select a Variant List or Option List component, go to Config, and create a new swatch
• For each variant or option, add images under "Image List"
• Select the carousel you want to show the images for
• Under Config, select Specific Values, then using Dynamic Data, select the currently selected option or variant, then Swatches, then the Swatch you created, then "Image List"
• Make sure that your carousel images are set to the "Current Item" using Dynamic Data
• The carousel will now have the "Current Item" as the swatch images which you previously set!