Different color labels for individual product titles

Highlighted
New Member
1 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
54 7 12

@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