[dezefy]

You have to do it little differently.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" async></script>

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

Make sure you copy/download the theme so that you have a backup. also shopify stores revisions so that you can revert back.

[dezefy]

Look at the codes below.

<ul class="colorlist"> 
 {% for option in product.options %}
 {% if option == 'Color' %}
 {% assign index = forloop.index0 %}
 {% assign colorlist = '' %}
 {% assign color = '' %}
 {% for variant in product.variants %}
 {% capture color %}
 {{ variant.options[index] }}
 {% endcapture %}

 {% unless colorlist contains color %}
  {% if variant.available %}

  <li id="{{ variant.id }}" title="{{ variant.inventory_quantity }} In Stock" class="instock"><a href="{{ product.url | within: collection }}?variant={{ variant.id }}" style="background:{{ color | downcase }}">{{ color | downcase }}</a></li>

  {% else %}

  <li id="{{ variant.id }}" title="Out of Stock"  class="outstock" >{{ color | downcase }}</li>

  {% endif %}

{% capture tempList %}
{{colorlist | append: color | append: " " }}
{% endcapture %}
{% assign colorlist = tempList %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
</ul>

The code above can display the available colors of a product in collection page. You can take the same loop structure and display the entire product grid instead of just displaying the variant name.

[Author]

Posts