Costumizing product tags with CSS

[claire_borchard]

I added tags so they would display on my product page, but customization via CSS isn’t working. The tags are still showing up as underlined links. Any thoughts?

Store link / specific product: https://www.originandnorth.com/products/snow-princess-calendula-seeds-heirloom-flower-seeds

I used this code to get tags on my product page:

  {% for tag in product.tags %}
  {{ tag }}
  {% endfor %}

and I believe they show up as they should, as underlined links:

But would like them prettier:

I have tried this code - I found this from another thread and inserted into base.css, but it doesn’t work.

.product-tags {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 2px;
}
.product-tags span {
    background: #66AFAE;
    padding: 2px;
    text-align: center;
}
span.tag a {
    text-decoration-line: none;
    color: white;
}

and this one, but it doesn’t work either.

.product-tags {
  width:90%;
}
.product-tags span{
    background-color: white;
    padding: 5px 15px 5px 15px;
    border-radius: 15px;
    border: 1px solid grey;
    display: inline-block;
    margin-top: 4px; }

[TheScriptFlow]

You are selecting the wrong selector. Please paste the following code in the end of base.css file.

.tag a {
    text-decoration: blink;
    color: white;
    background: black;
    padding: 3px 12px 3px 12px;
    border-radius: 30px;
    text-align: center;
}

Results:

[claire_borchard]

This also doesn’t work. Is this the only thing I paste, or do I add it under the .product_tags?

[TheScriptFlow]

May I know in which theme file you paste the following code?

[claire_borchard]

Dawn theme

[TheScriptFlow]

Could you please share the ScreenShot where you paste the code. Because the code that I provide you is solid and should work.

[claire_borchard]

This is a screenshot of what the bottom of my current CSS code looks like

[TheScriptFlow]

Try this please:

.tag a {
    text-decoration: none !important;
    color: white !important;
    background: black !important;
    padding: 3px 12px 3px 12px !important;
    border-radius: 30px !important;
    text-align: center !important;
}

[claire_borchard]

Nada.

Do you think this is because of where it’s located?

This is my main-product.liquid:

[claire_borchard]

Unfortunately, this also doesn’t work.

I’ve even tried pulling the page up on Chrome to see if it was a cache issue, and it doesn’t seem to be.

[claire_borchard]

THIS is the answer!!! Thank you SO much because I never would have caught that. WOOHOO!!

Thank you a million times over!