Custom Color Swatches

This section allows you to define and manage custom visual swatches that appear on your product pages (typically for color variants). You can use either:

  • A hex color code for clean, flat color circles

  • Or a custom image (e.g. texture, fabric photo, gradient) for more complex visual representation

Images will override hex codes if both are provided.

How to Enable Custom Swatches

Before using this feature, make sure it's activated:

  1. Go to Theme Settings

  2. Navigate to Color Swatches

  3. Set the Swatch Item Type to Custom

This will ensure your product variant options (like color) are displayed using your defined swatches.

Custom Color Options

This block defines each individual color swatch.

1. Custom Color Name

  • Example: Black

  • This is the name of the color variant (must match exactly with the variant option name in Shopify). If your variant is called Black in your product settings, the swatch name must also be Black.

It's case-sensitive and must be an exact match to the product option value for the swatch to appear.

2. Color Hex Code

  • Example: #000000

  • Choose a color via the picker or enter a hex code manually.

  • The hex code is used to generate a simple color circle as the swatch.

3. Color Swatch Image (Optional)

  • Upload a small representative image (e.g. fabric pattern, material texture, gradient, etc.)

  • If an image is uploaded, it will override the hex code swatch.

Recommended:

  • Use square images (e.g. 80x80px or 100x100px)

  • Keep file sizes small for performance

Custom CSS (Optional)

If you need more advanced styling, you can target swatch elements using CSS to:

  • Add borders

  • Show hover effects

  • Animate selection

  • Change shapes (e.g. from circles to squares)

Let me know if you want help writing CSS for these swatches (like hover outlines, scaling effects, etc.).

Use Case Example

Imagine you sell a T-shirt in 3 variants:

  • Black

  • White

  • Red with Texture

You could:

  • Assign #000000 for Black

  • Assign #FFFFFF for White

  • Upload a fabric texture image for Red with Texture

This way, shoppers see realistic previews of their options before selecting them — improving trust, user experience, and conversions.

Summary

The Custom Color Swatches tool helps you:

  • Visually display product variants in a clear and engaging way

  • Use either solid colors (hex) or images (textured, gradients, etc.)

  • Match exact variant names to connect your swatches to real Shopify options

It's a subtle but powerful upgrade to your product pages — making your store feel more premium and interactive.

PreviousPage TagNextOrder Notification Pro 1

Last updated