I need code to add custom labels

Shopify Discussion

Topic summary

A user seeks to add conditional custom labels (“New”, “On Sale”, “Free Shipping”) to products in Shopify’s Dawn theme, with labels displaying only when specific tags are added to products.

Solution provided involves two main steps:

  1. Tag products appropriately in Shopify admin (e.g., tags like “new”, “on_sale”, “free_shipping”)

  2. Modify theme code by editing product card files (product-card.liquid, main-product.liquid, or card-product.liquid in snippets)

Implementation details:

  • Insert Liquid code using conditional statements to check for product tags
  • Add corresponding HTML span elements for each label type
  • Style labels using CSS in base.css or component-card.css with distinct colors (green for New, red for On Sale, yellow for Free Shipping)
  • Position labels absolutely on product cards (typically top-left corner)

Key code pattern:

{% if product.tags contains 'tag_name' %}
  <span class="label">Label Text</span>
{% endif %}

Multiple respondents confirmed this approach works for conditionally displaying custom labels based on product tagging.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

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.

2

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.
  2. 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’ %}
New
{% endif %}

{% if tags contains ‘on_sale’ %}
On Sale
{% endif %}

{% if tags contains ‘free_shipping’ %}
Free Shipping
{% endif %}

3

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):

{% if product.tags contains 'New' %} New {% endif %} {% if product.tags contains 'On Sale' %} On Sale {% endif %} {% if product.tags contains 'Free Shipping' %} Free Shipping {% endif %}

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