I need help with coding in the product card collection

Topic summary

A user is attempting to add a custom metafield display to their product grid/collection page. They’ve successfully implemented a styled field on individual product pages (shown with yellow background, rounded corners) that displays “Riecht wie” (“Smells like”) information from a custom metafield.

Current Challenge:

  • The metafield isn’t displaying correctly for each product in the grid
  • Code appears corrupted or reversed in places

Proposed Solutions:

  • One participant shared a code snippet using a loop structure ({% for product in collection.products %})
  • Another suggested using a Rich Text metafield to hold the HTML value

Status: The issue remains unresolved. The user shared a screenshot showing the current incorrect implementation but hasn’t confirmed whether the suggested approaches work.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.

I want to add this field in the product grid.
See picture below.
Here is the code of the field in the product page in yellow:

.gerundetes-element p { background-color: #FFD700; padding: 2px; border-radius: 10px; display: inline; font-size: 20px;

}

Gerundete Ecken

??"...Riecht wie {% if product.metafields.custom.riecht_wie_ %} {{ product.metafields.custom.riecht_wie_ | metafield_text}}“ {% else %} eine bekannte Luxusmarke" {% endif %}

check this code

{% for product in collection.products %}
  
    

      

??"...Riecht wie {% if product.metafields.custom.riecht_wie_ %}
        **{{ product.metafields.custom.riecht_wie_ | metafield_text}}“**
      {% else %}
        **eine bekannte Luxusmarke"**
      {% endif %}

    

    
  

{% endfor %}

Can you not use a Rich Text metafield to hold the HTML value?

Look how it looks now
I need the correct metafield for each product