I need code to add custom labels

[Koincestore]

I am trying to add custom labels in the dawn theme in backend, I want to work it like this

Labels should be "New" , "On Sale" & "Free Shipping" on individual products but I want to make sure it will display only when I add tag in the product. 


Thank you in advance for your help. 

[Weblegs_Support]

Step 1: Add Tags to Products
    1. In your Shopify admin, go to Products.
    2.Select a product you want to add a label to.
    3. In the Tags section, add your desired tags:
     -new for the "New" label
     -on_sale for the "On Sale" label
     -free_shipping for the "Free Shipping" label
    4.Save your changes.

Step 2: Edit the Theme Code
1.Go to Online Store > Themes.
2.Find the Dawn theme, click Actions > Edit code.
3. In the Sections folder, find and open product-card.liquid or main-product.liquid.

Step 3: Add the Custom Labels
Insert the following code where you want the labels to appear within the product card or product details section:

{% assign tags = product.tags %}  

{% if tags contains 'new' %}  
  <span class="label label-new">New</span>  
{% endif %}  

{% if tags contains 'on_sale' %}  
  <span class="label label-on-sale">On Sale</span>  
{% endif %}  

{% if tags contains 'free_shipping' %}  
  <span class="label label-free-shipping">Free Shipping</span>  
{% endif %}

[Shinerds · Accepted solution]

You can add custom labels such as "New", "On Sale", and "Free Shipping" by using product tags in the Dawn theme. Here’s how you can do it:

Steps to Add Custom Labels Based on Product Tags
Go to your Shopify Admin → Products

Edit the product and add the relevant tags like:

• New
• On Sale
• Free Shipping

Modify the Dawn theme's product card

In Online Store → Themes → Customize, click Edit Code.

Open snippets/card-product.liquid.

Add this code inside the product card template (usually near the product title or image):

<div class="product-labels">
{% if product.tags contains 'New' %}
<span class="label new">New</span>
{% endif %}
{% if product.tags contains 'On Sale' %}
<span class="label sale">On Sale</span>
{% endif %}
{% if product.tags contains 'Free Shipping' %}
<span class="label free-shipping">Free Shipping</span>
{% endif %}
</div>

Style the labels in base.css or component-card.css:

.product-labels {
position: absolute;
top: 10px;
left: 10px;
display: flex;
gap: 5px;
}

.label {
background-color: #ff0000;
color: #fff;
padding: 5px 10px;
font-size: 12px;
font-weight: bold;
border-radius: 4px;
}

.new { background-color: #27ae60; } /* Green for New */
.sale { background-color: #e74c3c; } /* Red for On Sale */
.free-shipping { background-color: #f39c12; } /* Yellow for Free Shipping */

If a product has the "New" tag, it will display a green "New" label.

If a product has the "On Sale" tag, it will show a red "On Sale" label.

If a product has the "Free Shipping" tag, it will show a yellow "Free Shipping" label.

I hope it will work for you @Koincestore