How can I show custom badges in my product

[jafakav]

I want to add more pages to my products like Best Seller, New Added, 50%OFF, and more how Can I add this anyone helping me, please
Thank You

[Kaushik_7 · Accepted solution]

Hey @jafakav Could you please share the store URL? This will allow me to inspect it and provide you with a more tailored solution.

[Kaushik_7 · Accepted solution]

No Problem @jafakav allowed me some time to provide you with the code

[Kaushik_7 · Accepted solution]

1. Add Tags to Products
   Best Seller
   New Added
   50% OFF
   
   
   
2. Edit the Theme Code
   1. Go to your Online Store
   2. Click on "Themes"
   3. Select "Edit code"
   4. Open your snippets/card-product.liquid file
   5. Add code below of this code https://prnt.sc/WrkwZ3ugzq7s 
   
   

<div class="product-card">
  {% assign badge_tags = 'Badge-BestSeller,Badge-NewAdded,Badge-50Off,Badge-Clearance' | split: ',' %}
  {% for tag in product.tags %}
    {% if badge_tags contains tag %}
      <div class="badge badge-{{ tag | downcase }}">
        {% case tag %}
          {% when 'Badge-BestSeller' %}
            Best Seller
          {% when 'Badge-NewAdded' %}
            New Added
          {% when 'Badge-50Off' %}
            50% OFF
          {% when 'Badge-Clearance' %}
            Clearance
        {% endcase %}
      </div>
    {% endif %}
  {% endfor %}
</div>

• Add CSS Styles for Each Badge
  Open your CSS file and add the code below 

.badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 12px;
    color: #000;
    font-size: 12px;
    font-weight: 700;
    border-radius: 3px;
    z-index: 10;
}

.badge-bestseller {
    background-color: #ff9800;
}

.badge-newadded {
    background-color: #4caf50;
}

.badge-50off {
    background-color: #f44336;
}

.badge-clearance {
    background-color: #9c27b0;
}

.badge-bestseller::before {
    content: '\2605'; /* Star icon */
    margin-right: 5px;
}

.badge-50off::before {
    content: '\0025'; /* Percentage symbol */
    margin-right: 3px;
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Best regards
Kaushik

[jafakav · Accepted solution]

Working Kaushik, thank you. I need to add white text color. How can I do that? Can you help me?

[Kaushik_7 · Accepted solution]

replace this CSS @jafakav 

.badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 12px;
    color: #fff; /* change this */
    font-size: 12px;
    font-weight: 700;
    border-radius: 3px;
    z-index: 10;
}

[Kaushik_7 · Accepted solution]

Hey @jafakav Could you please share the store URL? This will allow me to inspect it and provide you with a more tailored solution.

[jafakav]

Sorry, Kaushik, could you please provide the code and I'll add it. Thank you!

[Kaushik_7 · Accepted solution]

No Problem @jafakav allowed me some time to provide you with the code

[Kaushik_7 · Accepted solution]

1. Add Tags to Products
   Best Seller
   New Added
   50% OFF
   
   
   
2. Edit the Theme Code
   1. Go to your Online Store
   2. Click on "Themes"
   3. Select "Edit code"
   4. Open your snippets/card-product.liquid file
   5. Add code below of this code https://prnt.sc/WrkwZ3ugzq7s 
   
   

<div class="product-card">
  {% assign badge_tags = 'Badge-BestSeller,Badge-NewAdded,Badge-50Off,Badge-Clearance' | split: ',' %}
  {% for tag in product.tags %}
    {% if badge_tags contains tag %}
      <div class="badge badge-{{ tag | downcase }}">
        {% case tag %}
          {% when 'Badge-BestSeller' %}
            Best Seller
          {% when 'Badge-NewAdded' %}
            New Added
          {% when 'Badge-50Off' %}
            50% OFF
          {% when 'Badge-Clearance' %}
            Clearance
        {% endcase %}
      </div>
    {% endif %}
  {% endfor %}
</div>

• Add CSS Styles for Each Badge
  Open your CSS file and add the code below 

.badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 12px;
    color: #000;
    font-size: 12px;
    font-weight: 700;
    border-radius: 3px;
    z-index: 10;
}

.badge-bestseller {
    background-color: #ff9800;
}

.badge-newadded {
    background-color: #4caf50;
}

.badge-50off {
    background-color: #f44336;
}

.badge-clearance {
    background-color: #9c27b0;
}

.badge-bestseller::before {
    content: '\2605'; /* Star icon */
    margin-right: 5px;
}

.badge-50off::before {
    content: '\0025'; /* Percentage symbol */
    margin-right: 3px;
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Best regards
Kaushik

[jafakav · Accepted solution]

Working Kaushik, thank you. I need to add white text color. How can I do that? Can you help me?

[Kaushik_7 · Accepted solution]

replace this CSS @jafakav 

.badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 12px;
    color: #fff; /* change this */
    font-size: 12px;
    font-weight: 700;
    border-radius: 3px;
    z-index: 10;
}

[jafakav]

Working Thank you for your assistance. I greatly appreciate your help.

[jafakav]

Thank you

[Kaushik_7 · Accepted solution]

Welcome, @jafakav  If you found my help useful, consider liking this message and marking it as the solution.

[HELDERWRLD]

Hello @Kaushik_7 
I would like to know if you can also help me put some on mine too?

website: www.diversusoficial.com
password: diversusoficial

I want to add 2 badges: 
- "EXCLUSIVE LOOKAL BEACH CLUB" for when i drop a specific collection exclusive for one place
- "NEW IN" for when i drop new products

I want it to look like this example:



Thanks in advance.

[HELDERWRLD]

Hello @Kaushik_7 ,
Would be possible to help me?