Voorbeeldproduct: https://customix-demo-store.myshopify.com/products/jd002-god-says-i-am-name-letter-in-bible-toile-de-jouy-style-personalized-jewelry-dish
Stap 1: Bereid de ontwerpassets voor
Om Dynamische lay-outweergave op basis van het aantal tekens te gebruiken, moet je twee sets ontwerpassets voorbereiden. Deze assets bepalen welke lay-outs worden getoond op basis van de tekens die klanten invoeren.
a. Afbeeldingen van grote letters (hoofdteken)
Deze assetset bepaalt het grote hoofdteken dat in de lay-out wordt getoond.
Volgorde van de bestanden:
- Bestand 1 → Lege afbeelding (verplichte plaatshouder)
- Bestanden 2–27 → Kleine letters
a–z - Bestanden 28–54 → Hoofdletters
A–Z - Bestanden 55–64 → Cijfers
0–9(optioneel)
b. Mappen met citaatlay-outs
Bereid 54 mappen voor die overeenkomen met 54 tekengevallen, volgens dezelfde logica als in deel 1:
- 27 mappen voor kleine letters
a–z - 27 mappen voor hoofdletters
A–Z
Elke map vertegenwoordigt de citaatlay-out voor één specifiek teken.
Stap 2: Voeg elementen toe aan het sjabloon
Nadat je alle ontwerpassets hebt voorbereid, voeg je deze elementen toe aan een sjabloon en stel je de lay-outs in.
a. Upload de assets naar de assetbibliotheek
- Upload alle voorbereide bestanden en mappen naar Assets → Afbeeldingen
- Controleer of de mapstructuur (achtergronden, alfabetten, citaten) correct is geüpload
b. Maak een voorbeeldsjabloon
Maak een nieuw sjabloon en begin met het toevoegen van elementen. Het eerste is de achtergrond in 3 kleuren: blauw, rood en zwart.
Voeg daarna 3 alfabetlagen toe en pas het formaat en de positie van deze lagen aan naar de gewenste plek in het ontwerp.
Voeg daarna 3 citaatlagen toe, voor dezelfde 3 kleuren, en lijn ze ook uit en plaats ze ten opzichte van de alfabetlagen
c. Maak een lay-out
Selecteer alle 6 lagen en klik op het pictogram Lay-out maken om ze te groeperen in Layout 1.
Klik op Layout 1 en druk op de toetsencombinatie Ctrl + C and Ctrl + V om Layout 2 met dezelfde structuur te dupliceren
Vouw vervolgens Layout 2 uit en selecteer de 6 lagen die bij het eerste teken horen. Gebruik ook hier de combinatie Ctrl + C and Ctrl + V om 6 extra lagen voor het tweede teken te maken, zoals te zien is op de onderstaande referentieafbeelding.
Sla het sjabloon op om de huidige structuur te behouden voordat je naar de volgende configuratiestap gaat
Stap 3: Optieset-toewijzing en logica
In deze stap configureren we de optiesets en de logica om lay-outs, alfabetten en citaten automatisch te wisselen op basis van de tekst die klanten invoeren.
a. Voeg een optie Tekstveld toe
- Ga naar Optiesets → Toevoegen → Tekstveld
- In dit veld voeren klanten hun tekst in (bijvoorbeeld een naam)
b. Schakel stalen per teken in
Schakel in de instellingen van het Tekstveld Stalen tonen per teken in en wijs vervolgens toe:
- Blue Alphabet → Teken 1
- Blue Alphabet 2 → Teken 2
c. Schakel het wisselen van lay-out op tekstlengte in
Schakel de functie Lay-outstalen tonen op tekstlengte in. Hierdoor passen lay-outs zich automatisch aan op basis van het aantal tekens dat de klant invoert.
- Tekstlengte = 1 teken → Toon Layout 1
- Tekstlengte = 2 tekens → Toon Layout 2
d. Stel de Global ID in voor tekensynchronisatie
Nu moet je de Global ID instellen voor alle lagen die worden beïnvloed door het eerste teken dat klanten invoeren:
- Blue Alphabet
- Black Alphabet
- Red Alphabet
- Blue Quotes
- Black Quotes
- Red Quotes
⚠️ Selecteer geen geneste optiewaarden in de optiesets Quote en stel Global ID = 1 in
Wanneer Blue Alphabet overschakelt naar teken A, schakelen alle andere lagen met Global ID = 1 automatisch over naar de bijbehorende waarde A. Herhaal hetzelfde proces voor het tweede teken.
e. Stel weergavevoorwaarden in op basis van achtergrondkleur
Om de kleuren correct te laten overeenkomen, selecteer je alle Black-lagen (Alphabet + Quotes) en voeg je de voorwaarde toe: Alleen tonen wanneer Background = Black
Herhaal dezelfde instelling voor de rode en blauwe tekens. Zo worden alleen de assets in de juiste kleur getoond op basis van de gekozen achtergrond.
f. Verberg onnodige opties
Eindresultaat
Wanneer de klant 1 teken invoert (bijvoorbeeld c), wordt alleen Layout 1 getoond en worden het citaat en het alfabet voor C weergegeven
Wanneer de klant 2 tekens invoert (bijvoorbeeld cd), wordt Layout 2 getoond en worden de citaten en alfabetten voor C en D dienovereenkomstig weergegeven.
Bijgewerkt op: 18/08/2026