Skip to content
Infinite OptionsInfinite Options Docs

Create Color and Image Swatches

Create color and image swatches in Infinite Options for products that vary by color, pattern or material, with steps for adding values and images.

Overview

Section titled “Overview”

Swatches let customers choose an option by selecting a color or image instead of reading a text label.

They’re a great choice for products available in different colors, patterns, materials, finishes, flavors, or other visual customizations

Step 1: Create a Swatch Option

Section titled “Step 1: Create a Swatch Option”

Open an existing Option Set or create a new one.

Add a new option and select Swatches as the input type.

Step 2: Add Your Option Values

Section titled “Step 2: Add Your Option Values”

Enter the values you want customers to choose from.

For example:

  • Red
  • Blue
  • Green

Each value can have its own color or image.

Step 3: Add a Color or Image

Section titled “Step 3: Add a Color or Image”

Next to each option value, click the swatch icon.

Choose one of the following:

Color

Section titled “Color”

Select a color using the color picker or enter a HEX color value.

Example: #FFFFFF

Click Save to apply the color.

Image

Section titled “Image”

Upload an image to represent the option.

For best results:

  • Use square images.
  • Keep images under 1 MB.
  • GIF images aren’t supported.

Click Save to apply the image.

Style Your Swatches

Section titled “Style Your Swatches”

Under the Styling section of the option editor, you can set:

  • Layout — Inline or Stacked
  • Swatch shape — Square, Rounded, or Circle
  • Collapse into a dropdown — turns the swatch list into a dropdown once there are many values. The label stays above the control, and the dropdown summary shows the shopper’s current selection.
  • Show value name as a tooltip — displays each value’s name on hover
  • Zoom swatch on hover — enlarges a swatch when a shopper hovers over it
  • Class name — for custom CSS targeting

Step 4: Save Your Option Set

Section titled “Step 4: Save Your Option Set”

Click Save in Infinite Options.

Your swatches will now appear on every product assigned to the Option Set.

Tips

Section titled “Tips”
  • Use colors when customers are choosing between simple color options.
  • Use images when the differences are visual, such as patterns, fabrics, wood finishes, or product styles.
  • Keep image sizes consistent for the best-looking swatches.
Section titled “Related Guides”

Looking to do more with swatches?

In this section

Adjust Swatches - display the name once the swatch is hovered overShow the name of an Infinite Options swatch on hover, which keeps large sets of color swatches compact, by changing the swatch display settings.
Customize Swatches using CSSRestyle Infinite Options swatches on your product pages by pasting ready-made CSS into the Custom CSS field in Settings.
How to make Swatches requiredMake Infinite Options swatches required so shoppers must choose one, either with a required prompt on standard swatches or a multi-select setup.