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:  https://cuber-playground.myshopify.com/products/bagpack

Implement the solution

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

    style="background-color: '+$(this).val().split(" ").pop()+'"':"")
  3. Replace this exact line with the following one:

    style="background-image:url( ' + window.shopifyThemeAssetsFolder.replace('blank', $(this).val().split(' ').pop() ) + ')"' : '' )
    Make sure that you are really careful with this change, a missing character could stop the theme from working.
  4. Choose  /assets/css_main.scss.liquid and at the very end of the file, paste the following code:

    /* ----
       Image swatches addon
      ---
    */
    
    #add-to-cart.style--minimal ul.color-true li {
    
      width: 32px;
      height: 32px;
      top: -17px;
    
      span {
        background-repeat: repeat;
        background-size: contain;
      }
    
    }

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

  5. Finally, choose /templates/product.liquid and at the very end of the file, paste the following code:

    <script type="text/javascript">
      window.shopifyThemeAssetsFolder = "{{ 'swatch-blank.png' | asset_url }}";
    </script>
  6. 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 called 'Déjà Vu Blue', then name your image swatch-dejavublue.png

Other example, if your color is 'Blue/Gray', then name your image swatch-bluegray.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.