Different color labels for individual product titles

[ethanfox]

I am looking to have each of my project labels/titles be a different color like the example below. I am using webflow to make a custom theme. I have been able to get everything else to work. Now I just want to add this one last thing.

- Thanks in advance

[Arun_Kumar]

@ethanfox ,

Use class attribute along with the forloop, doing so the class name will be different for each product. Then you can have different color labels for individual product titles.

For example,  color-label-{{ forloop.index }}. Put it inside the for loop where product-grid-card is getting rendered

[TristanKing]

@ethanfox Hey there -- similar to the above, I'd suggest to use a tag on the product, and then create a class for that tag, that shows the correct colour in the label.  Specifically:

• Inside of Shopify in the Product Admin, add a tag to each product.  E.g. for the blue product, add a tag such as blue-label... green one add green-label.. yellow one add yellow-label.
• Next, go to your CSS file - usually called Theme.css, style.css, stylesheet.css or similar under the Assets Folder of Edit Code in your Theme - and find the class that's using the labels.  If you can send your site here I can take a look.  But let's say you have a class called "label", you'll need to add, for example:
  blue-label { background-color: blue; }.. and repeat for your other colours ("blue" could be a hex colour to make it more specific)
• Lastly, add that into your product grid where the label is.  E.g. often the file is called something like 'product-grid' -- find the label class, check the product's tags and apply the 'blue-label' class if it has that tag.

Feel free to send your website so we can take a closer look. 

[ethanfox]

I'm using Webflow to make my Shopify site. I have access to all of the code but what you said doesn't really make sense. Do I make "blue-label" a subclass of the parent class? How does making a class the same name as a tag inform the site to change the background color?

[Arun_Kumar]

@ethanfox 

According to TristanKing, you need to add the Tags in your product which you can do easily by going to the Products, and then then at the Bottom Right side entering the tag name for example label-blue. 
Then you need to code in the file product-grid, you need to call the tags and then filter if the tag contains label, and then if the condition met, then you can include corresponding class for example, for label-blue, put the class name color-blue.

[ethanfox]

This what I currently have and it does not work.

{% for tag in product.tags %}
{% if tag == "blue-label" %}
    {% style %}
  		.Product-Title {
   		 		background-color: #A1C3F5;}
		{% endstyle %}

  {% elseif tag == "orange-label" %}
  
    {% style %}
  		.Product-Title {
   		 		background-color: #FF902A;}
		{% endstyle %}

    
  {% endif %}
{% endfor %}

[TristanKing]

@ethanfox which file is that?  Please send us a link to your store so we can help further :)