Skip to content

Instantly share code, notes, and snippets.

Created October 4, 2016 15:15
Show Gist options
  • Save carolineschnapp/f55f44ffd2dcf6eeeda6c2812ea7f94f to your computer and use it in GitHub Desktop.
Save carolineschnapp/f55f44ffd2dcf6eeeda6c2812ea7f94f to your computer and use it in GitHub Desktop.
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.
{% 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 %}
{% endif %}
{% endif %}
Copy link

Hi, carolineschnapp,

Can you help me to write details code for mega menu of shopify.

Best regards,


Copy link

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!


Copy link

CSMia commented Mar 30, 2017

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


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment