Different color labels for individual product titles

Highlighted
New Member
3 0 0

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

 

Annotation 2020-05-22 143311.png

0 Likes
Highlighted
Shopify Partner
83 10 20

@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

0 Likes
Highlighted

@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. 

Previously worked at Shopify; now I run my own stores and help businesses improve their Shopify stores through my course: Thrive On Shopify. | More revenue. Save Time. Less Stress. | https://www.growlikeanelephant.com/thrive
0 Likes
Highlighted
New Member
3 0 0

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?

 

 

0 Likes
Highlighted
Shopify Partner
83 10 20

@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.

0 Likes
Highlighted
New Member
3 0 0

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 %}
0 Likes
Highlighted

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

Previously worked at Shopify; now I run my own stores and help businesses improve their Shopify stores through my course: Thrive On Shopify. | More revenue. Save Time. Less Stress. | https://www.growlikeanelephant.com/thrive
0 Likes