Product Color Swatches

In the Shopify theme editor, when Swatches are selected as the product variant style there are several options for managing the color of the swatch.

Automatic detection based on the color name - In most cases, the theme will convert color variant names into CSS colors that will work automatically. The names are automatically associated with one of 140 color names that are supported by all modern browsers

Manually set up custom colors

 - It is possible to add-in custom color names or even overwrite the color HEX values of an existing CSS color by making changes to the  snippets/swatch-colors.liquid file. You can use the following examples as a guide to create custom colors:

  • Custom color names must begin with "swatch_color_"
  • Add the name of the product variant color all lowercase and without spaces
  • Adding an existing CSS color name to the end of "swatch_color_" overwrites the default CSS color

Here are some examples for the following colors:

  • Butter Yellow - {%- assign swatch_color_butteryellow = '#F3EF7D' -%}
  • Grape - {%- assign swatch_color_grape = '#5F5387' -%}
  • Navy (overwriting the default #000000 CSS color value for 'navy') - 
    {%- assign swatch_color_navy = '#0d0d73' -%}

Show swatch images - With this setting enabled, you can upload your own custom images. For best results, we recommend using a 100 x 100px .png image. The image file name will need to follow the handle, hyphenated format of the color option you are using for the variant. For example, Heather Gray would require a file name of heather-gray.png in order to display. The file name must match the variant color option in that format in order to appear. 

  • Swatch images must match the names of the color options
  • Save the image using all lowercase letter and dashes (-) for spaces
  • Save the image as a .PNG image, ideally 100 x 100px square

To upload your image files, follow these steps: 

  1. Open the Themes page of the Shopify admin
  2. Click on the Actions drop-down and select Edit code
  3. Open the Assets folder and select Add a new asset
  4. Select Upload asset
  5. Repeat this process for each swatch image you want to use.

Our premium theme support requires that a valid theme license has been purchased for use with a single store only. Using an unlicensed theme is in violation of Shopify’s Terms of Service

Our premium theme support includes the following:

  • General questions on theme features and technical functionality.
  • Help with setting up and configuring your theme settings.
  • Shopify issues related to a fresh installation of one of our themes.
  • Prompt bug fixes once a theme bug has been identified. We will provide a fix and immediately update the theme for all customers to access.
  • Support for all Shopify Guides verified to work with sectioned themes.
  • In cases where a custom development solution is required, we'll provide details as to why and even provide recommendations related to minor theme customizations and app recommendations.

Our premium theme support does not include:

  • Shopify administration or native Shopify functionality which is handled by Shopify Support.
  • Custom development or custom design work which can better be handled by a Shopify Expert
  • Installation, configuration or troubleshooting related to third-party apps, including those in the official Shopify app store.
  • Design or layout changes beyond simple updates that can be made within the theme options.
  • Upgrading themes.
  • Search engine optimization (SEO) issues, conversion rate optimization (CRO) issues or similar.
  • Page speed or other issues.
  • Installing or troubleshooting issues with Google Merchant Center, Google Analytics, Google AdWords remarketing tags, Google Tag Manager, Facebook Pixels or other third-party analytics or tracking code.
  • Technical support for older versions of our themes is limited. Upgrading to the latest version is always recommended and may be required for us to provide technical support.

Still, feel free to reach out on topics that fall outside of our support to see if it’s something we have an easy solution for or a resource that we can point you to.

For any issues impacting your shop's availability or any other issues you deem an emergency or critical to your business, please contact Shopify support -

Still need help? Contact Us Contact Us