Putting a label on products when they are showing on any page

[robertsolcan]

Hello! I need some help with customising our product box, so that in the top left corner it should be a little box in which our customers will see which tehnology we are using for the product. I also created a metafield, named Tehnology, in which i wrote down the technologies they use.

[WalkYourStyle]

Can you please share you store's URL, as well as the theme you are using currently?

[robertsolcan]

I'm using Dawn 14.0.0, and the url is www.bymo.ro

[WalkYourStyle]

Instructions
1. Go to Online Store -> Themes -> Edit Code

2. In the sections folder locate the file 'main-collection-product-grid.liquid'

3. Find this code in the file

{% render 'card-product',
  card_product: product,
  media_aspect_ratio: section.settings.image_ratio,
  image_shape: section.settings.image_shape,
  show_secondary_image: section.settings.show_secondary_image,
  show_vendor: section.settings.show_vendor,
  show_rating: section.settings.show_rating,
  lazy_load: lazy_load,
  skip_styles: skip_card_product_styles,
  quick_add: section.settings.quick_add,
  section_id: section.id
%}

4. Just below it, add this code

{% assign product_technology = product.metafields.custom.technology %}
{% if product_technology != blank %}
  <div class="technology-label-container">
    <a id="product-technology-label" href="{{ product.url }}">{{ product_technology }}</a>
  </div>
{% endif %}

5. After you've added the above code, it should look like this

6. Finish it with some CSS to make it look nice. Go to the assets folder and locate the file 'base.css'.
At the end of the file add the below code

/* Collection Grid Card Product Technology Label CSS */
.technology-label-container{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  line-height: initial;
}
#product-technology-label{
  width: 100%;
  background: black;
  color: white;
  padding: 4px 10px 4px 10px;
  text-decoration: none;
  font-weight: 400;
  font-size: 11px;
}
/*  Collection Grid Card Product Technology Label CSS Ends here */

If you have any other questions please feel free to ask.

[BSS-TekLabs]

Can you try app BSS: Product Labels & Badges

https://apps.shopify.com/product-labels-by-bss?search_id=c2b0ee9e-2986-4c74-901b-af32074a4011&surfac...

[robertsolcan]

I want to use some code directly, without any additional app.

[GTLOfficial · Accepted solution]

Hello 
@robertsolcan 
here is a code 

step 1 Go to Online Store------>     Edit code----------------> go to file "card-product.liquid"  line number  516 to 532
find this code

<div class="card__badge {{ settings.badge_position }}">
          {%- if card_product.available == false -%}
            <span
              id="Badge-{{ section_id }}-{{ card_product.id }}"
              class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
            >
              {{- 'products.product.sold_out' | t -}}
            </span>
          {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
            <span
              id="Badge-{{ section_id }}-{{ card_product.id }}"
              class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
            >
              {{- 'products.product.on_sale' | t -}}
            </span>
          {%- endif -%}
        </div>

and replace with this one

<div class="card__badge {{ settings.badge_position }}">
            {%- if card_product.available == false -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
              >
                {{- 'products.product.sold_out' | t -}}
              </span>
            {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
              >
                {{- 'products.product.on_sale' | t -}}
              </span>
               {%- elsif  card_product.metafields.custom.custom_badge != blank -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
              >
               {{ card_product.metafields.custom.custom_badge }}
              </span>
            {%- endif -%}
          </div> 

go to Settings --------------> Custom Data-----------------> Product----------------->Add Definition-------> Add name "Custom Badge"-----------> Select type------> "Single Line Text" and then save


now go to products start adding your label whatever you want.

Thanks