Shopify themes, liquid, logos, and UX
Howdy,
looking for code to display the number of colors a product is available in. Not a swatch, just text ie. 5 Colors, much like the Nike example below. Thanks
my URL is PREACHA.com
yes please try this code
{% assign prod_variant_count = 0 %}
{% if product.available and product.variants.size > 1 %}
{% for option in product.options %}
{% if option contains 'Color' %}
{% for variant in product.variants %}
{% assign prod_variant_count = prod_variant_count | plus: 1 %}
{% endfor %}
{% else %}
<small>No Color variants</small>
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% if prod_variant_count > 0 %}<small>Colors available - {{ prod_variant_count }}</small>{% endif %}
Thank you for the reply.
which sheet/section do i paste the code into?
Thank you
Hello @ebon ,
Edit product-card.liquid under snippets, now here search for this code
{%- if product_card_product.featured_media -%}
<span class="card-information__text h5">
{{ product_card_product.title | escape }}
</span>
{%- endif -%}
once you find it then jut in next line paste this code
{%- assign prodcard_variant_count = 0 -%}
{%- assign color_label = 'color,Color,Colour,colour' | split: ',' -%}
{%- for option in product_card_product.options_with_values -%}
{%- assign downcased_option = option.name | downcase -%}
{%- if color_label contains downcased_option -%}
{%- assign variant_option = 'option' | append: forloop.index -%}
{%- for value in option.values -%}
{%- assign downcased_value = value | downcase -%}
{%- for variant in product_card_product.variants -%}
{%- if variant[variant_option] == value -%}
{% assign prodcard_variant_count = prodcard_variant_count | plus: 1 %}
{%- endif -%}
{%- endfor -%}
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
<span class="product_card_count">{{ prodcard_variant_count }} Colors</span>
Thanks
Thanks for the code. It works but it's counting each color per size so it's displays an inflated number. example. 1 shirt available in 4 colors should display "4 Colors" but what the codes does is times the number of colors available by the number of sizes the shirt comes in so you get 4 colors X 8 sizes equals 32 Colors.
Could you also make the text color for this lite grey please.
urp is preacha.com and the code is still inserted so you see.
I'm not sure why because it works fine for me. You can call your developer to crosscheck or write a new one.
To make it gray use this css
.product_card_count {
color: #ccc;
}
Thanks
can you check placement of the code and make sure you've instructed me to place it in the correct place please.
this extra code, do i just paste it under the first lot of code or does it need to be combined? if so, could you re-paste the full code here please. thank you
the code shows no change at all.
{% assign prod_variant_count = 0 %}
{% if product.available and product.variants.size > 1 %}
{% for option in product.options %}
{% if option contains 'Color' %}
{% for variant in product.variants %}
{% assign prod_variant_count = prod_variant_count | plus: 1 %}
{% endfor %}
{% else %}
<small>No Color variants</small>
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% if prod_variant_count > 0 %}<small>Colors available - {{ prod_variant_count }}</small>{% endif %}
thanks for for update but i can't see any code
sorry, it's the code you asked me to try.
{% assign prod_variant_count = 0 %}
{% if product.available and product.variants.size > 1 %}
{% for option in product.options %}
{% if option contains 'Color' %}
{% for variant in product.variants %}
{% assign prod_variant_count = prod_variant_count | plus: 1 %}
{% endfor %}
{% else %}
<small>No Color variants</small>
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% if prod_variant_count > 0 %}<small>Colors available - {{ prod_variant_count }}</small>{% endif %}
that one
Sorry but what does "That one" mean?
oh sorry that code doesn't work?
oh sorry for that issue it can be done some other customization code
You can add color swatches on Product page https://storefix.co/add-color-swatches-to-dawn-theme/
I tweaked it a bit so it only counts unique values. Try this:
{%- assign prodcard_variant_values = '' -%}
{%- assign color_label = 'color,Color,Colour,colour' | split: ',' -%}
{%- for option in product_card_product.options_with_values -%}
{%- assign downcased_option = option.name | downcase -%}
{%- if color_label contains downcased_option -%}
{%- assign variant_option = 'option' | append: forloop.index -%}
{%- for value in option.values -%}
{%- for variant in product_card_product.variants -%}
{%- if variant[variant_option] == value -%}
{% assign prodcard_variant_values = prodcard_variant_values | append: value | append: ' '%}
{%- endif -%}
{%- endfor -%}
{%- endfor -%}
{%- endif -%}
{% assign prodcard_variant_unique_values = prodcard_variant_values | split: ' ' | uniq | join: ',' %}
{% assign prodcard_variant_unique_values = prodcard_variant_unique_values | split: "," %}
{%- endfor -%}
{%- if prodcard_variant_unique_values.size > 1 -%}
<span class="product_card_count">{{prodcard_variant_unique_values.size}} Colors Available</span>
{%- endif -%}
EXCELLENT!!! Thank you so much
it works! question. ow do I turn the text Grey? it's black and bolded.
url Preacha.com
Hey, there is a bit of a bug in that code. Just wanted to give you a heads up. I also tweaked it so that it added in thumbnails of the variants on the collection pages. You can see how it looks here https://makeoutstore.com/collections/one-pieces.
{% if product_card_product.options contains 'Pattern'
or product_card_product.options contains 'Color'
or product_card_product.options contains 'Drawing'
or product_card_product.options contains 'Number'
%}
{%- assign pattern_label = 'pattern,Pattern,color,Color,Colour,colour,Drawing,drawing,number,Number' | split: ',' -%}
{%- for option in product_card_product.options_with_values -%}
{%- assign downcased_option = option.name | downcase -%}
{%- if pattern_label contains downcased_option -%}
{%- assign variant_option = 'option' | append: forloop.index -%}
<div class="design-count-swatches">
{%- for value in option.values -%}
{%- for variant in product_card_product.variants -%}
{%- if variant[variant_option] == value -%}
{%- assign handle_value = value | handleize -%}
{% assign prodcard_variant_pattern_values = prodcard_variant_pattern_values | append: handle_value | append: ':' %}
{%- endif -%}
{%- endfor -%}
{% if product_card_product.options contains 'Pattern' or product_card_product.options contains 'Color'%}
<img src="{{ handle_value | append: '.gif' | asset_url }}" alt="{{ value }}" width="16" height="16" />
{% endif %}
{%- endfor -%}
{%- endif -%}
{% assign prodcard_variant_pattern_values_unique = prodcard_variant_pattern_values | split: ':' | uniq | join: ',' %}
{% assign prodcard_variant_pattern_values_unique = prodcard_variant_pattern_values_unique | split: "," %}
{%- endfor -%}
</div>
{%- if prodcard_variant_pattern_values_unique.size > 1 -%}
<span class="product_card_count">{{prodcard_variant_pattern_values_unique.size }}
{% if product_card_product.options contains 'Pattern'%}Patterns{% endif %}
{% if product_card_product.options contains 'Number'%}Numbers{% endif %}
{% if product_card_product.options contains 'Drawing'%}Drawings{% endif %}
{% if product_card_product.options contains 'Color'%}Colors{% endif %}
Available</span>
{%- endif -%}
{%- endif -%}
To tweak the color you would apply your css to
1: when you say bug, do you mean a vulnerability?
2: does the new code you pasted add swatches as well as the color count as per your example? If so, I’m not interested in having the color swatches but thank you anyway.
3: could you paste the amended code without the swatches please?
thank you
I’m no coder but I will figure it out. Thank you again
Sorry to be a pain but I did say I wasn’t a coder. I’ve gone over your code and I can’t see a line that has the word images in it. Can you be specific to what I’m looking for to remove in order to not have the swatches display or please paste the code without that option.
im happy to find it myself but as I mentioned before I’m not a coder so please keep that in mind when directing me what to look for to remove. Thank you again
sorry but in can't see css code
{% if product_card_product.options contains 'Pattern'
or product_card_product.options contains 'Color'
or product_card_product.options contains 'Drawing'
or product_card_product.options contains 'Number'
%}
{%- assign pattern_label = 'pattern,Pattern,color,Color,Colour,colour,Drawing,drawing,number,Number' | split: ',' -%}
{%- for option in product_card_product.options_with_values -%}
{%- assign downcased_option = option.name | downcase -%}
{%- if pattern_label contains downcased_option -%}
{%- assign variant_option = 'option' | append: forloop.index -%}
<div class="design-count-swatches">
{%- for value in option.values -%}
{%- for variant in product_card_product.variants -%}
{%- if variant[variant_option] == value -%}
{%- assign handle_value = value | handleize -%}
{% assign prodcard_variant_pattern_values = prodcard_variant_pattern_values | append: handle_value | append: ':' %}
{%- endif -%}
{%- endfor -%}
{% if product_card_product.options contains 'Pattern' or product_card_product.options contains 'Color'%}
<img src="{{ handle_value | append: '.gif' | asset_url }}" alt="{{ value }}" width="16" height="16" />
{% endif %}
{%- endfor -%}
{%- endif -%}
{% assign prodcard_variant_pattern_values_unique = prodcard_variant_pattern_values | split: ':' | uniq | join: ',' %}
{% assign prodcard_variant_pattern_values_unique = prodcard_variant_pattern_values_unique | split: "," %}
{%- endfor -%}
</div>
{%- if prodcard_variant_pattern_values_unique.size > 1 -%}
<span class="product_card_count">{{prodcard_variant_pattern_values_unique.size }}
{% if product_card_product.options contains 'Pattern'%}Patterns{% endif %}
{% if product_card_product.options contains 'Number'%}Numbers{% endif %}
{% if product_card_product.options contains 'Drawing'%}Drawings{% endif %}
{% if product_card_product.options contains 'Color'%}Colors{% endif %}
Available</span>
{%- endif -%}
{%- endif -%}
Hello,
the code worked but it turned the product price and color count to a bolded black color.
I would prefer it to be the default color that Dawn theme uses.
please help.
URL is preacha.com
thank you again
can you please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.
.card-information__text {
font-weight: bold;
color: rgb(var(--color-foreground)) !important;
}
Thank you but it didn't work.
the code you supplied turned everything black. the product title description, price and number of colors available.
Hello,
would this code you wrote for Dawn 2.0 work in Dawn 3.0 to display Product Color Availability Under the Product Title? I've not inserted it yet.
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024