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.
Wij veranderen de titel size chart omdat wij bij verschillende producten verschillende maattabellen hanteren. Hierdoor kunnen wij dit per productgroep diversifiëren. We hebben nu een pagina gemaakt met een maattabel met een bijhorend productgroep.
Wanneer je stap 5 hebt voltooid geef je een opdracht om de maattabel te laten zien “pop-up” bij een bepaalde productgroep. Hopelijk heb ik hier nog je focus! Zo niet? Dan kan je ons beter bellen. Wij implementeren deze prachtige maattabel voor maar €120,- euro per uur
Stap 6: De opdracht voor de pop-up.
1. Ga terug naar je code en zoek je theme.liquid file op.
2. Scrol helemaal naar onder.
3. Plak de onderstaande code voor </body> om de “pop-up” de opdracht te geven.
De code die je plakt is de volgende:
<div class="body-blackout"></div>
<div class="popup-modal shadow" data-popup-modal="one">
<div class="popup-modal__close">X</div>
{{ pages.size-chart.content }}
</div>
<script src="{{ 'popup.js' | asset_url }}" defer="defer"></script>
Hier zie je dat wij het stukje code {{ pages.size.chart.content }} verandert hebben in {{ pages.gustav.broek-maattabel.content }} Weet je die pagina nog met die mooie maattabel? Precies, daar verwijst deze naar toe. En nogmaals de streepjes zijn de spaties.
Stap 7: De pop-up
Nu we de pagina met de maattabel hebben, de verwijzing naar de juiste productgroep en de opdracht voor de “pop-up” is het van belang dat we ook een “pop-up” hebben. Deze gaan we nu met de onderstaande code maken.
1. Ga terug naar je code en voeg onder elementen een nieuw element toe.
2. Voeg een popup.js toe.
Hieronder zie je een voorbeeld:
Voeg vervolgens de onderstaande code toe.
De code die je plakt is de volgende:
const modalTriggers = document.querySelectorAll('.popup-trigger')
const modalCloseTrigger = document.querySelector('.popup-modal__close')
const bodyBlackout = document.querySelector('.body-blackout')
modalTriggers.forEach(trigger => {
trigger.addEventListener('click', () => {
const { popupTrigger } = trigger.dataset
const popupModal = document.querySelector(`[data-popup-modal="${popupTrigger}"]`)
popupModal.classList.add('is--visible')
bodyBlackout.classList.add('is-blacked-out')
popupModal.querySelector('.popup-modal__close').addEventListener('click', () => {
popupModal.classList.remove('is--visible')
bodyBlackout.classList.remove('is-blacked-out')
})
bodyBlackout.addEventListener('click', () => {
popupModal.classList.remove('is--visible')
bodyBlackout.classList.remove('is-blacked-out')
})
})
})
Zie hieronder het voorbeeld:
Stap 8: Layout voor de pop-up.
Nu we de “pop-up” hebben gemaakt is het van belang dat we een opdracht geven om deze “pop-up” te laten zien wanneer een klant op maattabel klikt. Dit kan je die met volgende stappen:
1. Ga voor de laatste keer naar je code
2. Zoek opnieuw in de folder elementen naar de theme.css file (dit kan per thema verschillen bij ons is dit de styles.css.liquid.
3. Scrol helemaal naar onder
4.Plak de onderstaande code
De code die je plakt is de volgende:
/*================ Popup ================*/
body {
position: relative;
}
.body-blackout {
position: absolute;
z-index: 1010;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .65);
display: none;
}
.body-blackout.is-blacked-out {
display: block;
}
.popup-trigger {
display: inline-block;
}
.popup-modal {
background-color: #fff;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 45px;
opacity: 0;
pointer-events: none;
transition: all 300ms ease-in-out;
z-index: 1011;
}
.popup-modal.is--visible {
opacity: 1;
pointer-events: auto;
}
.popup-modal__close {
position: absolute;
font-size: 25px;
right: 6px;
top: 3px;
cursor: pointer;
}
Zie hieronder het voorbeeld:
Het uitendelijke resultaat:
