Shopify themes, liquid, logos, and UX
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>
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 %}
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
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025