Native bouwenTutorial
Product-USP's uit een metafield: één block, elke productpagina
Diek Thunnissen6 dec 2025bijgewerkt 8 sep 20267 min leestijd
Productkenmerken die in een muur beschrijvingstekst verdwijnen, ziet niemand. Eén rich-text-metafield per product en één theme-block dat 'm als vinkjeslijst toont. Geen app, één keer installeren.
"2 jaar garantie" en "100% biologisch" staan bij de meeste shops ergens in alinea drie van de productbeschrijving. Kopers lezen die alinea niet. Ze scannen naar bevestiging en scrollen door als ze die niet meteen zien.
Shopify heeft standaard geen plek voor productkenmerken op de productpagina. Dus typen winkeliers per product een lijstje in de beschrijving. Inconsistent, niet te onderhouden en onzichtbaar op het moment dat het telt.
Dit is wat we daarvoor bouwen: een metafield per product met de kenmerken, en een block in de product template dat die lijst toont met vinkjes. Het block verbergt zichzelf als een product geen kenmerken heeft, dus je kunt het veilig aan elke productpagina hangen. Styling regel je in de theme editor.
Het block in main-product.liquid
Ga naar Online Store > Themes > Actions > Edit code en open main-product.liquid. Zoek de regel {%- case block.type -%}. Daar staan alle product-blocks. Direct eronder plak je dit:
62 regels codeToon code +Verberg code −
{%- when 'product_features' -%}
{% assign metafield_namespace = block.settings.namespace %}
{% assign metafield_key = block.settings.key %}
{% if product.metafields[metafield_namespace][metafield_key] %}
<div id="pf--{{ block.id }}" class="ec_product-features {{ block.settings.custom_class }}">
{% if block.settings.heading != blank %}
<h3 class="ec_feature-heading">{{ block.settings.heading }}</h3>
{% endif %}
<div class="ec_features-list">
{{ product.metafields[metafield_namespace][metafield_key] | metafield_tag }}
</div>
</div>
<style>
#pf--{{ block.id }} {
margin-top: {{ block.settings.margin_top }}px;
margin-bottom: {{ block.settings.margin_bottom }}px;
}
#pf--{{ block.id }} .ec_feature-heading {
font-size: {{ block.settings.heading_font_size }}px;
color: {{ block.settings.heading_color }};
margin-bottom: {{ block.settings.heading_margin_bottom }}px;
}
#pf--{{ block.id }} .ec_features-list {
font-size: {{ block.settings.text_font_size }}px;
color: {{ block.settings.text_color }};
}
#pf--{{ block.id }} .ec_features-list ul {
list-style: none;
padding-left: 0;
margin: 0;
}
#pf--{{ block.id }} .ec_features-list li {
padding-left: 30px;
position: relative;
margin-bottom: 10px;
}
#pf--{{ block.id }} .ec_features-list li:before {
content: "✓";
position: absolute;
left: 0;
color: {{ block.settings.check_color }};
}
@media screen and (max-width: 749px) {
#pf--{{ block.id }} .ec_feature-heading {
font-size: {{ block.settings.heading_font_size_mobile }}px;
}
#pf--{{ block.id }} .ec_features-list {
font-size: {{ block.settings.text_font_size_mobile }}px;
}
}
{{ block.settings.custom_css }}
</style>
{% endif %}De code checkt of het metafield gevuld is, rendert het via metafield_tag als lijst en zet de styling uit de block-instellingen erbij. Op mobiel schakelen de lettergroottes naar de mobiele waarden.
De block-instellingen in het schema
Scroll in hetzelfde bestand naar {% schema %} en plak dit direct na "blocks": [ :
143 regels codeToon code +Verberg code −
{
"type": "product_features",
"name": "⚡️ Product Kenmerken",
"settings": [
{
"type": "header",
"content": "⚡️ Product Kenmerken Block",
"info": "Toon dynamische productkenmerken via metafields."
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Productkenmerken"
},
{
"type": "header",
"content": "Metafield-configuratie"
},
{
"type": "text",
"id": "namespace",
"label": "Metafield namespace",
"default": "product_info",
"info": "De namespace van het metafield, bijv. 'product_info'"
},
{
"type": "text",
"id": "key",
"label": "Metafield key",
"default": "product_features",
"info": "De key van het metafield, bijv. 'product_features'"
},
{
"type": "header",
"content": "Stijling"
},
{
"type": "color",
"id": "heading_color",
"label": "Heading kleur",
"default": "#333333"
},
{
"type": "range",
"id": "heading_font_size",
"min": 14,
"max": 36,
"step": 1,
"unit": "px",
"label": "Heading font grootte",
"default": 18
},
{
"type": "range",
"id": "heading_font_size_mobile",
"min": 12,
"max": 28,
"step": 1,
"unit": "px",
"label": "Heading font grootte (mobiel)",
"default": 16
},
{
"type": "range",
"id": "heading_margin_bottom",
"min": 0,
"max": 40,
"step": 2,
"unit": "px",
"label": "Heading ondermarge",
"default": 12
},
{
"type": "color",
"id": "text_color",
"label": "Tekst kleur",
"default": "#333333"
},
{
"type": "color",
"id": "check_color",
"label": "Vinkje kleur",
"default": "#4CAF50"
},
{
"type": "range",
"id": "text_font_size",
"min": 12,
"max": 24,
"step": 1,
"unit": "px",
"label": "Tekst font grootte",
"default": 16
},
{
"type": "range",
"id": "text_font_size_mobile",
"min": 10,
"max": 20,
"step": 1,
"unit": "px",
"label": "Tekst font grootte (mobiel)",
"default": 14
},
{
"type": "range",
"id": "margin_top",
"min": 0,
"max": 60,
"step": 5,
"unit": "px",
"label": "Bovenmarge",
"default": 15
},
{
"type": "range",
"id": "margin_bottom",
"min": 0,
"max": 60,
"step": 5,
"unit": "px",
"label": "Ondermarge",
"default": 15
},
{
"type": "header",
"content": "Geavanceerd"
},
{
"type": "text",
"id": "custom_class",
"label": "Custom CSS klasse",
"info": "Voeg een custom klasse toe voor aanvullende CSS-styling."
},
{
"type": "textarea",
"id": "custom_css",
"label": "Custom CSS",
"info": "Voeg hier je eigen CSS-regels toe."
}
]
}Het metafield aanmaken
Ga naar Settings > Custom data > Products > Add definition. Naam: Product Kenmerken. Namespace en key: product_info.product_features. Content type: Rich text. Opslaan.
Open daarna een product. Onderaan staat nu het veld Product Kenmerken. Maak er een opsomming in:
- 100% biologisch katoen - Machine wasbaar op 30°C - Gemaakt in Nederland - 2 jaar garantie - Gratis verzending boven €50
Het block aanzetten
Online Store > Themes > Customize, open een productpagina, klik in Product information op Add block en kies Product Kenmerken. Sleep het onder de prijs of boven de koopknop. Kop, kleuren, lettergroottes en marges stel je rechts in.
Meerdere lijsten per product
Wil je specificaties, materialen en verzendinfo apart tonen? Maak meerdere metafields aan, bijvoorbeeld product_info.technical_specs, product_info.materials en product_info.shipping_info. Voeg het block meerdere keren toe en zet per block de namespace en key. Elk block leest zijn eigen veld.
Custom CSS
Het block heeft een Custom CSS-veld. Twee kolommen op desktop:
.ec_features-list ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}Een ander icoon dan het vinkje:
.ec_features-list li:before {
content: "→";
font-weight: bold;
}Alternerende achtergrond per regel:
.ec_features-list li:nth-child(even) {
background-color: #f5f5f5;
padding: 5px 5px 5px 30px;
border-radius: 4px;
}Grote catalogi
Bij honderden producten vul je dit niet met de hand. Gebruik de bulk editor in de admin of een CSV-import met de metafield als kolom. Metafields staan gewoon in de product-export.
Als het niet werkt
Block niet zichtbaar: het metafield is leeg voor dat product, of namespace en key in het block komen niet exact overeen met de definitie. Opmaak vreemd: er zit CSS in je thema die op ul of li grijpt; kijk in de inspector welke regel wint. Ander thema: de bestandsnaam kan afwijken, het patroon (case block.type plus schema) is in elk OS 2.0-thema hetzelfde.
Wat je in de lijst zet
Specifiek, niet algemeen: "100% biologisch katoen, 300 gram per vierkante meter" in plaats van "goede kwaliteit". Voordeel boven feature: "blijft droog in de regen dankzij DWR-coating". Getallen waar het kan: "5 jaar fabrieksgarantie". En de eerste drie regels tellen, de rest leest bijna niemand.
Veelgestelde vragen.
- Werkt dit block ook in andere thema's dan Dawn?
- Ja. Elk Online Store 2.0-thema heeft in de product-sectie een case block.type en een schema met blocks. De bestandsnaam kan anders zijn dan main-product.liquid, het patroon is hetzelfde.
- Kun je hetzelfde metafield ook op de collectiepagina tonen?
- Ja. Het veld hangt aan het product, dus in een product-card kun je product.metafields.product_info.product_features op dezelfde manier renderen. Houd het daar kort, bijvoorbeeld alleen de eerste twee regels.
- Waarom een metafield en geen metaobject?
- Omdat de kenmerken per product verschillen en nergens anders hergebruikt worden. Een metaobject is pas zinnig als dezelfde lijst bij tientallen producten hoort, bijvoorbeeld per merk of productlijn.
Diek ThunnissenFounder & lead developer. Bouwt, verbetert en migreert de Shopify-laag voor DTC- en B2B-merken. LinkedInPlan een gesprek →
