Eksempelprodukt: https://customix-demo-store.myshopify.com/products/jd002-god-says-i-am-name-letter-in-bible-toile-de-jouy-style-personalized-jewelry-dish
Trin 1: Forbered designassets
For at aktivere dynamisk layoutvisning baseret på antal tegn skal du forberede to sæt designassets. Disse assets bestemmer, hvordan de forskellige layouts vises ud fra de tegn, kunderne indtaster.
a. Billeder med store bogstaver (hovedtegn)
Dette assetsæt styrer det store hovedtegn, der vises i layoutet.
Rækkefølge på filerne:
- Fil 1 → Tomt billede (påkrævet pladsholder)
- Fil 2–27 → Små bogstaver
a–z - Fil 28–54 → Store bogstaver
A–Z - Fil 55–64 → Tal
0–9(valgfrit)
b. Mapper med citatlayouts
Forbered 54 mapper svarende til de 54 tegntilfælde efter samme logik som i del 1:
- 27 mapper til små bogstaver
a–z - 27 mapper til store bogstaver
A–Z
Hver mappe repræsenterer citatlayoutet for ét bestemt tegn.
Trin 2: Tilføj elementer til skabelonen
Når du har forberedt alle designassets, er næste trin at tilføje dem som elementer i en skabelon og sætte layoutene op.
a. Upload assets til assetbiblioteket
- Upload alle de forberedte filer og mapper til Assets → Billeder
- Sørg for, at mappestrukturen (baggrunde, alfabeter, citater) uploades korrekt
b. Opret en eksempelskabelon
Opret en ny skabelon, og begynd at tilføje elementer. Det første er baggrunden i 3 farver: blå, rød og sort.
Tilføj derefter 3 Alphabet-lag, og tilpas størrelsen og placeringen af dem i designet.
Tilføj derefter 3 Quote-lag svarende til de samme 3 farver, og justér og placér dem i forhold til alphabet-lagene
c. Opret layout
Markér alle 6 lag, og klik på ikonet Opret layout for at gruppere dem i Layout 1.
Klik på Layout 1, og tryk på tastekombinationen Ctrl + C and Ctrl + V for at duplikere det som Layout 2 med samme struktur
Udvid derefter Layout 2, og markér de 6 lag, der svarer til det første tegn. Brug igen tastekombinationen Ctrl + C and Ctrl + V til at oprette 6 ekstra lag til det andet tegn, som vist på referencebilledet nedenfor.
Gem skabelonen for at beholde den nuværende struktur, før du går videre til næste konfigurationstrin
Trin 3: Tilknytning af valgmulighedssæt og logik
I dette trin konfigurerer vi valgmulighedssættene og logikken, så layouts, alfabeter og citater automatisk skifter ud fra den tekst, kunderne indtaster.
a. Tilføj en tekstfeltvalgmulighed
- Gå til Valgmulighedssæt → Tilføj → Tekstfelt
- Dette felt bruges til, at kunderne kan indtaste deres tekst (f.eks. et navn)
b. Aktivér farveprøver baseret på tegn
I tekstfeltets indstillinger skal du aktivere Vis farveprøver efter tegn og derefter tildele:
- Blue Alphabet → Tegn 1
- Blue Alphabet 2 → Tegn 2
c. Aktivér layoutskift efter tekstlængde
Aktivér funktionen Vis layoutfarveprøver efter tekstlængde. Så justeres layoutene automatisk efter, hvor mange tegn kunden indtaster.
- Tekstlængde = 1 tegn → Vis Layout 1
- Tekstlængde = 2 tegn → Vis Layout 2
d. Angiv globalt id til synkronisering af tegn
Nu skal du angive det globale id for alle de lag, der påvirkes af det første tegn, kunderne indtaster:
- Blue Alphabet
- Black Alphabet
- Red Alphabet
- Blue Quotes
- Black Quotes
- Red Quotes
⚠️ Vælg ikke indlejrede valgmulighedsværdier i Quote-valgmulighedssættene, og angiv globalt id = 1
Når Blue Alphabet skifter til tegnet A, skifter alle andre lag med globalt id = 1 automatisk til den tilsvarende A-værdi. Gentag samme fremgangsmåde for det andet tegn.
e. Angiv visningsbetingelser efter baggrundsfarve
For at sikre, at farverne passer sammen, skal du markere alle Black-lag (Alphabet + Quotes) og tilføje betingelsen: Vis kun, når Background = Black
Gentag den samme opsætning for røde og blå tegn. Det sikrer, at kun assets i den rigtige farve vises ud fra den valgte baggrund.
f. Skjul unødvendige valgmuligheder
Endeligt resultat
Når kunden indtaster 1 tegn (f.eks. c), vises kun Layout 1, og citatet og alfabetet for C vises
Når kunden indtaster 2 tegn (f.eks. cd), vises Layout 2, og citaterne og alfabeterne for C og D vises tilsvarende.
Opdateret den: 18/08/2026