Aanpassen op mobiel en met touch

Op telefoons zet de customizer de preview boven de bediening, gebruikt hij comfortabele aanraakdoelen, opent hij de camera voor foto's en ondersteunt hij bijsnijden met aanraking.

Op deze pagina

Deze gids legt uit hoe de customizer zich gedraagt op een telefoon of tablet en wat merchants op een klein scherm moeten controleren.

Indeling op een telefoon

Op een smal scherm staat de preview boven de personalisatieopties. Scrolt de shopper het formulier in, dan kan de preview inklappen tot een kleinere strook. Scrolt hij terug naar boven, dan klapt hij weer uit. Controleer het ontwerp en de verplichte velden voordat je verdergaat.

Het formulier gebruikt grote aanraakbediening, waaronder aparte min- en plusknoppen voor getallen. Test lange labels, geopende menu’s en het schermtoetsenbord op de apparaten die je klanten gebruiken.

De balk met In winkelwagen blijft vastgepind onderaan het scherm. Scrolt de shopper door een lang formulier, dan scrolt de actiebalk niet mee weg. De shopper kan vanaf elk punt in het formulier zijn ontwerp afmaken en in de winkelwagen leggen.

CustomizerDe customizer op een telefoon met de preview boven de personalisatieopties
Op een telefoon staat de preview bovenaan, de bediening eronder, en blijft de balk met In winkelwagen onderaan vastgepind.

Wil je zien hoe de formuliervelden en de preview in het algemeen werken, lees dan hoe een shopper een product personaliseert en de live preview.

Camera en bijsnijden met aanraking

Foto-uploads zijn gemaakt voor telefoons. Tikt een shopper op een telefoon op het uploadgebied, dan kan het apparaat de camera openen, zodat hij ter plekke een foto kan maken. Dit staat standaard aan. Je kunt de camera per veld uitzetten als je liever alleen bestanden uit de fotobibliotheek accepteert.

Nadat een foto binnenkomt, opent een afbeeldingsveld in bijsnijdmodus een bijsnijdlaag. Die laag reageert op aanraking. De shopper sleept met een vinger de hoekgrepen om de foto te kadreren en past het bijsnijden daarna toe. Er is een knop Foto vervangen als hij opnieuw wil beginnen met een andere afbeelding.

CustomizerDe bijsnijdlaag over het hele telefoonscherm: de geüploade foto met hulplijnen volgens de derderegel, vierkante grepen op elke hoek en daaronder de knoppen Annuleren en Uitsnede toepassen
De bijsnijdlaag ondersteunt aanraking, dus een shopper kadreert de foto door met een vinger aan de hoekgrepen te slepen.

Om de preview beter te lezen, kan de shopper met zijn browser knijpen en zoomen. De preview meet de beschikbare ruimte en schaalt het ontwerp zodat het op het scherm past. Draait de telefoon tussen staand en liggend, dan past de preview zich aan de nieuwe vorm aan.

De getalvelden verdienen een toelichting. De ingebouwde draaiknoppen van telefoons zijn klein en makkelijk te missen. In plaats daarvan tonen getalvelden een minknop en een plusknop aan weerszijden van de waarde. Elke knop is een groot aanraakdoel, zodat een shopper een aantal wijzigt met een duidelijke tik in plaats van een klein pijltje te zoeken.

Voor meer over de uploadflow, inclusief bestandstypen en controles op hoge resolutie, zie je een foto uploaden.

Werkt de customizer ook op tablets?

Ja. De responsieve indeling past zich aan de schermbreedte aan, dus tablets krijgen bediening op aanraakformaat en hetzelfde previewgedrag als telefoons.

Kan een shopper een foto maken met de camera in plaats van een bestand te uploaden?

Ja, op een telefoon of tablet. Tikken op het uploadgebied kan de camera van het apparaat openen. Dit staat standaard aan en je kunt het per veld uitzetten.

Waarom tonen getalvelden plus- en minknoppen?

De knoppen geven een groot, betrouwbaar aanraakdoel op touchscreens, wat makkelijker te gebruiken is dan de kleine ingebouwde getalkiezer.

Wat gebeurt er met het ontwerp als de telefoon draait?

De preview meet zijn container opnieuw en past de grootte van het ontwerp aan de nieuwe schermvorm aan, zodat het volledig zichtbaar blijft.

Volgende stap

Lees van begin tot eind wat shoppers zien in hoe een shopper een product personaliseert.

Nog hulp nodig?

Gaf een gids geen antwoord op je vraag? Ons team helpt je graag. De meeste berichten krijgen binnen één werkdag een eerste reactie.

Contact met support

Gerelateerde artikelen