"How to" guides.

Color Swatches

Estimated reading: 2 minutes

You can use color swatches to replace the default variant color names, adding visual appeal and making the color variant selection for your products more engaging.

Shopify offers this functionality natively for product categories that commonly use color swatches, such as clothing, shoes, and many more.

How it works?

  • From your Shopify admin, go to Products and select the product to which you want to add color swatches. Then, choose the appropriate category for your product from the category drop-down menu.

**screenshot

  • In the ‘Variants’ section, click the ‘+’ icon and select ‘Color’ from the recommendations.

**screenshot

  • Click on the ‘Add color’ field to display the list of default colors. Select the color that best matches your product variant.

**screenshot

  • If none of the default colors or color names match your product, click ‘Add new entry’ to create a custom name and color. You can also add an image instead of selecting a color.

**screenshot

  • Continue adding color variants by clicking the ‘Add color’ field. Once you’re finished, click ‘Done’ and then save your changes.

When you create new color entries, they will be added to the default list, so you won’t need to recreate them for other products.

Repeat this process for all products that include color variants.

Displaying swatches on your product page

Go to the customizer and open a product page. In the Product Information section, locate the ‘Buy buttons’ block. Within this block, you’ll find the ‘Variant picker’ settings.

Swatches can be displayed for both ‘Dropdown’ and ‘Pills’ variant picker types. Choose one, and then select either ‘Circle’ or ‘Square’ to define the shape of the swatches.

**screenshot

Share this Doc

Color Swatches

Or copy link