Prodotto di esempio: https://customix-demo-store.myshopify.com/products/jd002-god-says-i-am-name-letter-in-bible-toile-de-jouy-style-personalized-jewelry-dish
Passaggio 1: prepara le risorse di design
Per attivare la visualizzazione dinamica del layout in base al numero di caratteri, devi preparare due set di risorse di design. Queste risorse determinano come vengono mostrati i diversi layout in base ai caratteri inseriti dai clienti.
a. Immagini dell'alfabeto in grande (carattere principale)
Questo set di risorse controlla il carattere principale, in grande, mostrato nel layout.
Ordine dei file:
- File 1 → immagine vuota (segnaposto obbligatorio)
- File 2–27 → lettere minuscole
a–z - File 28–54 → lettere maiuscole
A–Z - File 55–64 → numeri
0–9(facoltativi)
b. Cartelle dei layout con citazioni
Prepara 54 cartelle corrispondenti ai 54 casi di caratteri, seguendo la stessa logica della Parte 1:
- 27 cartelle per le lettere minuscole
a–z - 27 cartelle per le lettere maiuscole
A–Z
Ogni cartella rappresenta il layout della citazione per un carattere specifico.
Passaggio 2: aggiungi gli elementi al modello
Dopo aver preparato tutte le risorse di design, il passaggio successivo è aggiungere questi elementi a un modello e impostare i layout.
a. Carica le risorse nella libreria delle risorse
- Carica tutti i file e le cartelle preparati in Risorse → Immagini
- Assicurati che la struttura delle cartelle (sfondi, alfabeti, citazioni) sia caricata correttamente
b. Crea un modello di esempio
Crea un nuovo modello e inizia ad aggiungere gli elementi: il primo è lo sfondo, in 3 colori: blu, rosso e nero.
Poi aggiungi 3 livelli dell'alfabeto, ridimensionali e posizionali nel punto desiderato del design.
Dopodiché aggiungi 3 livelli delle citazioni, corrispondenti agli stessi 3 colori, e allineali e posizionali rispetto ai livelli dell'alfabeto
c. Crea il layout
Seleziona tutti e 6 i livelli e fai clic sull'icona Crea layout per raggrupparli in Layout 1.
Fai clic su Layout 1 e premi la combinazione di tasti Ctrl + C and Ctrl + V per duplicarlo in Layout 2 con la stessa struttura
Poi espandi Layout 2 e seleziona i 6 livelli corrispondenti al primo carattere, quindi usa di nuovo la combinazione Ctrl + C and Ctrl + V per creare altri 6 livelli per il secondo carattere, come mostrato nell'immagine di riferimento qui sotto.
Salva il modello per conservare la struttura attuale prima di passare al passaggio di configurazione successivo
Passaggio 3: mappatura e logica dei set di opzioni
In questo passaggio configureremo i set di opzioni e la logica per cambiare automaticamente layout, alfabeti e citazioni in base al testo inserito dai clienti.
a. Aggiungi un'opzione Campo di testo
- Vai a Set di opzioni → Aggiungi → Campo di testo
- Questo campo servirà ai clienti per inserire il proprio testo (ad es. il nome)
b. Attiva i campioni basati sui caratteri
Nelle impostazioni del campo di testo, attiva Mostra i campioni in base ai caratteri, quindi assegna:
- Blue Alphabet → Carattere 1
- Blue Alphabet 2 → Carattere 2
c. Attiva il cambio di layout in base alla lunghezza del testo
Attiva la funzione Mostra i campioni di layout in base alla lunghezza del testo: in questo modo i layout si adattano automaticamente al numero di caratteri inseriti dal cliente.
- Lunghezza del testo = 1 carattere → mostra Layout 1
- Lunghezza del testo = 2 caratteri → mostra Layout 2
d. Imposta l'ID globale per la sincronizzazione dei caratteri
Ora devi impostare l'ID globale per tutti i livelli che saranno influenzati dal primo carattere inserito dai clienti:
- Blue Alphabet
- Black Alphabet
- Red Alphabet
- Blue Quotes
- Black Quotes
- Red Quotes
⚠️ Non selezionare i valori di opzione annidati all'interno dei set di opzioni delle citazioni e imposta ID globale = 1
Quando Blue Alphabet passa al carattere A, tutti gli altri livelli con ID globale = 1 passeranno automaticamente al valore A corrispondente. Ripeti la stessa procedura per il secondo carattere.
e. Imposta le condizioni di visualizzazione in base al colore di sfondo
Per garantire la corretta corrispondenza dei colori, seleziona tutti i livelli Black (alfabeto + citazioni) e aggiungi la condizione: Mostra solo quando Background = Black
Ripeti la stessa impostazione per i caratteri rossi e blu. In questo modo vengono mostrate solo le risorse del colore corretto, in base allo sfondo selezionato.
f. Nascondi le opzioni non necessarie
Risultato finale
Quando il cliente inserisce 1 carattere (ad es. c), viene mostrato solo Layout 1 e vengono visualizzati la citazione e l'alfabeto per C
Quando il cliente inserisce 2 caratteri (ad es. cd), viene mostrato Layout 2 e vengono visualizzate di conseguenza le citazioni e gli alfabeti per C e D.
Aggiornato il: 18/08/2026