How to use Shopify's Swatches in Pipeline 4

This tutorial is for Pipeline 4 and higher only. 

This is based on Shopify's tutorial on how to add swatches to your theme:

https://help.shopify.com/themes/customization/products/features/add-color-swatches

The following notes will help you install the Swatches snippet in Pipeline. The swatch modification will replace your variant option drop-downs with buttons for your options.

Result examples:

1

Make a duplicate of your theme - Important

Important: Before beginning, make a duplicate of your theme. There are several steps involved which can break your store's theme. This is an advanced modification and is not supported by us or Shopify.

The links for this tutorial will link to your live/published theme. If your shop is not currently selling, then make a duplicate/backup and keep that as a backup so you can rollback in case you make any mistakes or want to go back to the original selection drop-downs. If you're store is selling products right now, I would make a duplicate and work out of the duplicate version. You'll need to manually find the folders in the code editor for that duplicate or development version.

2

Add the swatch code in your snippets folder

Open your Code Editor. If Pipeline is published (updating your live theme) use this link:

https://shopify.com/admin/themes/current

Note: The above link will open your live theme Code Editor. If you are working out of a backup, then open the Code Editor manually. For the rest of this article, all theme links will connect to your live theme. If you're updating your live theme, make sure you have a duplicate to go back to if needed.

In the Snippets folder, choose Add a new snippet:

Call the file:

swatch

Use the Create snippet button to complete.

Paste all the code from this file (use link to view code):

Click to view code

Save the file.

3

Include swatch.liquid in snippets/product-form.liquid

Open Snippets/product.liquid. Use this link if Pipeline is published and you're updating your live theme:

Use the Find feature (Command-F on Mac, Control-F in Windows) and search for:

add-to-cart__wrapper

That will take you to this spot around line 49:

Choose one of the three code options below and then paste that just above the add to cart wrapper section. 

Example for Option 1:

Code option 1 

If you want to apply the button or swatch treatment to all your product options, use this:

<!-- swatch -->
{% if product.available and product.variants.size > 1 %}
{% for option in product.options %}
{% include 'swatch' with option %}
{% endfor %}
{% endif %}
<!-- end swatch -->

Alternate Option 1 - Show swatches even when no inventory is available

When no inventory is available, the swatch code will still run if you use this version instead:

<!-- swatch -->
{% if product.variants.size > 1 %}
{% for option in product.options %}
{% include 'swatch' with option %}
{% endfor %}
{% endif %}
<!-- end swatch -->

Code option 2

If you want to use the button treatment on a Size option only, use this:

<!-- swatch -->
{% if product.available and product.variants.size > 1 %}
 {% include 'swatch' with 'Size' %}
{% endif %}
<!-- end swatch -->

Alternate Option 2 - Show swatches even when no inventory is available

When no inventory is available, the swatch code will still run if you use this version instead:

<!-- swatch -->
{% if product.variants.size > 1 %}
 {% include 'swatch' with 'Size' %}
{% endif %}
<!-- end swatch -->

Code option 3

If you want to use the button treatment on a Color option only, use this:

<!-- swatch -->
{% if product.available and product.variants.size > 1 %}
 {% include 'swatch' with 'Color' %}
{% endif %}
<!-- end swatch -->

Alternate Option 3 - Show swatches even when no inventory is available

When no inventory is available, the swatch code will still run if you use this version instead:

<!-- swatch -->
{% if product.variants.size > 1 %}
 {% include 'swatch' with 'Color' %}
{% endif %}
<!-- end swatch -->

If you're unsure which one to use, try Option 1 first. 

Save the file.

4

Add Javascript to assets/theme.js

Open your assets/theme.js file. Use the following link if Pipeline is published and you're updating your live theme:

Use the Find feature, search for:

evt.variant;

Part 1 - assets/theme.js

Add the following code right above this line:

Code to add above:

// BEGIN SWATCHES
if (variant) {
  var form = jQuery('#' + selector.domIdPrefix).closest('form');
  for (var i=0,length=variant.options.length; i<length; i++) {
    var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
    if (radioButton.size()) {
      radioButton.get(0).checked = true;
    }
  }
}
// END SWATCHES

Example after paste:

Part 2 - assets/theme.js

Next, add this additional code to the very bottom of theme.js:

/* swatch code by Shopify for Pipeline */
jQuery(function() {
  jQuery('.swatch :radio').change(function() {
    var optionIndex = jQuery(this).closest('.swatch').attr('data-option-index');
    var optionValue = jQuery(this).val();
    jQuery(this)
      .closest('form')
      .find('.single-option-selector')
      .eq(optionIndex)
      .val(optionValue)
      .trigger('change');
  });
});
/* - end additional swatch code - */

Example:

Save the file.

5

Add the required CSS to assets/theme.scss.liquid

Add the following CSS code to the very bottom of your assets/theme.scss.liquid file. Use this link if Pipeline is published and you're updating your live theme:

Code to paste:

Click to view css code

Option: If you'd like your swatch elements centred, add this additional code:

/* -- center swatch elements -- */
.product-single .swatch {
    display: table;
    margin: auto;
}
.swatch .header {
	text-align:center;
}
/* - end - */

Centred swatches:

Save the file.

Notes

You can upload custom color image files to match the color name of all your product color variant. For example, if your product has the a color option of orange, a default orange color button will be shown as:

You can upload a new .PNG file called orange.png and that one will be shown in instead. 

The replacement color image must be in .PNG format and can be 55px wide by 40px high. A larger image is fine but to keep page load times to a minimal, 55x40 works best.

If you have colors like Burnt Orange and Dark Orange, you can upload files called: burnt-orange.png and dark-orange.png.

All files should be uploaded to your Assets folder like the soldout.png in Step 4.

When only one variant option is available, the swatch code won't replace with a button. 

If you have color names that the swatch code can't understand like this:

The default grey button will be displayed. There are two colors in this example and there's also a "/" character. You might want to rename a product like this to one dominant color name instead of two. 

Optional: Add an active state to a swatch selection

If you're using swatches for sizes, then there's some code that will help the customer know which swatch they've selected. Example:

/* -- Set active swatch color -- */
.swatch input:checked+label {
// these two lines below set the background color and border color:
  background-color: #de3618;
  border-color: #de3618;
// this line below sets the text color:
  color:#ffffff;
}
// use valid hex colors to match your theme design. 
// reference for hex: https://picular.co
/* -- end -- */

Pipeline: Related Articles