Currently I have light gray ovals around the items listed, 'best seller', 'restocked', 'selling fast' etc on my page but I want to have another format that is conditional on what txt string is being used. for example I want a black circle around and item that I list as 'pre-order' rather than a light gray circle
<body>
<div style="text-align: center">
<p
style="
border: 1px solid rgba(203, 203, 203, 1);
border-radius: 300px;
padding: 3px;
width: 95px;
background-color: rgba(255, 255, 255, 1);
font-size: 10px;
font-weight: 800;
color: rgba(100, 100, 100, 1);
"
>
{% if product.tags contains "new-badge" %}
NEW PRODUCT
{% elsif product.tags contains 'restocked' %}
RESTOCKED
{% elsif product.tags contains 'best-seller' %}
BEST SELLER
{% elsif product.tags contains 'selling-fast' %}
SELLING FAST
{% endif %}
</p>
</div>
</body>