Convert variant dropdown into swatches, multiple-option-sollution

shop.js

/**************************************************************| CONVERT VARIANT TO SWATCHES |*/
$(function() {
	if($(".single-option-selector").length) {

		$(".single-option-selector").each(function(i) {
			var $thisSelect = $(this);
			var $newClass = "js-option-selector-" + i;
			var $newOptions = '<ul class="new-variant-swatchs">';
			var $currentOption = $thisSelect.val();

			$thisSelect.find("option").each(function() {
				var $this = $(this);
				var $optionText = $this.text();
				var $optionVal = $this.val();
				var $soldOut = $this.hasClass("is-soldout");

				$newOptions += '<li class="new-variant-swatch js-new-variant-swatch' +
					($currentOption == $optionVal ? ' is-active' : '') +
					($soldOut ? ' is-soldout' : '') + '" data-val="' + $optionVal + '" data-select="' + $newClass + '">' +
					$optionText +
					'</li>';
			});

			$thisSelect.addClass("is-hidden").addClass($newClass).after($newOptions + '</ul>');
		});


		$(document).on("click", ".js-new-variant-swatch", function() {

			if(!$(this).hasClass("is-soldout")) {
				var $this = $(this);
				var $select = $this.attr("data-select");
				var $val = $this.attr("data-val");
				var $parent = $this.parent("ul");

				$('.' + $select).val($val).trigger("change");
				$parent.children("li").removeClass("is-active");
				$(this).addClass("is-active");

			}
		});
	}
});

shop.scss

// VARIANT STUFF
.selector-wrapper {
	vertical-align: middle;
	overflow: hidden;

	label {
		text-transform: uppercase;
		vertical-align: middle;
		display: inline-block;
		margin-top: 21px;
	}

	.new-variant-swatchs {
		list-style: none;
		padding: 0;
		margin: 10px 0;
		overflow: hidden;
		display: inline-block;
		vertical-align: middle;
		float: right;

		.new-variant-swatch {
			display: inline-block;
			vertical-align: middle;
			height: 35px;
			padding: 6px;
			text-transform: uppercase;
			margin: 3px;
			text-align: center;
			border: 2px solid #aaa;
			min-width: 35px;
			color: #aaa;
			cursor: pointer;

			&:hover { cursor: pointer; }
			&.is-soldout:hover { cursor: default; }
			&.is-soldout {
				color: #eee;
				border: 2px solid #eee;
				background-color: #fff;
			}
			&.is-active {
				color: #fff;
				border: 2px solid #000;
				background-color: #000;
			}
		}
	}
}

show-sizes.liquid

{% comment %}
	This snippet displays sizes

	Usage:
		{% include 'show-sizes' with product %}

	Return:
		no return

	Required:
		Must be called within product loop
{% endcomment %}


{% assign itemType = show-sizes %}

{% comment %}
	CREATE A VARIANTS DROPDOWN IF THE PRODUCT HAS MORE THAN ONE VARIANT. THIS WILL BE HIDDEN BY CSS AND MANIPULATED BY JS
{% endcomment %}
{% if itemType.variants.size > 1 %}

	<select name="id" id="variant-select-{{ itemType.id }}" class="is-hidden js-variant-select">
		{% for variant in itemType.variants %}
			<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
		{% endfor %}
	</select>

	<script>
		$(function() {
			new Shopify.OptionSelectors("variant-select-{{ itemType.id }}", { product: {{ product | json }} });

			{% if itemType.available %}
				{% assign found_one_in_stock = false %}
				{% assign all_in_stock = true %}
				{% for variant in itemType.variants %}
					{% if variant.available %}
					{% else %}
						{% assign all_in_stock = false %}
						$('#variant-select-{{ itemType.id }}-option-{{ forloop.index0 }}[value="{{ variant.options }}"]').addClass('is-soldout');
					{% endif %}
					{% if variant.available and found_one_in_stock == false %}
						{% assign found_one_in_stock = true %}
						{% for option in itemType.options %}
							$('#variant-select-{{ itemType.id }}-option-{{ forloop.index0 }}').val({{ variant.options[forloop.index0] | json }}).trigger('change');
						{% endfor %}
					{% endif %}
				{% endfor %}
			{% endif %}
		});
	</script>

{% comment %}
	IF THE PRODUCT ONLY HAS ONE VARIANT, CREATE A HIDDEN INPUT WITH THE VARIANT ID. NOTE: NECESSARY FOR "ADD TO CART" TO WORK
{% endcomment %}
{% else %}

	{% for variant in itemType.variants %}
		<input type="hidden" name="id" class="is-hidden js-variant-select" value="{{ variant.id }}" data-variant-title="{{ variant.title }}" />
	{% endfor %}

{% endif %}