I need help with coding in the product card collection

DreamDrops
Tourist
10 0 1

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:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.gerundetes-element p {
background-color: #FFD700;
padding: 2px;
border-radius: 10px;
display: inline;
font-size: 20px;

}
</style>
<title>Gerundete Ecken</title>
</head>
<body>
<div class="gerundetes-element">
<p>🧑🏽"...Riecht wie {% if product.metafields.custom.riecht_wie_ %}
<b>{{ product.metafields.custom.riecht_wie_ | metafield_text}}“</b>
{% else %}
<b>eine bekannte Luxusmarke"</b>
{% endif %}</p>
</div>
</body>
</html>

 

DreamDrops_0-1709820969676.png

 

Replies 3 (3)

topnewyork
Trailblazer
253 26 35

check this code

{% for product in collection.products %}
  <div class="product-grid-item">
    <div class="gerundetes-element">
      <p>🧑🏽"...Riecht wie {% if product.metafields.custom.riecht_wie_ %}
        <b>{{ product.metafields.custom.riecht_wie_ | metafield_text}}“</b>
      {% else %}
        <b>eine bekannte Luxusmarke"</b>
      {% endif %}</p>
    </div>
    <!-- Include other product grid elements here -->
  </div>
{% endfor %}
Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
BenSmith1
Excursionist
13 1 2

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

DreamDrops
Tourist
10 0 1

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

DreamDrops_0-1709904991094.png