aaliyan111

What you want

You want a See Size Chart button on the product page:

... that once clicked gives you this:

aaliyan111

<script>
jQuery(document).ready(function($){

var images = [];

{% for image in product.images %}
  images.push({url: "{{ image | product_img_url: 'medium' }}", alt: "{{ image.alt }}"});
{% endfor %}

  var thumbnails = $(".thumbs");                         

aaliyan111

What to do

1. Use the alt text to associate the additional images - besides the variant image - to the option value. Example: say you have 3 images that show the Blue variants, then a) associate the first image as variant image to all Blue variants, and b) set the alt text of the 2 additional images to 'Blue'.
2. Copy+paste the code found in the product.liquid snippet below at the bottom of your product.liquid template.

How that works, essentially

Only the images associated to the currently selected variant are shown. Other images are hidden.

What to expect, the specifics

aaliyan111

{% comment %}
Source: https://gist.github.com/carolineschnapp/9122054
If you are not on a collection page, do define which collection to use in the order form.
Use the following assign statement, replace 'your-collection-handle-here' with your collection handle.
{% assign collection = collections.your-collection-handle-here %}
Use the assign statement outside of this comment block at the top of your template.
{% endcomment %}

{% paginate collection.products by 100 %}

aaliyan111

<!-- add the vendor as product tag to product then use this code in collection.liquid -->
<!-- if we are on a collection page that is either custom or smart -->
{% if collection.url != blank %}
<h4>Shop by vendor:</h4>
<ul>
	{% for product_vendor in collection.all_vendors %}
	<li>
		{% if current_tags contains product_vendor %}
		<a class="active" href="{{ collection.url }}">{{ product_vendor }}</a>
		{% else %}

aaliyan111

<script>
// (c) Copyright 2016 Caroline Schnapp. All Rights Reserved. Contact: [email protected]
// See https://docs.shopify.com/themes/customization/navigation/link-product-options-in-menus

var Shopify = Shopify || {};

Shopify.optionsMap = {};

Shopify.updateOptionsInSelector = function(selectorIndex) {
    

aaliyan111

<script type="text/javascript">
/*

re: http://ecommerce.shopify.com/c/ecommerce-design/t/land-on-specific-variant-when-loading-product-page-147793

Assumes:
--------

* that you are calling the javascript once the select element is available
* you have a select element on the page like:

aaliyan111

<form action="/cart/add" method="post" style="text-align:center;">
  <select name="id">
  {% for variant in product.variants %}
    {% if variant.available %}
    <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
    {% else %}
    <option disabled="disabled">{{ variant.title }} - Sold Out</option>
    {% endif %}
  {% endfor %}
  </select>

aaliyan111

var MGUtil={
    data:[],
    ini:0,
    total:0,
    addItem:function(qty,id,properties,callback) {
        var params = {quantity:qty,id:id};
        if(properties != false){
            params.properties = properties;
        }
        $.ajax({

aaliyan111

<script type="text/javascript" charset="utf-8">
//<![CDATA[
jQuery(function() {
  jQuery(window).unload(function() {
    var params = {
      type: 'POST',
      url: '/cart/update.js',
      data: jQuery('form[action="/cart"]').serialize(),
      dataType: 'json',
      async: false