Guide: Hoe codeer je een maattabel in Shopify om het aantal retouren te verminderen?
Volgens de statistieken wordt 30% van alle online bestelde producten teruggestuurd, te veel naar onze mening. Een grootdeel van dit percentage wordt veroorzaakt doordat een klant een verkeerde maat besteld. Dit probleem hebben wij ook ondervonden bij een klant van ons.
Stap 1: Weten waarom mensen iets retourneren
Toen wij concludeerde dat er veel producten terug werden gestuurd hebben wij een retourformulier gekoppeld aan deze webshop. Dit retourformulier hebben wij gemaakt op Jotform. Dit is een handig platform waarin je gemakkelijk formulieren kan aanmaken die voor een klant makkelijk en toegankelijk is.
Benieuwd naar het platform? Check hieronder de link!
Heb je de link bekeken? Dan gaan we weer verder!
Wanneer de klant alles heeft ingevuld krijgt de klant instructies hoe het pakket retour moet en krijgen wij een formulier met waardevolle informatie. Deze informatie analyseren wij vervolgens waaruit wij conclusies trekken. Klinkt nog niet heel spannend toch?
Op basis van bovenstaande gegevens kunnen we dus concluderen dat de pasvorm en de verkeerde maat de voornaamste reden is van een retour.
Nu is de vraag hoe kunnen we deze retouren verminderen? Een maattabel coderen in jouw webshop, klikt ingewikkeld, maar als je de stappen volgt gaat het je lukken!
Stap 2: Producten moeten beschikken over een 'Maat'.
Jouw artikel(en) moeten beschikken over een “size”. of "maat". Hieronder zie je een voorbeeld.
Stap 3: Creëer een pagina voor een size chart.
Maak een nieuwe pagina aan waarin je een afbeelding kan uploaden van een zelfgemaakte maattabel of creëer een maattabel in het tekstvak. Zoals onderstaand voorbeeld:
Je kunt eenvoudig een tabel opmaken of je afbeelding neerzetten. Maar net wat voor vorm je eraan wil geven. Uiteindelijk is wat je hier neerzet wat er wordt weergeven wanneer bezoekers op "zie maattabel" klikken.
Stap 4: Essentials voordat je gaat coderen in de product pagina.
Om de achterkant ook in orde te maken is het zaak om een stuk code te implementeren aan de 'main-product liquid'. Eigenlijk zeg je hier: Als je product een 'maat' betreft, laat dan de 'maattabel zien'.
Om zeker te zijn dat alles werkt hier een korte checklist:
Controleer of je pagina op zichtbaar staat
Vergeet niet alles even van tevoren op te slaan. (Je zal niet de eerste zijn die deze fout maakt)
Maak een backup van je live website en noem deze backup bijvoorbeeld "Maattabel backup". Zo verpest je niets aan de website die live staat.
Ga naar online store --> Thema --> Acties --> Code bewerken
In de editor tool, ga je naar secties om je product-template.liquid te bewerken. (dit ligt aan je thema). Bij ons is dit main.product.liquid
Voeg vervolgens een Size chart sectie toe met de volgende code onder het stukje code 'variant-picker'
Stap 5: De trigger naar de pop-up
De code die je plakt is de volgende:
{% if product.options contains 'Size' %}
<a href="#size-chart" class="popup-trigger" data-popup-trigger="one" >
Bekijk Maattabel
</a>
{% endif %}
Zie hieronder het voorbeeld:
De oplettende kijker ziet dat wij de naam van het maattabel : 'Gustav-broek-maattabel' hebben genoemd. Dit is letterlijk de verwijzing naar jouw pagina waar jij een mooie afbeelding met een maattabel hebt gemaakt zoals bij stap 3.
Waar eerst size chart stond hebben wij dit veranderd naar Gustav broek maattabel. (een computer kan helaas geen spaties lezen, vandaag dat je met streepjes (-) moet werken.
Wat ook opvalt is dat wij {% if product.options contains “Size” %} hebben verandert in {% if product.options contains “Maat-gustav-broek” %} Dit verwijst dan weer naar de juiste producten.
