How can I style a product badge on the dawn theme for free shipping?

Store Design
1

Hi, I’ve edited the code to add a “free shipping” badge on products on my dawn theme but I’m struggling with getting it to style how I want it to.

I added this on my card.product.liquid page below the settings badge position which worked

{%- elsif card_product.tags contains ‘this product ships free’ -%}
{{ ‘FREE SHIPPING’ }}
{%- endif -%}

Then I added this code to my base.css

.card__badge–this product ships free{
position: absolute;
display: inline-block;
line-height: 1;
text-align:center;
font-size: 1.2rem;
left: .5rem;
top: .5rem;
background-color: #f9e0e6 ;
color:#f9e0e6;
padding: .6rem 1.3rem;
}

But the text is still just black as shown below. How do I change it to be the hex colour box with black writing

Capture.PNG
Capture.PNG954×633 699 KB

2

Welcome to shopify community.

Please share your store URL and if your store is password protected then please provide password too.

Thank you.

3

https://carrouselcollectives.com.au/collections/door-mats

4

Please add below css in bottom of assets/base.css file

.card__badge {
background: #f9e0e6;
padding: 0 10px;

}
Thank you.

5

It didnt work

6

Hi @BriannaPhoebe ,

Go to Assets > base.css and paste this at the bottom of the file:

.card__badge--this.product.ships.free {
    border: 1px solid transparent;
    border-radius: var(--badge-corner-radius);
    display: inline-block;
    font-size: 1.2rem;
    letter-spacing: .1rem;
    line-height: 1;
    padding: 0.6rem 1.3rem;
    text-align: center;
    background-color: var(--gradient-base-accent-2);
    border-color: var(--gradient-base-accent-2);
    color: rgb(var(--color-foreground));
}

Hope it helps!