Snippet that says 'also available in colors x and y' on the collection page when a product is available in more than 1 color. To include in product-loop.liquid, or product-grid-item.liquid.

available-colors.liquid

{% comment %}
  Do we have a Color option?
  If so, is it the first, second or third option of that product?
  We will need to access values so we need that color index.
{% endcomment %}

{% assign has_color = false %}
{% assign color_option_index = 0 %}
{% for option in product.options %}
  {% assign downcased_option = option | downcase %}
  {% if downcased_option contains 'color' or downcased_option contains 'colour'  %}
    {% assign color_option_index = forloop.index0 %}
    {% assign has_color = true %}
  {% endif %}
{% endfor %}

{% comment %}
  If we have a Color option, let's create a list of
  all available colors for that product, ordered alphabetically.
  Let's not include the color featured on the collection page.
  Let's not include colors that are sold out.
{% endcomment %}

{% if has_color %}
  {% assign featured_color = product.images.first.variants.first.options[color_option_index] %}
  {% assign colors = '' %}
  {% for variant in product.variants %}
    {% if variant.available %}
      {% assign color = variant.options[color_option_index] %}
      {% unless featured_color != blank and color == featured_color %}
        {% if colors == blank %}
          {% assign colors = color %}
        {% else %}
          {% assign colors = colors | join: '|' | append: '|' | append: color | split: '|' | uniq | sort %}
        {% endif %}
      {% endunless %}
    {% endif %}
  {% endfor %}

  {% comment %}
    If the product is available in any color other than the one featured on the collection page.
  {% endcomment %}

  {% if colors.size > 0 %}

  <small style="display:block; font-size: 85%; color: #555;">
    {% if featured_color == blank %}    
    Available in
    {% else %}
      Also available in
    {% endif %}
    {% for color in colors %}{% if forloop.first %}{% elsif forloop.last %} and {% else %}, {% endif %}{{ color }}{% endfor %}
  </small>

  {% endif %}

{% endif %}

Hi Caroline, would you be able to help with getting all variant images to show on collections pages?

So If I have a red shoe, a green shoe, and a blue shoe all listed as variants of 1 product, how can I get all three colors to show on a collection page so user know we have more then one color at a glance?

I am using the Venture theme. I'd appreciate any help!

Thx.

Hi Caroline,

Amazing what you do. I'm no expert in coding but slowly I can get around some tasks. I'd like to know from you if is possible to click on a product in my Shopify store and have it added to an order form instead of being added to the cart.
I'd like c;lients to use a custom order form I was able to create using JotForm and add products with all their attributes, Price, Item #, Description and price. When done, submit order to us. We'll contact them to finalize payment.
I was able to embed the form into my store but do not know how to take
take it to the next level as I describe.

Thanks very much

CsMia