Exempelprodukt: https://customix-demo-store.myshopify.com/products/jd002-god-says-i-am-name-letter-in-bible-toile-de-jouy-style-personalized-jewelry-dish
Steg 1: Förbered designassets
För att aktivera dynamisk layoutvisning baserad på antal tecken behöver du förbereda två uppsättningar designassets. Assetsen avgör hur olika layouter visas utifrån de tecken som kunderna skriver in.
a. Bilder med stora bokstäver (huvudtecken)
Den här uppsättningen styr det stora huvudtecknet som visas i layouten.
Filernas ordning:
- Fil 1 → Tom bild (obligatorisk platshållare)
- Fil 2–27 → Gemener
a–z - Fil 28–54 → Versaler
A–Z - Fil 55–64 → Siffror
0–9(valfritt)
b. Mappar för citatlayouter
Förbered 54 mappar som motsvarar de 54 teckenfallen, enligt samma logik som i del 1:
- 27 mappar för gemener
a–z - 27 mappar för versaler
A–Z
Varje mapp representerar citatlayouten för ett specifikt tecken.
Steg 2: Lägg till element i mallen
När alla designassets är förberedda är nästa steg att lägga till dem som element i en mall och ställa in layouterna.
a. Ladda upp assets till Assets-biblioteket
- Ladda upp alla förberedda filer och mappar till Assets → Bilder
- Kontrollera att mappstrukturen (bakgrunder, alfabet, citat) laddas upp korrekt
b. Skapa en exempelmall
Skapa en ny mall och börja lägga till element. Det första är bakgrunden med 3 färger: blå, röd och svart.
Lägg sedan till 3 alfabetslager och ändra storlek på dem och placera dem där du vill ha dem i designen.
Lägg därefter till 3 citatlager som motsvarar samma 3 färger, och justera och placera dem i förhållande till alfabetslagren.
c. Skapa layout
Markera alla 6 lager och klicka på ikonen Skapa layout för att gruppera dem till Layout 1.
Klicka på Layout 1 och tryck på tangentkombinationen Ctrl + C and Ctrl + V för att duplicera den till Layout 2 med samma struktur.
Expandera sedan Layout 2 och markera de 6 lager som motsvarar det första tecknet. Använd även här kombinationen Ctrl + C and Ctrl + V för att skapa 6 ytterligare lager för det andra tecknet, enligt referensbilden nedan.
Spara mallen för att behålla den nuvarande strukturen innan du går vidare till nästa konfigurationssteg.
Steg 3: Mappning och logik för alternativset
I det här steget konfigurerar vi alternativseten och logiken som automatiskt växlar layouter, alfabet och citat utifrån den text som kunderna skriver in.
a. Lägg till ett textfältsalternativ
- Gå till Alternativset → Lägg till → Textfält
- Det här fältet används av kunderna för att skriva in sin text (till exempel ett namn).
b. Aktivera teckenbaserade färgprov
Aktivera Visa färgprov per tecken i textfältets inställningar och tilldela sedan:
- Blue Alphabet → Tecken 1
- Blue Alphabet 2 → Tecken 2
c. Aktivera layoutväxling efter textlängd
Aktivera funktionen Visa layoutfärgprov efter textlängd. Den gör att layouterna automatiskt anpassas efter hur många tecken kunden skriver in.
- Textlängd = 1 tecken → Visa Layout 1
- Textlängd = 2 tecken → Visa Layout 2
d. Ange globalt ID för teckensynkronisering
Nu måste du ange globalt ID för alla lager som påverkas av det första tecknet som kunderna skriver in:
- Blue Alphabet
- Black Alphabet
- Red Alphabet
- Blue Quotes
- Black Quotes
- Red Quotes
⚠️ Markera inte nästlade alternativvärden i citatens alternativset, och ange globalt ID = 1
När Blue Alphabet växlar till tecknet A växlar alla andra lager med globalt ID = 1 automatiskt till motsvarande värde A. Upprepa samma process för det andra tecknet.
e. Ange visningsvillkor efter bakgrundsfärg
För att färgerna ska matcha rätt markerar du alla svarta lager (alfabet + citat) och lägger till villkoret: Visa bara när Background = Black
Upprepa samma inställning för röda och blå tecken. Då visas bara assets i rätt färg utifrån vald bakgrund.
f. Dölj onödiga alternativ
Slutresultat
När kunden skriver in 1 tecken (till exempel c) visas bara Layout 1, med citatet och alfabetet för C.
När kunden skriver in 2 tecken (till exempel cd) visas Layout 2, med citaten och alfabeten för C och D.
Uppdaterad: 18/08/2026