Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save raihan004/b74e8d523ce8a2195756dd2539b423cc to your computer and use it in GitHub Desktop.
Save raihan004/b74e8d523ce8a2195756dd2539b423cc 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 %}
</small>
{% endif %}
{% endif %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment