🎨Custom swatch

  1. OPTIS Color Swatch
  2. Variant Display


🎨Custom swatch


Available on: Product page, Collection page


✨Demo product: Custom swatch (password: 1)


Custom swatch demo


Function


Custom swatch lets you manually decide what each variant value looks like, instead of relying on the product images. For every value you can set:


  • An uploaded image — a pattern, texture, fabric close-up, or any picture you choose, or
  • A solid color entered as a hex code, or
  • A two-color split — two hex codes shown side by side in the same swatch (great for values like Black / White).


Each value is independent, so you can mix images and colors within the same option.


Use when


  • Variants already have images in Shopify but you don’t want to use those images as swatches.
  • You want swatches to show patterns, textures, materials, or plain colors rather than full product photos.
  • A value has no variant image, so Auto image swatch has nothing to show.
  • You need precise brand colors that a photo can’t reproduce accurately.


Custom swatch vs. Auto image swatch


Custom swatch

Auto image swatch

You set the image/color for each value by hand

Uses the variant images already in Shopify

Supports solid colors, two-color split, and uploaded images

Shows the product photo only

Best for colors, patterns, and textures

Best when variant photos already look good as swatches


How to use Custom swatch


  1. Change the display type to Custom swatch → Click Save


In Variants display, find the option you want to configure and set its Product page display (and/or Collection page display) to Custom swatch.


Changing the display type to Custom swatch


  1. Open the swatch editor (pencil icon)


Once the display type is Custom swatch, a pencil / edit icon appears next to it. Click it to open the editor — titled Custom Swatch: {option name} — which lists every value of that option.


The Custom swatch editor


  1. Assign an image or color to each value


For each value row you have three ways to set the swatch:


  • Add color (1st color) — click the first color box and pick a color or paste a hex code (e.g. #FF0000).
  • Add a 2nd color — pick a second color to create a two-color split swatch. The direction of the split (diagonal, horizontal, vertical) is controlled globally in Two-color swatch split.
  • Upload image — upload your own picture (pattern, texture, fabric detail, etc.) to use as the swatch.


The thumbnail on the left updates live so you can preview exactly how the swatch will look.


A value can be either a color or an image, not both. Setting a color clears an uploaded image for that value, and uploading an image clears the colors — the editor switches automatically.


  1. (Optional) Save time with Auto-assign & Bulk update


At the bottom of the editor you’ll find two helpers:


  • ✨ Auto-assign swatch — fills in a matching color for every value in one click (from the Color taxonomy metafield, the value name, or the variant image). See Auto-assign swatch.
  • Bulk update — Import a .csv / .xlsx file to set many swatches at once, or Export your current values to edit them in a spreadsheet.


Use the Search variant box at the top to quickly find a value when an option has many of them.


  1. Click Save to apply changes


A 2nd color needs a 1st color. If you set only the second color of a value, the editor shows an error and Save is disabled until you also set the first color (or clear the second one).


How it looks on your store


  • Product page:


Custom swatch on the product page


  • Collection page:


Custom swatch on the collection page


Want to change the size, shape, spacing, or border of the swatches? That’s handled separately in Styling, not in the Custom swatch editor.



Updated on: 25/09/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!