-
-
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% 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