Hi,
I am using Prestige theme and I am trying to add a custom badge “Ready to Ship” based on a variant metafield. I am able to do that by adding code in product-card.liquid and css in theme.css. However, when I hover over the product image and the product image changes to 2nd one; the tag becomes white. I am not able to figure out how ensure this does not happen. Sharing a recording of the behaviour right now (cannot share the website link, the client is not ok with that at this stage): https://www.awesomescreenshot.com/video/34605457?key=7685355cb9d7be007c6835da85c9ade6
This is the CSS I am using:
.main-rts {
display: flex;
justify-content: space-between;
text-align: center;
align-items: center;
flex-wrap: wrap;
position: absolute;
width: 310px;
}
.main-rts img {
width: 25px;
margin-bottom: 3px;
}
.variant__description {
width: 39px;
margin-right: 5px;
}
.SizeSwatchList.HorizontalList.HorizontalList–spacingTight {
margin-top: 30px;
}
.rts {
position: absolute;
top: 7px;
right: -7px;
}
And this is the code:
{%- if tag contains ‘Ready To Ship’ -%}
{%- break -%}
{%- endif -%}
Appreciate any help.
Thanks,
Priyanka
