Color Swatches Guide

Create beautiful, interactive color and pattern swatches for your products.

What Are Color Swatches?#

Color swatches provide a visual way for customers to select colors, patterns, or materials. Instead of plain text options, customers see actual color previews.

Creating a Swatch Group#

Step 1: Create Add-on Group#

1. Click + Create New Add-on Group
2. Enter a title (e.g., "Choose Your Color")
3. Select Color Swatches as the display type
4. Click Save Changes

Step 2: Access Swatch Editor#

After creating the group:

1. Click the Edit button on your swatch group
2. You'll see the swatch configuration panel

Adding Swatches#

Basic Color Swatch#

1. Click + Add Swatch
2. Enter the Swatch Name (e.g., "Ocean Blue")
3. Click the color picker to choose a color
4. Click Add Swatch

Pattern/Image Swatch#

For patterns, textures, or complex colors:

1. Click + Add Swatch
2. Enter the Swatch Name
3. Upload a Swatch Image (pattern preview)
4. Click Add Swatch

Swatch with Product Link#

To track inventory for each color:

1. Create the swatch
2. Link to a Shopify product/variant
3. Inventory and pricing sync automatically

Swatch Display Options#

Swatch Size#

Adjust how large swatches appear:

• Small: Compact display, many options
• Medium: Balanced (default)
• Large: Prominent, fewer options

Swatch Shape#

• Circle: Classic color picker look
• Square: Modern, grid-friendly
• Rounded: Soft corners

Show Labels#

Toggle whether color names appear below swatches.

Canvas Integration#

Swatches can change how your product preview looks.

Color Overlay#

Apply the swatch color to a base product image:

1. Upload a grayscale base image in Canvas settings
2. Enable color overlay for the swatch
3. The swatch color tints the base image
4. Customer sees the product in their chosen color

Image Overlay#

Show a specific image for each swatch:

1. Upload an overlay image for the swatch
2. When selected, this image appears on the canvas
3. Great for patterns, prints, or detailed textures

Setting Up Color Overlay#

Step 1: Prepare Your Base Image#

1. Create a grayscale version of your product
2. Use medium gray (#808080) for best results
3. Keep highlights and shadows for depth

Step 2: Configure Canvas#

1. Go to the Layers & Badges tab
2. Upload your grayscale base image
3. Enable the colorizable layer

Step 3: Link Swatches#

1. Edit your swatch group
2. Each swatch's color will tint the base image
3. Test in the Customer Preview panel

Best Practices#

Color Accuracy#

• Use exact color codes from your suppliers
• Test swatches on different monitors
• Consider adding color names for clarity

Image Quality#

• Use high-resolution swatch images
• Consistent sizing across all swatches
• Optimize file size for fast loading

Organization#

• Order swatches logically (light to dark, popular first)
• Group similar colors together
• Limit to 10-15 swatches per group for usability

Naming Conventions#

• Use descriptive names: "Midnight Blue" vs "Blue 3"
• Include material if relevant: "Leather - Tan"
• Match names to your product catalog

Default Swatch Selection#

For required swatch groups:

• The first swatch is auto-selected on page load
• Customers see the product preview immediately
• They can change the selection at any time

To set a different default:

1. Reorder swatches so your preferred default is first
2. The first visible swatch becomes the default

Advanced: Multiple Swatch Groups#

You can have multiple swatch selections:

Example: T-Shirt with Color + Print

1. Group 1: Shirt Color

   • Red, Blue, Green, Black
   • Controls base shirt color

2. Group 2: Print Design

   • Logo A, Logo B, No Print
   • Overlays on top of shirt color

Use canvas layers to combine both selections visually.

Troubleshooting#

Colors Don't Match#

• Verify hex codes are correct
• Check monitor calibration
• Test on multiple devices

Overlay Not Working#

• Ensure base image is grayscale
• Check layer order in Canvas settings
• Verify colorizable option is enabled

Swatches Not Showing#

• Confirm display type is "Color Swatches"
• Check that swatches are added to the group
• Verify the group isn't hidden by conditional logic

Example Configurations#

Apparel Color Selection#

Group: "Select Color"
Type: Color Swatches
Required: Yes

Swatches:
- White (#FFFFFF)
- Heather Gray (#B8B8B8)
- Navy (#1C2541)
- Black (#000000)
- Burgundy (#722F37)

Material Selection#

Group: "Choose Material"
Type: Color Swatches
Required: Yes

Swatches:
- Cotton (image: cotton-texture.jpg)
- Linen (image: linen-texture.jpg)
- Silk (image: silk-texture.jpg)

Phone Case Colors#

Group: "Case Color"
Type: Color Swatches
Required: Yes

Swatches:
- Clear (#FFFFFF, 50% opacity)
- Smoke (#333333)
- Rose Gold (#B76E79)
- Pacific Blue (#006E90)

Next Steps#

• Canvas & Visual Preview
• Conditional Logic
• Storefront Customization