Adding images for color swatches

Split has built-in support for color swatches, based on color names. However, there may be instances where a store would require more specific swatches with complex colors or patterns. In this scenario, you can upload images for your swatches, but since the functionality isn't available in the theme, you will have to do a bit of tweaking for this purpose.

You can see this change in action here:

First, please enable the "minimal" variant style option from the product page theme customizer settings - screenshot.

Implement the solution (javascript part)

  1. Go to the theme editor (read this article for more info)
  2. Choose  assets/ and search for the following line of code - screenshot:

    varDOM += '<li' + ( $(this).is(':selected') ? ' class="active"' : '' ) + ' tabindex="0" data-text="' + $(this).val() + '"><span' + ( color ? ' style="background-color: ' + $(this).val().split(' ').pop() + '"' : '' ) + '>' + $(this).val() + '</span></li>';
  3. Replace this exact line with the following one:

    var variant_handle = $(this).val().toLowerCase().replace(/ /g,'_');
    varDOM += '<li' + ( $(this).is(':selected') ? ' class="active"' : '' ) + ' tabindex="0" data-text="' + $(this).val() + '"><span' + ( color ? ' style="background-image:url( ' + window.shopifyThemeAssetsFolder.replace('blank', variant_handle) + ')"' : '' ) + '>' + $(this).val() + '</span></li>';
  4. Save the file!
If you are using an older theme version (before VERSION 2.5.0) please insert the code in  /assets/js_main.js file instead ( screenshot).
Pro tip: If you wish to recompile your js file (minify it), you can use a tool such as: Closure Compiler .

    5. In  /layout/theme.liquid replace 'theme.min.js'  with '' in this code: screenshot.

Implement the solution (css part)

  1. Choose /assets/theme.css file (or in olrder theme versions: /assets/css_main.scss.liquid) and at the very end of the file, paste the following code: ul.color-true li {
      width: 32px;
      height: 32px;
      top: -17px;
    } ul.color-true li span {
      background-repeat: no-repeat;
      background-size: cover;

    This increases the dimensions of the swatches, in order to have the image more visible. You can adjust this after your own needs.

  2. Finally, choose /layout/theme.liquid and at the end of the file (before the the closing </body> tag), paste the following code:

    <script type="text/javascript">
      window.shopifyThemeAssetsFolder = "{{ 'swatch-blank.png' | asset_url }}";
  3. Save all files!

Upload your color images

Now that the solution is implemented, you need to upload the actual color images in the theme's assets folder. 

There's an important naming convention to respect here! The image must be named after the color option, but be all lowercase, have no spaces, have a .png extension and a "swatch-" prefix.

For example, if you have a color variant called 'Déjà vu blue', then name your image swatch-deja_vu_blue.png

Other example, if your color is 'Blue Gray', then name your image swatch-blue_gray.png

Most simple example, if your color is 'Black', then name your image swatch-black.png

  1. On the Edit HTML/CSS page, locate and click the Assets folder to reveal its content.
  2. Under the Assets heading, click the Add a new asset link.
  3. Upload your image.

Repeat steps 2 and 3 until you have uploaded all your images.

For the swatch image size, we recommend using 64px square images. 

Extra tweak:

If you wish to display the color name on hover, please add this CSS code at the end of /assets/theme.css:

ul.color-true li:before {
    content: attr(data-text);
    position: absolute;
    font-size: 20px;
    color: black !important;
    text-indent: 0;
    left: 0;
    z-index: 999;
    width: 300px;
    top: 32px;
    font-size: 13px;
    text-transform: capitalize;
    text-align: left;
    opacity: 0;
    transition: opacity 200ms linear;
ul.color-true li:hover:before {
    opacity: 1;
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.