Product USP's Tonen in Shopify: De Slimme Metafield Oplossing

‍

Door Diek Thunnissen

Het probleem met productkenmerken in Shopify

Je kent het wel. Je hebt een geweldig product met unieke eigenschappen, maar hoe toon je die op een consistente, professionele manier? Te vaak zie ik webwinkels die hun USP's (Unique Selling Points) verstoppen in lange productbeschrijvingen of helemaal niet vermelden.

Het resultaat? Bezoekers missen cruciale informatie die hen over de streep kan trekken. Ze scrollen voorbij belangrijke details zoals "2 jaar garantie" of "100% biologisch" omdat het verdwijnt in een muur van tekst.

Shopify's standaard productpagina's bieden geen native oplossing voor het prominent tonen van productkenmerken. Dus wat doen veel winkeliers? Ze typen handmatig lijstjes in elke productbeschrijving. Niet alleen tijdrovend, maar ook inconsistent en moeilijk te onderhouden.

Waarom USP's zo belangrijk zijn voor conversie

Laten we even stilstaan bij de psychologie achter koopbeslissingen. Onderzoek toont aan dat kopers gemiddeld slechts 20% van je productbeschrijving lezen. Maar ze scannen wel naar specifieke informatie die hun beslissing beïnvloedt.

Productkenmerken werken als mentale "checkboxes" in het hoofd van je klant:

• ✓ Gratis verzending? Check.
• ✓ Duurzaam materiaal? Check.
• ✓ Garantie? Check.
• ✓ Snelle levering? Check.

Hoe meer checkboxes je kunt afvinken, hoe groter de kans op een aankoop. Het draait allemaal om het wegnemen van twijfels en het bevestigen van de waarde.

De oplossing: Dynamische productkenmerken met metafields

Wat als je productkenmerken automatisch kunt tonen, consistent over je hele catalogus, zonder telkens code aan te passen? Dat is precies wat ik heb gebouwd met deze Product Kenmerken block.

Het systeem werkt met Shopify's krachtige metafields functionaliteit. Simpel gezegd: je vult per product de kenmerken in, en het block toont ze automatisch in een mooie, scanbare lijst met checkmarks.

Het mooiste? Je hoeft dit maar één keer te installeren, en daarna kun je het voor al je producten gebruiken. Geen gedoe met custom code per product, geen inconsistente opmaak, gewoon een professionele presentatie van je USP's.

Hoe het werkt: De technische kant

De oplossing bestaat uit twee delen:

1. Een custom block dat je toevoegt aan je product template
2. Een metafield waar je de kenmerken per product invult

Het block is slim genoeg om zichzelf te verbergen als een product geen kenmerken heeft. Dus je kunt het veilig aan je template toevoegen zonder dat lege producten er raar uitzien.

De implementatie gebruikt moderne Shopify standaarden:

• Native metafield support (geen externe apps nodig)
• Responsive design (ziet er goed uit op alle apparaten)
• Theme editor compatible (volledig aanpasbaar zonder code)
• Performance geoptimaliseerd (laadt alleen CSS wanneer nodig)

Stap-voor-stap implementatie

Laten we de implementatie doorlopen. Geen zorgen als je geen programmeur bent - ik leid je door elke stap.

Stap 1: Het block installeren

We beginnen met het toevoegen van de code aan je theme. Dit klinkt misschien technisch, maar het is vooral knippen en plakken.

Log in op je Shopify admin en ga naar Online Store > Themes. Bij je actieve thema klik je op Actions > Edit code.

Nu zoek je het bestand main-product.liquid. Dit is het hoofdbestand voor je productpagina's. Open het en zoek naar de regel met {%- case block.type -%}. Dit is waar alle product blocks worden gedefinieerd.

Direct onder deze regel plak je de block code:

liquid

{%- 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 %}

Deze code doet een paar slimme dingen. Het checkt eerst of er productkenmerken zijn ingesteld. Als die er zijn, toont het ze in een mooie lijst met checkmarks. De styling past zich automatisch aan op basis van je instellingen in de theme editor.

Nu moeten we nog de configuratie-opties toevoegen. Scroll naar beneden in hetzelfde bestand tot je {% schema %} vindt. Direct na "blocks": [ voeg je de block settings toe:

json

{
 "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."
   }
 ]
}

Stap 2: Het metafield aanmaken

Nu de code is geïnstalleerd, moeten we Shopify vertellen waar de productkenmerken vandaan komen. Dit doen we met metafields.

Ga in je Shopify admin naar Settings > Custom data en klik op Products. Klik op Add definition en vul het volgende in:

• Name: Product Kenmerken
• Namespace and key: product_info.product_features
• Content type: Rich text
• Formatting: Rich text

Klik op Save en je metafield is aangemaakt!

Stap 3: Kenmerken toevoegen aan producten

Nu het leuke deel. Ga naar een product in je admin en scroll naar beneden. Je ziet nu een nieuw veld "Product Kenmerken". Hier kun je een bullet lijst maken met alle USP's:

- 100% biologisch katoen
- Machine wasbaar op 30°C
- Gemaakt in Nederland
- 2 jaar garantie
- Gratis verzending boven €50

De rich text editor maakt het super eenvoudig om deze lijsten te maken en te formatteren.

Stap 4: Het block activeren

Laatste stap! Ga naar Online Store > Themes > Customize en navigeer naar een productpagina. In de Product information sectie klik je op Add block en selecteer je ⚡️ Product Kenmerken.

Sleep het block naar de gewenste positie (ik raad aan direct onder de prijs of boven de add to cart button) en pas de instellingen aan:

• Wijzig de heading naar iets dat bij je merk past
• Pas de kleuren aan naar je huisstijl
• Stel de lettergroottes in voor optimale leesbaarheid
• Tweak de marges voor perfecte spacing

Geavanceerde mogelijkheden

De basis implementatie is al krachtig, maar er zijn nog meer mogelijkheden:

Meerdere kenmerkenlijsten

Wil je verschillende soorten informatie gescheiden tonen? Maak meerdere metafields aan:

• product_info.technical_specs voor technische specificaties
• product_info.materials voor materiaalinformatie
• product_info.shipping_info voor verzenddetails

Voeg het block meerdere keren toe en wijzig per block de namespace/key instellingen. Zo kun je gestructureerde informatieblokken maken die precies aansluiten bij je producten.

Custom styling voor verschillende productcategorieën

Met de Custom CSS optie kun je het uiterlijk volledig aanpassen. Bijvoorbeeld:

Voor een twee-kolommen layout op desktop:

css

.ec_features-list ul {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 10px;
}

Voor andere iconen in plaats van checkmarks:

css

.ec_features-list li:before {
 content: "→";
 font-weight: bold;
}

Voor een premium look met alternerende achtergronden:

css

.ec_features-list li:nth-child(even) {
 background-color: #f5f5f5;
 padding: 5px 5px 5px 30px;
 border-radius: 4px;
}

Bulk editing voor grote catalogi

Voor winkels met honderden producten is handmatig invullen geen optie. Gebruik Shopify's bulk editor of CSV export/import functionaliteit om metafields in bulk te bewerken. Er zijn ook apps zoals Metafields Guru die dit proces vergemakkelijken.

De business impact

Laten we even concreet kijken naar wat dit voor je winkel kan betekenen. Een van mijn klanten implementeerde deze oplossing voor hun outdoor kleding webshop. Ze hadden meer dan 500 producten met technische specificaties die verstopt zaten in productbeschrijvingen.

Na implementatie:

• 23% hogere conversie op productpagina's
• 45% minder vragen over productspecificaties via klantenservice
• Gemiddeld 18% langere tijd op productpagina's

Waarom werkt het zo goed? Mensen scannen productpagina's in een F-patroon. Ze kijken eerst naar afbeeldingen, dan naar de prijs, en dan zoeken ze bevestiging dat dit product aan hun eisen voldoet. Door USP's prominent en scanbaar te presenteren, maak je die beslissing makkelijker.

Best practices voor effectieve productkenmerken

Na jarenlange ervaring met e-commerce conversie optimalisatie, hier mijn tips voor het schrijven van effectieve productkenmerken:

1. Wees specifiekNiet: "Goede kwaliteit"Wel: "Gemaakt van 100% biologisch katoen, 300 gram/m²"

2. Focus op voordelen, niet alleen featuresNiet: "Waterafstotende coating"Wel: "Blijft droog in de regen dankzij DWR coating"

3. Gebruik getallen waar mogelijkNiet: "Lange garantie"Wel: "5 jaar fabrieksgarantie"

4. Spreek de taal van je doelgroepB2B: "ISO 9001 gecertificeerd"B2C: "Getest volgens de hoogste kwaliteitsnormen"

5. Prioriteer de belangrijkste puntenZet de meest overtuigende kenmerken bovenaan. De eerste 3-4 punten krijgen de meeste aandacht.

Integratie met je marketing strategie

Deze productkenmerken zijn niet alleen nuttig op productpagina's. Gebruik ze ook in:

• Email marketing (toon de top 3 kenmerken in product emails)
• Social media (maak graphics met productkenmerken)
• Google Shopping (voeg kenmerken toe aan je product feed)
• Retargeting ads (highlight specifieke USP's)

De consistentie versterkt je boodschap en bouwt vertrouwen op over alle touchpoints.

Troubleshooting en tips

Enkele veelvoorkomende vragen en oplossingen:

"Het block verschijnt niet"

• Check of het metafield gevuld is voor dat product
• Verifieer dat namespace en key exact overeenkomen
• Zorg dat je het block hebt toegevoegd via de customizer

"De opmaak ziet er vreemd uit"

• Clear je browser cache
• Controleer of er geen conflicterende CSS in je thema is
• Gebruik de browser inspector om specifieke styling issues te debuggen

"Kan ik dit gebruiken in andere thema's?"Ja! De code werkt met alle moderne Shopify thema's. Bij sommige premium thema's kunnen de bestandsnamen anders zijn, maar het principe blijft hetzelfde.

De toekomst van product presentatie

Shopify investeert zwaar in metafields en structured data. Deze oplossing sluit perfect aan bij die richting. Je bent niet alleen je conversie aan het optimaliseren, maar ook toekomstbestendig aan het bouwen.

Metafields kunnen straks nog meer:

• Automatische filtering op kenmerken
• Rich snippets in Google zoekresultaten
• AI-powered product aanbevelingen gebaseerd op kenmerken
• Dynamische collecties gebaseerd op metafield waarden

Door nu al te investeren in gestructureerde productdata, ben je klaar voor deze ontwikkelingen.

Conclusie: Kleine aanpassing, grote impact

Het toevoegen van een professionele productkenmerken sectie lijkt misschien een klein detail, maar de impact op je conversie kan enorm zijn. Het gaat om het wegnemen van frictie in het koopproces en het geven van de informatie die klanten nodig hebben om een beslissing te nemen.

Met deze oplossing heb je:

• Een consistente manier om USP's te presenteren
• Volledige controle over het uiterlijk
• Een schaalbare oplossing die meegroeit met je catalogus
• Geen maandelijkse app-kosten
• Toekomstbestendige technologie

Begin vandaag nog met het implementeren. Start met je bestsellers en roll het daarna uit over je hele catalogus. Je klanten (en je conversieratio) zullen je dankbaar zijn.

Over de auteur

Diek Thunnissen
Shopify Developer & E-commerce Specialist

Ik help online ondernemers hun Shopify winkels te optimaliseren met slimme, technische oplossingen. Van conversie-verhogende features tot complete custom functionaliteit - altijd met focus op ROI en gebruikerservaring.

Wil je meer weten over het optimaliseren van je productpagina's? Neem contact op voor een vrijblijvend gesprek over de mogelijkheden voor jouw winkel.

🌐 diekthunnissen.nl
📧 info@diekthunnissen.nl

‍