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.

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

In the mentioned version we've added the proper logic to make this feature easily available to you without any extra effort. For any color swatch that you want to add, you just have to upload a 32x32px png file in your store's files section, with the name exactly the same as your product's variant handle.

For example, let's say that your product has a variant called "Dark Grey". You will want to create an image file name "dark-grey.png" and upload it into the Settings > Files section of your Shopify admin. That's it!

Wait a few minutes, as the images are cached and will take a bit to show on your site.

Liquid implementation

1. Go to the theme editor (read this article for more info)

2. Choose /layout/theme.liquid and find the following snippet:

   <script src="{{ 'theme.min.js' | asset_url }}" async></script>
   	

   You need to replace this with:

   <script type="text/javascript">
      window.shopifyThemeAssetsFolder = "{{ 'swatch-blank.png' | asset_url }}";
   </script>
   <script src="{{ 'theme.dev.js' | asset_url }}" async></script>
   	

3. Save the file!

Javascript implementation

1. Go to the theme editor (read this article for more info)

2. Choose assets/theme.dev.js and search for the following line of code:

   varDOM += '<li' + ( $(this)[0].selected ? ' class="active"' : '' ) + ' tabindex="0" data-text="' +encodeURIComponent($(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)[0].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!

CSS implementation

1. Choose /assets/theme.css file and at the very end of the file, paste the following code:

   .product--add-to-cart-form.style--minimal ul.color-true li {
     width: 32px;
     height: 32px;
     top: -17px;
   }
   .product--add-to-cart-form.style--minimal ul.color-true li span {
     background-repeat: no-repeat;
     background-size: cover;
     pointer-events: none;
   }
   	

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

2. Save the file!

Upload your color images

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

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.