Als een shopper een van je producten personaliseert, vult die een klein formulier in naast de live preview. Deze gids legt uit welke veldtypen dat formulier kan tonen, zodat je weet wat je klanten zien en hoe elk veld zich gedraagt. Hij is geschreven voor merchants die de customizer vanuit de kant van de koper willen begrijpen.
Jij bepaalt welke velden verschijnen wanneer je het product bouwt in de Design Studio. De customizer toont daarna de juiste bediening voor elk veld. Dit doet elk veld.
Ze vallen in drie groepen: de algemene invoer (tekst, keuzes, getallen en datums), de kiezers (kleur en lettertype) en de velden die bij een specifiek element van het ontwerp horen.
Tekst en meerregelig tekstveld
Een tekstveld is één regel. De shopper typt een naam, een datum of een korte zin, en die komt direct terecht in de bijbehorende tekst op het ontwerp.
Een meerregelig tekstveld is de versie met meerdere regels. Het groeit mee als de klant meer regels toevoegt, dus het past bij langere berichten zoals een briefje of een kort gedicht.
Stel je een maximale lengte in voor een tekstveld, dan toont de customizer onder het invoerveld een live tekenteller. Die wordt bijgewerkt terwijl de shopper typt, bijvoorbeeld 12/30, zodat hij altijd weet hoeveel ruimte er nog is. De teller verschijnt alleen als er een limiet is.
Tekstvelden en meerregelige tekstvelden kunnen ook lettertype- en kleurkeuzes bevatten. Sta je die toe, dan verschijnen kleine lettertypetegels en kleurstalen direct onder het invoerveld. De shopper kiest er een en de tekst op het ontwerp wordt aangepast. Die kant van deze velden komt aan bod in kleuren en lettertypen kiezen.
Bij een tekstveld van één regel kan een ingestelde formaatregel een inline melding tonen als “Het formaat van … is ongeldig”. Meerregelige tekstvelden hebben niet dezelfde live formaatcontrole. Lees eventuele resterende validatiemeldingen bij het indienen van het ontwerp.
Keuzes: keuzelijst, radio, selectievakje
Met deze drie veldtypen kiest de shopper uit opties die jij bepaalt, in plaats van vrij te typen.
Een keuzelijst toont een lijst met opties. Geef je hem tien opties of minder, dan blijft het een gewone lijst. Zijn het er meer dan tien, dan maakt de customizer er een doorzoekbare lijst van die je kunt filteren door te typen. De shopper begint te typen en de lijst wordt beperkt tot de passende opties, zodat een lange lijst overzichtelijk blijft.
Radiokeuzes tonen elke optie als een afgeronde knop (pil). De shopper tikt er een aan om hem te selecteren. Je kunt bij elke keuze een kleine afbeelding of een kleurstaal voegen, zodat de pil een voorbeeld naast het label toont. Dit werkt goed voor zaken als een lijststijl of een garenkleur.
Een selectievakje is een ja-of-nee-schakelaar. Het zet een laag in het ontwerp aan of uit, zodat de shopper een onderdeel van het artwork kan toevoegen of weghalen, zoals een afbeelding op de achterkant van een shirt of een extra regel tekst.
Is een optielijst leeg, dan verbergt de customizer dat veld voor de shopper. Het veld blijft onzichtbaar tot je in de Design Studio minstens één keuze toevoegt.
Getal en datum
Een getalveld heeft een min- en een plusknop rond een bewerkbare waarde. De minknop stopt bij het ingestelde minimum en de plusknop bij het maximum. Beide gebruiken de ingestelde stapgrootte. Shoppers kunnen ook een waarde typen, dus controleer de validatiemeldingen van het veld voordat je verdergaat.
Een datumveld gebruikt de eigen datumkiezer van het apparaat. Op een telefoon is dat het ingebouwde datumwiel, op een desktop de datumbediening van de browser. Een veld voor een kalendermaand werkt op dezelfde manier, maar gebruikt de maandkiezer van het apparaat, zodat de shopper een maand kiest in plaats van een volledige datum.
Wat de shopper ook kiest, het komt terecht in de bijbehorende tekst op het ontwerp, net als bij een tekstveld.
Kleur- en lettertypekiezers
Een kleurveld is een rij stalen onder de kop Kies een kleur. De stalen zijn de kleuren die je hebt toegestaan toen je het product bouwde, dus een shopper kan niets kiezen wat je printproces niet kan maken. Het gekozen staal krijgt een accentrand.
Een lettertypeveld opent een lijst Kies een lettertype. Die begint op Lettertype kiezen… en heeft, als de lijst lang is, een zoekvak Zoek lettertypes… dat de lijst beperkt terwijl de shopper typt. Alleen de lettertypen die je hebt toegestaan, verschijnen.
Beide werken vanuit het perspectief van de shopper hetzelfde als een keuzelijst: kies er een, en het ontwerp wordt achter het formulier bijgewerkt.
Velden die bij een element horen
Sommige velden zijn helemaal geen algemene invoer. Ze horen bij een specifiek element op het ontwerp, en de customizer toont de bediening die dat element nodig heeft:
- Een fotoveld is een uploadgebied. Zie een foto uploaden.
- Een afbeeldingsveld is een kiezer voor je eigen artwork. Zie klanten een afbeelding laten kiezen.
- Een veld voor een kaart, route of reis geeft een zoekfunctie voor locaties, een bestandsupload of een lijst met stops.
- Een veld voor een sterrenkaart, maan of kalender vraagt om een datum, en soms om een tijd en een plaats.
- Een avatarveld opent de personagebouwer.
Deze volgen de regels die je bij dat element instelt in plaats van een algemeen veldtype. Elk ervan wordt behandeld in slimme elementen.
Twee velden komen uit het product in plaats van uit het ontwerp: een variantkiezer voor de versie die wordt gekocht, en een kiezer voor add-ons voor extra’s. Zie add-ons.
Verplichte velden en validatie
Je kunt elk veld verplicht maken. Een verplicht veld toont een sterretje naast het label, zodat de shopper weet dat het moet worden ingevuld.
Is een verplicht veld leeg wanneer de shopper op In winkelwagen drukt, dan blokkeert de customizer de actie en noemt hij het veld dat moet worden ingevuld. Het veld invullen lost die fout over een ontbrekend veld op. Andere validatie- of beschikbaarheidscontroles kunnen nog aandacht nodig hebben.
Waar die melding verschijnt, hangt af van de indeling die je hebt gekozen. Een customizer op één pagina heeft niets om te weigeren tot In winkelwagen en meldt “Vul … in” met de naam van het veld. Een stap-voor-stap-customizer weigert eerder, bij de stapgrens, en meldt “Vul in:” met de naam van het veld. Product kan niet in de winkelwagen toont die variant.
Lengtelimieten van tekstvelden en meerregelige tekstvelden tonen een live teller. Een tekstveld van één regel kan ook een inline formaatfout tonen terwijl de shopper typt. Controleer eventuele resterende meldingen bij het indienen van het ontwerp.
Waarom toont mijn keuzelijst geen zoekvak?
Het zoekvak verschijnt alleen als de keuzelijst meer dan tien opties heeft. Bij tien of minder blijft het een gewone lijst.
Waar kies ik welke velden verplicht zijn?
Je stelt verplichte velden in de Design Studio in wanneer je het product bouwt, niet in de customizer.
Kan een shopper voorbij de tekenlimiet typen?
Nee. De maximale lengte die je instelt, stopt verder typen, en de teller toont hoe dicht de shopper erbij zit.
Om deze velden in te stellen en te bepalen welke velden shoppers kunnen bewerken, zie je velden door klanten bewerkbaar maken.
Volgende stap: hoe een shopper een product personaliseert.