Cacher is the code snippet organizer for pro developers

{% assign add_to_cart = 'Add to bag' %}
{% assign sold_out = 'Sold Out' %}
{% assign unavailable = 'Unavailable' %}

<div class="product" itemscope itemtype="http://schema.org/Product">
  
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}" />
  <meta itemprop="image" content="{{ product | img_url: 'master' }}" />

    

  
    {% if product.images.size == 0 %}
    
      <div class="product-photo-container">
        {% for image in product.images %}
        <img src="{{ '' | img_url: '1024x1024' }}" alt="" />
        {% endfor %}
      </div>
    
    {% else %}
    
      {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
      <div class="product-photo-container">

        <div id="slider">
          <div id="prev"></div>
          <div id="next"></div>
            {% include 'magiczoomplus' %} 
        </div>
      </div>
          

  {% endif %}

    </div><!-- .product-photos -->
    


  
  <form action="/cart/add" method="post" enctype="multipart/form-data">

    <div class="product-details">

      <!-- get collection name -->
      {% for collection in product.collections limit: 1 %}
      <h1 class="collection-name"> {{ collection.title }}</h1> 
      {% endfor %}

      <!-- get tags -->
      {% for tag in product.tags %}
      {% if tag == "Limited Edition" %}
      <p class="limited-edition"> Limited Edition</p>
      {% elsif tag == "Main Collection" %} 
      <p class="limited-edition"> Main Collection</p>  
      {% endif %}
      {% endfor %}

 
      <h2 class="product-name">{{ product.title }}</h1>
      <h3 class="product-tagline"></h1>     
       <div id="product-description" class="rte" itemprop="description">
        {{ product.description }}
      </div>

        {% if product.selected_or_first_available_variant.compare_at_price > product.selected_or_first_available_variant.price %}
          <span class="original-price">{{ product.selected_or_first_available_variant.compare_at_price | money }}</span> |
           <span class="product-price" itemprop="price" style="color: #a52a2a">{{ product.selected_or_first_available_variant.price | money }}</span>
        {% else %}
          <span class="product-price" itemprop="price">{{ product.selected_or_first_available_variant.price | money }}</span>
        {% endif %}





       
<!--       {% assign hide_default_title = false %}
      {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
        {% assign hide_default_title = true %}
      {% endif %}     -->   

      <div id="product-variants" class="{% if hide_default_title %} hidden{% endif %}">
            {% if product.available and product.variants.size > 1 %}
            {% include 'swatch' with 'Color' %}
            {% endif %}
            <select id="product-select" name="id">
            {% for variant in product.variants %}
              <option{% if variant == product.selected_or_first_available_variant %} selected{% endif %} value="{{ variant.id }}">
              {{ variant.title }} - {{ variant.price | money }}
              </option>
            {% endfor %}
            </select>


            <div id="product-add">
              <input type="submit" name="add" id="add" class="primary button" value="{{ add_to_cart | escape }}">
            </div>
     </div>        
      <!--        
      <div id="backorder" class="hidden">
        <p>{{ '%s is back-ordered. We will ship it separately in 10 to 15 days.' | replace: '%s', '<span id="selected-variant"></span>' }}</p>
      </div> -->

    </div><!-- .product-details -->

  </form>

</div>




<script>

// slider arrows as SVGs

var prevArrow = Raphael('prev', '22.25', '47.25');

prevArrow.path("M 16.231,40.844 7.321,23.738 16.25,6.156 14.688,6.156 5.759,23.738 14.669,40.844  z")
          .attr({ fill: '#1A1A1A','stroke-width': '0','stroke-opacity': '1'});


var nextArrow = Raphael('next', '22.25', '47.25');

nextArrow.path("M 16.231,40.844 7.321,23.738 16.25,6.156 14.688,6.156 5.759,23.738 14.669,40.844  z")
          .attr({ fill: '#1A1A1A','stroke-width': '0','stroke-opacity': '1'})
          .transform("r180");

</script>



<script>


  // get all colours from label data-color attribute
  var colors = $("label").map(function() {
    return $(this).data("color");
  });


  var $ul = $("ul#slideImages"),
  $swatches = $(".swatches");
  // for each colour, create and add class to <li>
  $.each(colors, function(i, color) {
    var $li = $("<li/>", {
      class: color
    });
    $ul.append(new Array(7).join($li.get(0).outerHTML));
  });

  var hiddenList = $('#hiddenList').html();
  console.log(hiddenList);

  // add contents of <li> from hidden list to visible list
  $('ul#slideImages li').each(function(i){
     $(this).append($('#hiddenList li:eq('+i+')').contents());
  });


  /*==========  Assign numerical IDs to slides  ==========*/

  var colorCount = {};
  for(var i=0;i<colors.length;i++){
      colorCount[colors[i]] = 0;
  }
  // for each <li> colour class add an incremented ID 
  $('ul#slideImages li').each(function(i){
     var color = $(this).attr('class');//or whatever attr which gives color
     colorCount[color] += 1;
     $(this).attr('id', color + '_' + colorCount[color]);
  });


  // get list of all colours
  var allColours = $('ul#slideImages').html();
  
  //console.log(allColours)

/*==========  When swatch button is clicked ==========*/

$('label').on('click', function(){

    // variables
    var $labelId = $(this).attr('id');  // get the colour name from swatch label ID
    //console.log(allColours);

    // reset colours by adding all into list
    $('ul#slideImages').empty();
     MagicZoomPlus.refresh(); // refresh magiczoom to get the zoom div
    $('ul#slideImages').append(allColours);

     // then remove the unselected
     $('ul#slideImages li').not('ul#slideImages li.' + $labelId ).remove(); 


    /*==========  Reset and re-order slides ==========*/

    $('ul#slideImages li.' + $labelId).prependTo('ul#slideImages');   // bring clicked colour to the top (second position so visible in slider)
    // preserve numerical order
    $('ul#slideImages li#' + $labelId + '_1').insertBefore('ul#slideImages li:nth-child(2)');
    $('ul#slideImages li#' + $labelId + '_2').insertBefore('ul#slideImages li:nth-child(3)');
    $('ul#slideImages li#' + $labelId + '_3').insertBefore('ul#slideImages li:nth-child(4)');
    $('ul#slideImages li#' + $labelId + '_4').insertBefore('ul#slideImages li:nth-child(5)');
    $('ul#slideImages li#' + $labelId + '_5').insertBefore('ul#slideImages li:nth-child(6)');
    $('ul#slideImages li#' + $labelId + '_6').insertBefore('ul#slideImages li:nth-child(1)');

 

});




/*==========  Show active state on active swatch ==========*/
$('label').on('click', function(){
  $('.active').removeClass('active');
  $(this).addClass('active');
});



/*========== Standard Shopify callback ==========*/
  
var selectCallback = function(variant, selector) {

  if (variant) {
    

    // Selected a valid variant that is available.
    if (variant.available) {
          
      // Enabling add to cart button.
      jQuery('#add').removeClass('disabled').prop('disabled', false).val({{ add_to_cart | json }});
    
      // If item is backordered yet can still be ordered, we'll show special message.
      if (variant.inventory_management && variant.inventory_quantity <= 0) {
        jQuery('#selected-variant').html({{ product.title | json }}{% unless hide_default_title %} + ' - ' + variant.title{% endunless %});
        jQuery('#backorder').removeClass("hidden");
      } else {
        jQuery('#backorder').addClass("hidden");
      }
      
    } else {
      // Variant is sold out.
      jQuery('#backorder').addClass('hidden');
      jQuery('#add').val({{ sold_out | json }}).addClass('disabled').prop('disabled', true);       
    }
    
    // Whether the variant is in stock or not, we can update the price and compare at price.
    if ( variant.compare_at_price > variant.price ) {
      jQuery('#product-price').html('<span class="product-price on-sale">'+ Shopify.formatMoney(variant.price, "{{ shop.money_format }}") +'</span>'+'&nbsp;<s class="product-compare-price">'+Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}")+ '</s>');
    } else {
      jQuery('#product-price').html('<span class="product-price">'+ Shopify.formatMoney(variant.price, "{{ shop.money_format }}") + '</span>' );
    }        

  } else {
    // variant doesn't exist.
    jQuery('#product-price').empty();
    jQuery('#backorder').addClass('hidden');
    jQuery('#add').val({{ unavailable | json }}).addClass('disabled').prop('disabled', true);
  }

};
  
jQuery(function($) {

  new Shopify.OptionSelectors('product-select', { product: {{ product | json }}, onVariantSelected: selectCallback, enableHistoryState: true });
  
  // Add label if only one product option and it isn't 'Title'.
  {% if product.options.size == 1 and product.options.first != 'Title' %}
    $('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first }}</label>');
  {% endif %}

});

Shopify.Image.preload({{ product.images | json }}, 'grande');
Shopify.Image.preload({{ product.images | json }}, 'master');


</script>