How to enable color swatches on product

2 min read

Table of Contents

Color swatches

Color swatches #

Enable Color Swatches #

Go to Admin › Online Store › Themes, select your theme, and click Customize.
In Theme settings, open Color Swatches and turn on Enable color swatches.
Save your changes.

With swatches enabled, product color variants appear as clickable color samples rather than text in a dropdown, giving shoppers a quick, visual way to choose colors—ideal for apparel, décor, and other color-focused products.

General settings #

Settings	Description
Add Product Media	Upload high-quality images and videos that showcase your product from multiple angles. Clear, professional media helps customers understand what they’re purchasing and can significantly impact conversion rates.
Select Product Category	Shopify will automatically suggest a category based on your uploaded product media. Review the suggestion and select the most appropriate category, as this helps with search functionality and store organization.

Settings	Description
Add Color Metafield	Use Shopify’s suggested color metafield to define the available colors for your product. This standardized approach ensures consistency across your store and enables advanced filtering options for customers.
Create Color Variants	Once you’ve set up the color metafield, create product variants for each available color option. This allows customers to select their preferred color directly from the product page and helps with inventory management for each color option. These steps work together to create a comprehensive product listing that provides customers with all the visual and selection options they need to make an informed purchase decision.

General settings #

Settings	Description
Maximum Number of Swatches to Show	Set a limit on how many color swatches appear on your product pages. This prevents overcrowding when products have numerous color options and maintains a clean, organized appearance.
Swatch Display Types	Color Swatch Displays solid color blocks that represent each available color. This option provides a clean, minimalist look that works well for products with distinct color variations. Variant Image Shows actual product images for each color option, giving customers a more detailed preview of how the product looks in different colors. To use this option, you’ll need to upload specific variant images for each color in your product’s variant settings. Choosing the Right Type: Use Color Swatch for products where the color difference is straightforward (like solid-colored items) Use Variant Image for products where colors create different patterns, textures, or visual effects that customers need to see before purchasing Both options help customers quickly identify and select their preferred color without having to navigate through dropdown menus.