Color Swatches Guide
Create beautiful, clickable color and image swatches for your product options.
Overview
Swatches provide a visual way for customers to select colors, patterns, or materials. They're more engaging than text-based options and can significantly improve the shopping experience.
Swatch Types
Color Swatches
Display a solid color from a hex value:
- Perfect for product colors
- Uses standard hex color codes
- Clean, fast-loading display
Image Swatches
Display an image (pattern, texture, or photo):
- Great for patterns and textures
- Can show material close-ups
- Supports PNG, JPG, WebP
Creating Color Swatches
Setting Up a Swatch Group
- Open the Uplift app
- Create a new add-on group
- Select Swatches as the display type
- Choose Color as the swatch type
- Save the group
Adding Color Options
- Click Add Option
- Enter the color name (e.g., "Navy Blue")
- Enter the hex color code (e.g.,
#1a365d) - Optionally add a description
- Link a product if the color has a price
- Save the option
Understanding Hex Codes
| Color | Hex Code |
|---|---|
| Black | #000000 |
| White | #FFFFFF |
| Red | #FF0000 |
| Navy Blue | #1a365d |
| Forest Green | #228B22 |
| Gold | #FFD700 |
💡 Tip: Use a color picker tool to find exact hex values. Search "hex color picker" or use tools like Coolors.co.
Creating Image Swatches
Setting Up Image Swatches
- Create a swatch group as above
- Choose Image as the swatch type
- Add options with image URLs
Image Specifications
| Specification | Recommendation |
|---|---|
| Dimensions | 100x100px to 200x200px |
| Aspect Ratio | 1:1 (square) |
| File Format | PNG or WebP |
| File Size | Under 50KB per image |
| Transparency | PNG for transparent backgrounds |
Uploading Images
You can host swatch images in several ways:
- Shopify Files - Upload to Settings → Files
- Product Images - Use existing product image URLs
- CDN - Use any publicly accessible URL
Styling Options
Swatch Size
Configure how large swatches appear:
- Small - 32x32px, compact displays
- Medium - 48x48px, standard size
- Large - 64x64px, prominent display
Swatch Shape
- Square - Standard box shape
- Rounded - Soft corners
- Circle - Fully round swatches
Selection Indicator
How selected swatches are highlighted:
- Border - Colored border around selection
- Checkmark - Icon overlay on selected
- Scale - Selected swatch slightly larger
Labels Display
Label Display Options
| Option | Behavior |
|---|---|
| Hidden | Only swatch visible, no text |
| On Hover | Tooltip shows label on hover |
| Below Swatch | Label text under each swatch |
| Selected Only | Show label for selected swatch |
Accessibility Considerations
- Always include text labels for screen readers
- Ensure sufficient contrast for selection indicators
- Consider colorblind users—use patterns or labels
- Provide alternative text for image swatches
⚠️ Accessibility: Don't rely on color alone to convey information. Include text labels, especially for colors that may look similar.
Advanced Features
Multi-Color Swatches
For options with multiple colors (e.g., "Black/Red"):
- Use an image swatch showing both colors
- Create a split-color image
- Or use gradient images
Out of Stock Display
Configure how unavailable colors appear:
- Hide - Remove from display
- Disabled - Show grayed out, not clickable
- Crossed out - Show with strikethrough indicator
Integration with Canvas
Swatches can trigger canvas layer changes for visual preview. See Canvas Visual Preview for details.
Troubleshooting
Color not displaying
- Verify hex code format (include #)
- Check for typos in color code
- Don't include spaces or extra characters
Image swatch not loading
- Verify image URL is publicly accessible
- Test URL directly in browser
- Check image isn't blocked by CORS
- Ensure proper file extension
Swatches look blurry
- Use higher resolution source images
- Match image dimensions to display size
- Use PNG or WebP for sharp edges
Best Practices
- Consistent sizing - All swatch images same dimensions
- Accurate colors - Match product photos closely
- Clear labels - Use descriptive color names
- Logical order - Group similar colors together
- Performance - Optimize image file sizes
- Testing - View on multiple devices
Next Steps
- Canvas Visual Preview - Show color selections in real-time
- Storefront Customization - Advanced styling options
- Badges & Labels - Highlight popular colors