Beispielprodukt: https://customix-demo-store.myshopify.com/products/jd002-god-says-i-am-name-letter-in-bible-toile-de-jouy-style-personalized-jewelry-dish
Schritt 1: Design-Assets vorbereiten
Um die dynamische Layout-Anzeige nach Zeichenanzahl zu aktivieren, müssen Sie zwei Sets von Design-Assets vorbereiten. Diese Assets bestimmen, wie die verschiedenen Layouts abhängig von den vom Kunden eingegebenen Zeichen angezeigt werden.
a. Bilder des großen Alphabets (Hauptzeichen)
Dieses Asset-Set steuert das große Hauptzeichen, das im Layout angezeigt wird.
Reihenfolge der Dateien:
- Datei 1 → leeres Bild (erforderlicher Platzhalter)
- Dateien 2–27 → Kleinbuchstaben
a–z - Dateien 28–54 → Großbuchstaben
A–Z - Dateien 55–64 → Ziffern
0–9(optional)
b. Ordner für Zitat-Layouts
Bereiten Sie 54 Ordner für die 54 Zeichenfälle vor, nach derselben Logik wie in Teil 1:
- 27 Ordner für Kleinbuchstaben
a–z - 27 Ordner für Großbuchstaben
A–Z
Jeder Ordner steht für das Zitat-Layout eines bestimmten Zeichens.
Schritt 2: Elemente zur Vorlage hinzufügen
Nachdem Sie alle Design-Assets vorbereitet haben, fügen Sie diese Elemente in einer Vorlage hinzu und richten die Layouts ein.
a. Assets in die Assets-Bibliothek hochladen
- Laden Sie alle vorbereiteten Dateien und Ordner unter Assets → Bilder hoch
- Achten Sie darauf, dass die Ordnerstruktur (Hintergründe, Alphabete, Zitate) korrekt hochgeladen wird
b. Beispielvorlage erstellen
Erstellen Sie eine neue Vorlage und beginnen Sie, Elemente hinzuzufügen. Das erste ist der Hintergrund in 3 Farben: Blau, Rot, Schwarz.
Fügen Sie anschließend 3 Alphabet-Ebenen hinzu, ändern Sie ihre Größe und positionieren Sie sie an der gewünschten Stelle im Design.
Fügen Sie danach 3 Zitat-Ebenen in denselben 3 Farben hinzu und richten Sie sie ebenfalls relativ zu den Alphabet-Ebenen aus und positionieren Sie sie.
c. Layout erstellen
Wählen Sie alle 6 Ebenen aus und klicken Sie auf das Symbol Layout erstellen, um sie zu Layout 1 zusammenzufassen.
Klicken Sie auf Layout 1 und drücken Sie die Tastenkombination Ctrl + C and Ctrl + V, um Layout 2 mit derselben Struktur zu duplizieren.
Klappen Sie danach Layout 2 auf und wählen Sie die 6 Ebenen für das erste Zeichen aus. Erstellen Sie mit der Tastenkombination Ctrl + C and Ctrl + V 6 weitere Ebenen für das zweite Zeichen, wie im Referenzbild unten gezeigt.
Speichern Sie die Vorlage, um die aktuelle Struktur zu sichern, bevor Sie mit dem nächsten Konfigurationsschritt fortfahren.
Schritt 3: Zuordnung und Logik der Optionssätze
In diesem Schritt konfigurieren wir die Optionssätze und die Logik, damit Layouts, Alphabete und Zitate abhängig vom eingegebenen Text des Kunden automatisch wechseln.
a. Textfeld-Option hinzufügen
- Gehen Sie zu Optionssätze → Hinzufügen → Textfeld
- In diesem Feld geben Kunden ihren Text ein (z. B. einen Namen).
b. Zeichenbasierte Farbfelder aktivieren
Aktivieren Sie in den Textfeld-Einstellungen Farbfelder nach Zeichen anzeigen und weisen Sie dann zu:
- Blue Alphabet → Zeichen 1
- Blue Alphabet 2 → Zeichen 2
c. Layout-Wechsel nach Textlänge aktivieren
Aktivieren Sie die Funktion Layout-Farbfelder nach Textlänge anzeigen. Damit passen sich die Layouts automatisch an die Anzahl der vom Kunden eingegebenen Zeichen an.
- Textlänge = 1 Zeichen → Layout 1 anzeigen
- Textlänge = 2 Zeichen → Layout 2 anzeigen
d. Global ID für die Zeichensynchronisierung festlegen
Legen Sie nun die Global ID für alle Ebenen fest, die vom ersten vom Kunden eingegebenen Zeichen betroffen sind:
- Blue Alphabet
- Black Alphabet
- Red Alphabet
- Blue Quotes
- Black Quotes
- Red Quotes
⚠️ Wählen Sie keine verschachtelten Optionswerte in den Zitat-Optionssätzen aus und setzen Sie Global ID = 1
Wenn Blue Alphabet auf das Zeichen A wechselt, wechseln alle anderen Ebenen mit Global ID = 1 automatisch auf den entsprechenden Wert A. Wiederholen Sie denselben Vorgang für das zweite Zeichen.
e. Anzeigebedingungen nach Hintergrundfarbe festlegen
Damit die Farben korrekt zugeordnet werden, wählen Sie alle Black-Ebenen (Alphabet + Zitate) aus und fügen Sie die Bedingung hinzu: Nur anzeigen, wenn Background = Black
Wiederholen Sie dieselbe Einrichtung für rote und blaue Zeichen. So wird abhängig vom gewählten Hintergrund nur das passende Farb-Asset angezeigt.
f. Nicht benötigte Optionen ausblenden
Endergebnis
Gibt der Kunde 1 Zeichen ein (z. B. c), wird nur Layout 1 angezeigt, mit dem Zitat und dem Alphabet-Zeichen für C
Gibt der Kunde 2 Zeichen ein (z. B. cd), wird Layout 2 angezeigt, mit den Zitaten und Alphabet-Zeichen für C und D.
Aktualisiert am: 18.08.2026