Using metafield to define a badge on Product grid in collection

[clavilla57]

Hey all, with sense 12.0.0 i'm trying to figured out how to add a badge that display the number 48, on product grid in collection

All by using metafield

https://bv8ko0rghwg57o7l-57179668671.shopifypreview.com

[Huptech-Web]

Hello @clavilla57 ,

You can create a product meta field for the badge and add conditions to display the badge on the product grid.

Example:  Create a Product Metafield:  product.metafields.custom.badge

add a condition in the product grid:

{% if product.metafields.custom.badge != blank %}
  {{ product.metafields.custom.badge }}
{% endif %}

[clavilla57]

where i had to put this condition?

[Dan-From-Ryviu]

Step 1: Create a Metafield

1. Go to your Shopify admin.

2. Click on "Settings" and then "Custom data."

3. Click on "Products."

4. Under "Product details," click "Add definition" to create a new Metafield definition.

   • Name: Enter a name like "Badge Number."
   • Namespace: You can use your store name or create a custom namespace.
   • Key: Enter a unique identifier like "badge_number."
   • Type: Choose "Integer" since you want to store a number.
   • Description: Add any relevant information.

5. Save your Metafield definition.

Step 2: Add Metafield Values to Products

1. Go to the product in your Shopify admin.
2. Scroll down to the "Metafields" section.
3. Enter the value "48" for the "Badge Number" Metafield.

Step 3: Modify Your Theme Files

1. Locate the file responsible for displaying the product grid in your theme: card-product.liquid
2. Within the loop that displays each product, retrieve the Metafield value and display the badge if it's set to 48, add this code below where you want to it appear 

    {% assign badgeNumber = product.metafields.global.badge_number %}
    {% if badgeNumber == 48 %}
      <div class="badge">{{ badgeNumber }}</div>
    {% endif %}

[clavilla57]

how do i recognize where to put

{% assign badgeNumber = product.metafields.custom.badge_number %}
{% if badgeNumber == 48 %}
<div class="badge">{{ badgeNumber }}</div>
{% endif %}

[Dan-From-Ryviu]

Where place do you want to add this badge? 

[clavilla57]

Collection page. over the product image to indicate that product have "48 Capsules" pack

[Dan-From-Ryviu]

Please go to your card-product.liquid file, go to line 123, add code above this line of code 

{%- if card_product.available == false -%}

[clavilla57]

I'm not able to make it work

  

[Dan-From-Ryviu · Accepted solution]

My mistake, please update code

{% assign badgeNumber = card_product.metafields.global.badge_number %}
    {% if badgeNumber == 48 %}
      <div class="badge">{{ badgeNumber }}</div>
    {% endif %}

[clavilla57]

Perfectly work

Would you mind, if u can, helping me with this?

https://community.shopify.com/c/shopify-design/move-metafield-on-the-right-of-price/m-p/2338057#M617...