Twee manieren om personalisatie op te vangen
Shopify beheert de storefront en de checkout, dus het invoerveld voeg je toe via Shopify-native mechanismen. Kies één pad.
- Line-item-property — een aangepast veld op de productpagina. Werkt op elk Shopify-abonnement. Vereist een kleine themabewerking.
- Checkout-UI-extensie — een aangepast blok dat binnen de checkout wordt gerenderd. Alleen Shopify Plus. Geen themabewerking, maar een developer deployt een eigen app.
Beide methoden leveren hetzelfde resultaat: een property die aan de line item hangt. Zolang die Customization Request heet, haalt Alva de waarde automatisch eruit.
Method 1 — Line item property
1. Open de producttemplate
Ga in de Shopify-admin naar Webwinkel → Thema's, klik op Code bewerken en open sections/main-product.liquid (of product-template.liquid bij oudere thema's).
Shopify-thema-code-editor. Toon links de bestandsstructuur met main-product.liquid gemarkeerd en rechts het Liquid-bestand open, gescrold naar het productformulierblok. Geen echte shopgegevens zichtbaar.
2. Voeg het invoerveld toe binnen het productformulier
Voeg binnen het blok {% form 'product' %} een label en een tekstinvoer toe. Het attribuut name moet de bracket-syntax gebruiken: properties[Customization Request] — dat vertelt Shopify dat de waarde aan de line item moet worden gekoppeld.
<label for="customization">Personalisation request</label>
<input type="text"
id="customization"
name="properties[Customization Request]"
maxlength="200"
required>3. Stel verplicht en lengte-begrenzing in
Voeg required toe zodat klanten het veld niet leeg kunnen laten en maxlength="200" zodat ze geen heel verhaal plakken. Houd het label concreet — Naam om te borduren werkt beter dan Personalisatie.
4. Opslaan en een testbestelling plaatsen
Sla de template op, bekijk het product op de storefront, vul het veld in en plaats een testbestelling. De waarde verschijnt in Shopify onder Bestelling → Line items en in Alva op de detailpagina van de gepersonaliseerde bestelling.
Een productpagina op de storefront met het personalisatieveld boven de knop In winkelwagen. Veld met label "Naam om te borduren" en een voorbeeld als placeholder. Geen echte huisstijl vereist.
Methode 2 — Checkout-UI-extensie
Plus-merchants kunnen het veld binnen de checkout zelf renderen. Alva Digital Downloads levert deze extensie niet — die bouwen is een taak voor een Shopify-developer. Zie Shopify's checkout-UI-extensions-referentie voor de actuele API.
1. Scaffold een extensie
Voer vanuit een eigen Shopify-app shopify app generate extension uit en kies Checkout UI extension. Kies het target purchase.checkout.block.render.
2. Schrijf de line-item-property
Gebruik de line-item-property-API uit @shopify/ui-extensions-react/checkout om de waarde aan de line item te koppelen onder de key Customization Request.
3. Deploy en plaats het blok
Voer shopify app deploy uit, sleep daarna in Instellingen → Checkout → Aanpassen het nieuwe blok in de lay-out en plaats een testbestelling.
Waar de waarde in Alva verschijnt
Wanneer Shopify de webhook orders/paid stuurt, leest Alva elke line-item-property die exact Customization Request heet en slaat die op bij de aankoop. De detailpagina van de gepersonaliseerde bestelling toont de waarde boven de bestandsuploader, en dezelfde tekst staat in de notificatiemail aan de merchant.
FAQ
Kan ik het personalisatieveld verplicht maken?
Ja. Voeg het HTML-attribuut required toe. Shopify blokkeert In winkelwagen tot het veld een waarde heeft. De checkout-UI-extensiemethode biedt een required-optie in de extensie-instellingen.
Kan ik meer dan één veld per product opvangen?
Ja, maar Alva haalt alleen de property met de naam Customization Request automatisch eruit. Andere line-item-properties verschijnen nog steeds op de Shopify-bestelling en zijn in Alva zichtbaar op de besteldetailpagina.
Kan de klant het veld bewerken nadat de bestelling is betaald?
Nee. Line-item-properties zijn onveranderlijk zodra de bestelling is geplaatst. Heb je een correctie nodig, vraag de klant die te mailen en werk de besteltekst handmatig bij voordat je het bestand uploadt.
Zie ook
Was dit nuttig?
Laatst bijgewerkt 2026-05-06