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?

[Kaushik_7]

Hey, @HELDERWRLD Please use the same above code, change the name else all are the same.

[Marris]

Hi! Im wondering if you can help me.
Im using the Craft theme and after i updated the version of it my badges stopped working.

Im using on the card product liquid:
<div class="card__badge {{ settings.badge_position }}">
{%- if card_product.tags contains '3 för 2' -%}
<div class="custom_label">4 för 3</div>
{%- endif -%}

And on the main product
{% if product.tags contains '3 för 2' %}
<div class="custom_label">4 för 3</div>
{% endif %}

It looks like it used to on the pages you see all the products but if you press one, on the product page its in the corner of the website, not in the corner of the image.

Before it was inside the picture:

My css is like this:
.custom_label {
position: absolute;
top: 10px;
left: 0px;
z-index: 10;
background-color: #b49df1;
padding: 8px 20px 8px 20px;
font-size: 1.3rem;
color: white;
}

I dont know why it stopped working after the update, any ideas? 
Thank you!