Adding product color availability under product title on Dawn Theme

ebon
Pathfinder
88 3 30

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

96DD061B-E1A1-4171-96F0-FE5750502779.png

Replies 29 (29)
KetanKumar
Shopify Partner
25012 2502 9048

@ebon 

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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ebon
Pathfinder
88 3 30

Thank you but it didn't work.

ebon
Pathfinder
88 3 30

the code you supplied turned everything black. the product title description, price and number of colors available. 

 

bettybooper
Excursionist
24 1 4

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 

.product_card_count
You have to hard code your options that you want this to show up for.

 

ebon
Pathfinder
88 3 30

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

bettybooper
Excursionist
24 1 4
Bug I mean that if you have more than one word in the option then it doesn't count correctly. If you don't want swatches you can just remove the line with the image or have that option in the no swatches section. you are welcome. good luck!
ebon
Pathfinder
88 3 30

I’m no coder but I will figure it out. Thank you again

ebon
Pathfinder
88 3 30

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

KetanKumar
Shopify Partner
25012 2502 9048

@ebon 

sorry but in can't see css code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ebon
Pathfinder
88 3 30

 

 {% 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 -%}