Creating a new badge

[robertsolcan]

Hello! Do you happen to know how can I create a badge that will help me in adding more information to my product's card? It would be very helpful for me! It should look something like this: 

 

[Small_Task_Help]

Hi,

At product card template need to ad Badge HTML

HTML example

<div class="product-card">
  <!-- Product Image -->
  <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
  
  <!-- Badge -->
  {% if product.tags contains 'new' %}
    <div class="badge badge-new">New</div>
  {% endif %}
  
  <!-- Product Title -->
  <h3>{{ product.title }}</h3>
  
  <!-- Product Price -->
  <p>{{ product.price | money }}</p>
</div>

Use CSS for styling and check responsive design 

You can also use metafields to store additional information and display badges based on metafield values

[GTLOfficial · Accepted solution]

Hello @robertsolcan 
Go to online store ----> themes ----> actions ----> edit code---->find file product-card--------> in line number 140 after</span>

add this code 

  {%- elsif  card_product.metafields.custom.badge!= blank -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left">
               {{ card_product.metafields.custom.badge}}
              </span>

and save it

step 2:->

Go to online store ----> settings----> Content---------> metafiels-------------> product-------------> create a meta field name "badge" -------------->
select single-line text

and save it

Now you can assign custom badge in your products metafields and it will start showing

Please let me know if you have any question

Thanks

[Valentyna1]

Hello @robertsolcan !
You can try a free app - Lably (https://apps.shopify.com/lably ). It allows you to create and customize labels and badges for your products.

[Amanda_Fordeer]

Hi @robertsolcan, 

You can experiment with a third-party application such as Product Labels & Badges. This application currently permits you to generate various labels swiftly.

Here are the steps to follow:

1. Install and activate the embedded app.

2. Establish a Label or Bundle Label campaign.

3. Customize your labels to align with your brand.

4. Apply the labels to your products.

5. Save your changes and verify them.