Shop-Einrichtung
Den Jetzt-designen-Button auf deine Produktseiten bringen und die Bearbeitung im Warenkorb aktivieren — über Shopify-Theme-App-Blöcke, ohne Code-Änderungen.
Customezo wird als Theme-App-Blöcke in deinem Shop installiert. Es wird nichts in deinen Theme-Code eingefügt, beim Deinstallieren bleibt nichts zurück, und du kannst jeden Baustein im Shopify-Theme-Editor ein- und ausschalten.
Es gibt zwei Bausteine:
| Baustein | Wohin er gehört | Was er macht |
|---|---|---|
| Button „Jetzt designen“ | In die Produktvorlage, als Block | Öffnet den Designer für dieses Produkt. |
| Customezo Warenkorb-UX | App-Einbettung (gesamte Website) | Ergänzt Warenkorbartikel um die Links Design bearbeiten und Designvorschau ansehen. |
Den Button „Jetzt designen“ hinzufügen
- Gehe im Shopify-Adminbereich zu Onlineshop → Themes und klicke bei deinem veröffentlichten Theme auf Anpassen.
- Stelle die Auswahl oben auf die Vorlage Produkte → Standardprodukt (oder die Vorlage, die deine individualisierbaren Produkte nutzen).
- Klicke links im Bereich der Produktinformationen auf Block hinzufügen und wähle Jetzt designen aus der Gruppe der Customezo-Apps.
- Zieh ihn an die richtige Stelle — direkt über oder unter dem Button In den Warenkorb funktioniert am besten.
- Klicke auf Speichern.
Der Button erscheint nur bei Produkten, für die der Designer in Customezo aktiviert ist — du kannst ihn also bedenkenlos in eine Vorlage einbauen, die alle Produkte nutzen.
Button-Einstellungen
| Einstellung | Was sie bewirkt |
|---|---|
| Button-Text | Die Beschriftung, die Käufer sehen. Leer lassen, um den Standardtext zu verwenden, der automatisch übersetzt wird. |
| Button-Stil | Gefüllt oder Umrandet. |
| Button-Farbe / Textfarbe | Überschreibt die Farben passend zu deinem Theme. |
| Schriftgröße | 12–24 px. |
| Eckenradius | 0–30 px. |
| Symbol anzeigen | Zeigt ein kleines Design-Symbol vor der Beschriftung. |
| Volle Breite | Streckt den Button auf die Breite des Produktformulars. |
| Ausrichtung | Links, Mitte oder Rechts, wenn der Button nicht die volle Breite hat. |
| Design-Tool öffnen in | Öffnet den Designer im gleichen oder in einem neuen Tab. |
Passend zu deinem Theme
Setze die Button-Farbe auf die Farbe des primären Buttons deines Themes und den Radius auf denselben Wert wie beim Button In den Warenkorb. Der Designer selbst wird separat gestaltet — siehe Designer-Branding.
Customezo Warenkorb-UX aktivieren
- Öffne im Theme-Editor links den Tab App-Einbettungen.
- Schalte Customezo Warenkorb-UX ein.
- Klicke auf Speichern.
Diese Einbettung erkennt individualisierte Artikel in deinem Warenkorb und ergänzt die Links, die deine Kundschaft braucht.
Einstellungen der Warenkorb-UX
| Einstellung | Was sie bewirkt |
|---|---|
| „Design bearbeiten“ bei individualisierten Warenkorb-Artikeln anzeigen | Zeigt bei individualisierten Warenkorbartikeln einen Link Design bearbeiten, mit dem sich der Designer erneut öffnen lässt. |
| Button-Beschriftung | Eigener Text für diesen Link. |
| Beschriftung des Gesperrt-Badges | Text, der erscheint, wenn das Design nicht mehr bearbeitet werden kann, zum Beispiel nach Produktionsstart. |
| „Designvorschau ansehen“ bei individualisierten Warenkorb-Artikeln anzeigen | Zeigt einen Link, der die Vorschau des Designs in voller Größe öffnet. |
| Beschriftung des Vorschau-Links | Eigener Text für den Vorschau-Link. |
| Warenkorb-Sektions-IDs (Erweitert) | Nur nötig, wenn dein Theme abweichende Namen für die Warenkorb-Sektionen verwendet und die Links nicht erscheinen. |
| Designer-Events an Theme-Analytics weiterleiten | Sendet anonyme Interaktions-Events, damit deine Dashboard-Statistiken stimmen. |
Prüfen, ob alles live ist
Zurück in Customezo zeigt das Dashboard eine Karte Theme-Status:
- Theme — das veröffentlichte Theme, das Customezo geprüft hat.
- Design-Button — erkannt oder nicht erkannt.
- Warenkorb-UX — erkannt oder nicht erkannt.
- Erneut prüfen — startet die Erkennung neu, nachdem du Theme-Änderungen gespeichert hast.
Alte Liquid-Vorlagen
Nutzt deine Produktseite eine alte Liquid-Vorlage statt einer JSON-Vorlage, liefert Shopify nicht genug Informationen für die automatische Erkennung. Füge den Block wie gewohnt hinzu und markiere den Einrichtungsschritt mit Ich habe es installiert. Gelingt die Erkennung später, ersetzt sie deine manuelle Bestätigung automatisch.
So testest du
- Öffne in deinem Shop ein Produkt, für das der Designer aktiviert ist.
- Der Button „Jetzt designen“ sollte dort erscheinen, wo du ihn platziert hast.
- Gestalte etwas, lege es in den Warenkorb und prüfe, ob die Links Design bearbeiten und Designvorschau ansehen in der Warenkorbzeile erscheinen.
- Öffne das Design aus dem Warenkorb erneut, ändere etwas und aktualisiere den Warenkorb — der Artikel und sein Preis sollten sich aktualisieren.
Fehlerbehebung
Der Button erscheint nicht.
- Prüfe, ob der Designer für dieses Produkt in Customezo aktiviert ist (Produkte → das Produkt → Design-Tool aktivieren).
- Prüfe, ob der Produktstatus Aktiv ist und das Produkt im Vertriebskanal Onlineshop veröffentlicht ist.
- Prüfe, ob du den Block in die Vorlage eingefügt hast, die das Produkt tatsächlich nutzt.
- Klicke auf der Dashboard-Karte Theme-Status auf Erneut prüfen.
Der Button erscheint bei Produkten, die ihn nicht haben sollten. Der Block blendet sich bei Produkten ohne Designer-Konfiguration aus. Erscheint er trotzdem, ist der Designer für dieses Produkt wahrscheinlich aktiviert — deaktiviere ihn auf der Produktseite in Customezo.
Die Warenkorb-Links erscheinen nicht. Prüfe, ob die App-Einbettung eingeschaltet und gespeichert ist. Rendert dein Theme den Warenkorb mit eigenen Sektionsnamen, trage sie in der Einstellung Warenkorb-Sektions-IDs ein.
Das Styling passt nicht. Passe Farben, Radius und volle Breite in den Block-Einstellungen an, statt CSS hinzuzufügen. Überschreibt dein Theme Button-Stile global, stelle den Block auf Umrandet und setze die Farben ausdrücklich.
Weitere Lösungen: Fehlerbehebung.