Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

Swatches

Stiletto can display your product variants as a sleek row of clickable color Swatches. Choose to display swatches on all product cards across your site when hovered over, and customize their shape and size.

To add color swatches, you can either use 140 default colors for your swatches or upload custom swatch images that perfectly match your product colors.

Swatches with custom color images
Swatches with custom color images

Set up swatches with default colors

Stiletto automatically displays color swatches for variants with the same name as one of these 140 default colors.

These color names will display as your product variant names in the cart. If you want a different variant name, or different color, you will need to upload custom swatch images.

Swatches with default colors
Swatches with default colors

Add variants with default color names

Here's how to set up your product variants to display swatches with default colors.

Steps

From your Shopify Admin:

  1. Go to the product you wish to add color swatches.

  2. Scroll down to find the Options section. Check the This product has options checkbox if you're adding variants for the first time.

    Options setting in Product admin
    Options setting in Product admin

    For more information about variants, see Shopify's Variants documentation.

  3. Add the Option name (e.g. "Color") and Option values (or Variants) with the exact name of one of the 140 default colors.

    Variants with default color names
    Variants with default color names

    If your product option has a different name than "Color", you will need to change or add that Variant option name in Theme settings > Product, as pictured below:

    Variant option field in Theme settings
    Variant option field in Theme settings
  4. Click Done.

  5. (Optional.) Click the image icon to select a variant image that will appear when the swatch is selected.

    Variant image selector
    Variant image selector
  6. Click Save.

Next: Change the Swatch styles including their shape and size.

Set up swatches with custom images

To perfectly match your product colors, you can create and upload images to Shopify files. Custom swatch images require image file names and variant names to match, which we will cover below.

Adding custom swatches images involves two broad steps: (1) Create and upload your custom swatch images and (2) Set up your product variants.

Step one: create and upload custom swatch images

For each product variant, you will need to create a PNG image by screenshotting or cropping your product images. Each swatch image needs a file name that matches the variant name in your Product admin.

For example, a product variant named "Sea Blue" will need an image with the file name sea-blue.png. We'll walk through each step below.

Steps

  1. You can create PNG image file by taking a screenshot (step 2) or cropping your product images (step 3).

    We recommend images with minimum length or width of 50px.

    Square swatch image example
    Square swatch image example
  2. Screenshots: Use the built-in screenshot tool on your computer to capture swatches from your existing product images:

    Windows: How to use Windows Snipping Tool

    Mac: Take a screenshots on your Mac

  3. Cropped images: Alternatively, crop a section of your product photo with a photo editing application (like Preview or Photoshop).

    Windows: How to Crop Images on Windows

    Mac: How to crop an image in Preview on Mac

  4. Once you have the swatch images saved as PNG files, you need to rename them to match the color variant names that you want.

    For example, if you have a color variant called Gray, you should have a matching swatch called gray.png.

    Color variantSwatch filename
    Graygray.png

    For colors or patterns with with multiple words, like Heather Gray, your swatch should be called heather-gray.png, where hyphens replace the spaces.

    Color variantSwatch filename
    Heather Grayheather-gray.png

    Here's some more examples just to be clear:

    Color variantSwatch filename
    Heather Grayheather-gray.png
    Argyleargyle.png
    Harris Tweedharris-tweed.png

    Note: all swatch filenames must be in lowercase. If capital letters are included in the filename, the swatch image may not load properly.

  5. Once you have renamed your swatch images, head to your Files admin area

  6. Click the Upload files button in the top-right corner and add all the swatch files. You can select multiple files at once.

    Shopify Files dashboard
    Shopify Files dashboard
  7. Go to Step two: Set up your product variants.

Step two: set up your product variants

Once you've uploaded your images, you will need to configure your product variants with names that correspond to your image file names.

Steps

From your Shopify Admin

  1. Go to the product you wish to add color swatches.

  2. Scroll down to find the Options section. Check the This product has options checkbox if you're adding variants for the first time.

    Options setting in Product admin
    Options setting in Product admin

    For more information about variants, see Shopify's Variants documentation.

  3. Add the Option name (e.g. "Color") and Option values (or Variants) with the corresponds to the correct swatch image file.

    For example, if you've uploaded dark-blue.png as a swatch image, the product variant name will need to be Dark Blue.

    Here are some examples as provided above:

    Color variantSwatch filename
    Heather Grayheather-gray.png
    Argyleargyle.png
    Harris Tweedharris-tweed.png
  4. (Optional.) Click the image icon to select a variant image that will appear when the swatch is selected.

    Select variant image button
    Select variant image button
  5. Click Save.

Change the Swatch styles including their shape and size.

Dynamic option availability

NEW

This feature was added in v1.4.0 on Oct 6, 2022. See our change log and theme update guide to learn more.

The Dynamic option availability feature displays crossed-out swatches and chips for variants that are currently out of stock. Customers will easily see which variants are available and can avoid mistakenly selecting sold out products.

NOTE

The 'unavailable' swatch and chip style is used for variants with an inventory of 0. Learn more about Tracking inventory on Shopify.

Product swatches with unavailable variants
Product swatches with unavailable variants

Turn off dynamic option availability

This feature is enabled by default. You can turn off Dynamic option availability in the Theme settings.

Steps

In your theme editor (Customize):

  1. Click on Theme settings then open the Product tab.

    Swatch settings
    Swatch settings
  2. Uncheck the Enable checkbox under Dynamic option availability.

  3. Click Save.

Change swatch styles

Display all swatches with a rectangular, round, or square Shape, and set the swatch Size for specific product templates.

Swatch size

In your theme editor (Customize):

  1. Open a Product template with the template selector in the top bar.

  2. Click on the Variant selector block to open the settings.

  3. Set the Swatch size to Small, Medium, or Large.

    Swatch size settings
    Swatch size settings

    This option applies only to the current product template.

  4. Click Save.

Swatch shape

In your theme editor (Customize):

  1. Click on Theme settings and open the Product tab.

  2. Under Swatches, set the Swatch shape to Rectangle, Round, or Square.

    Swatches with round shape
    Swatches with round shape

    This option applies to all swatches across your site.

  3. Click Save.

Show swatches on hover

By default, when swatches are enabled, they will appear on all products across your site when hovered over, including on collection pages and feature sections.

In your theme editor, click on Theme settings and open the Product listing tab. Choose whether to Show swatches on hover by checking or uncheking this option.

Swatches revealed on product card
Swatches revealed on product card

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.