Produit d'exemple : https://customix-demo-store.myshopify.com/products/jd002-god-says-i-am-name-letter-in-bible-toile-de-jouy-style-personalized-jewelry-dish
Étape 1 : préparer les ressources de design
Pour activer l'affichage dynamique de la disposition selon le nombre de caractères, vous devez préparer deux jeux de ressources de design. Ces ressources déterminent comment les différentes dispositions s'affichent en fonction des caractères saisis par les clients.
a. Images de grandes lettres (caractère principal)
Ce jeu de ressources contrôle le grand caractère principal affiché dans la disposition.
Ordre des fichiers :
- Fichier 1 → image vide (espace réservé obligatoire)
- Fichiers 2 à 27 → lettres minuscules
a–z - Fichiers 28 à 54 → lettres majuscules
A–Z - Fichiers 55 à 64 → chiffres
0–9(facultatif)
b. Dossiers de dispositions de citations
Préparez 54 dossiers correspondant aux 54 cas de caractères, selon la même logique que dans la partie 1 :
- 27 dossiers pour les lettres minuscules
a–z - 27 dossiers pour les lettres majuscules
A–Z
Chaque dossier représente la disposition de la citation pour un caractère précis.
Étape 2 : ajouter les éléments au modèle
Une fois toutes les ressources de design préparées, l'étape suivante consiste à ajouter ces éléments dans un modèle et à configurer les dispositions.
a. Importer les ressources dans la bibliothèque de ressources
- Importez tous les fichiers et dossiers préparés dans Ressources → Images
- Vérifiez que la structure des dossiers (arrière-plans, alphabets, citations) est importée correctement
b. Créer un modèle d'exemple
Créez un nouveau modèle et commencez à ajouter des éléments. Le premier est l'arrière-plan, en 3 couleurs : bleu, rouge et noir.
Ajoutez ensuite 3 calques d'alphabet, puis redimensionnez-les et placez-les à l'endroit souhaité dans le design.
Ajoutez ensuite 3 calques de citation, correspondant aux mêmes 3 couleurs, et alignez-les et positionnez-les par rapport aux calques d'alphabet
c. Créer la disposition
Sélectionnez les 6 calques et cliquez sur l'icône Créer une disposition pour les regrouper dans Layout 1.
Cliquez sur Layout 1, puis appuyez sur la combinaison de touches Ctrl + C and Ctrl + V pour dupliquer la disposition et créer Layout 2 avec la même structure
Ensuite, développez Layout 2 et sélectionnez les 6 calques correspondant au premier caractère, puis utilisez de nouveau la combinaison Ctrl + C and Ctrl + V pour créer 6 calques supplémentaires pour le deuxième caractère, comme indiqué dans l'image de référence ci-dessous.
Enregistrez le modèle pour conserver la structure actuelle avant de passer à l'étape de configuration suivante
Étape 3 : correspondance des ensembles d'options et logique
Au cours de cette étape, nous allons configurer les ensembles d'options et la logique permettant de changer automatiquement de disposition, d'alphabets et de citations selon le texte saisi par les clients.
a. Ajouter une option Champ de texte
- Accédez à Ensembles d'options → Ajouter → Champ de texte
- Ce champ servira aux clients pour saisir leur texte (par exemple un prénom)
b. Activer les nuanciers par caractère
Dans les paramètres du champ de texte, activez Afficher les nuanciers par caractère, puis associez :
- Blue Alphabet → caractère 1
- Blue Alphabet 2 → caractère 2
c. Activer le changement de disposition selon la longueur du texte
Activez la fonctionnalité Afficher les nuanciers de mise en page selon la longueur du texte : elle permet aux dispositions de s'adapter automatiquement au nombre de caractères saisis par le client.
- Longueur du texte = 1 caractère → afficher Layout 1
- Longueur du texte = 2 caractères → afficher Layout 2
d. Définir le Global ID pour la synchronisation des caractères
Vous devez maintenant définir le Global ID de tous les calques qui seront affectés par le premier caractère saisi par les clients :
- Blue Alphabet
- Black Alphabet
- Red Alphabet
- Blue Quotes
- Black Quotes
- Red Quotes
⚠️ Ne sélectionnez pas de valeurs d'option imbriquées dans les ensembles d'options Quote, et définissez Global ID = 1
Lorsque Blue Alphabet passe au caractère A, tous les autres calques avec Global ID = 1 passent automatiquement à la valeur A correspondante. Répétez la même procédure pour le deuxième caractère.
e. Définir des conditions d'affichage selon la couleur d'arrière-plan
Pour garantir la bonne correspondance des couleurs, sélectionnez tous les calques Black (Alphabet + Quotes) et ajoutez la condition : Afficher uniquement lorsque Background = Black
Répétez la même configuration pour les caractères rouges et bleus. Ainsi, seules les ressources de la bonne couleur s'affichent selon l'arrière-plan sélectionné.
f. Masquer les options inutiles
Résultat final
Lorsque le client saisit 1 caractère (par exemple c), seule la Layout 1 s'affiche, avec la citation et l'alphabet correspondant à C
Lorsque le client saisit 2 caractères (par exemple cd), la Layout 2 s'affiche, puis les citations et alphabets correspondant à C et D apparaissent en conséquence.
Mis à jour le : 18/08/2026