In diesem Artikel erfährst du, wie du Gelatos Personalization Studio für deine Shopify-Themes einrichtest. Er erklärt, wie du Live-Vorschauen für Produkte aktivierst, Elemente gezielt ausblendest und einen Bearbeiten-Button nahtlos auf deinen Produkt- und Warenkorbseiten integrierst – selbst wenn dein Theme nicht nativ unterstützt wird.
Live-Produktvorschauen anzeigen
Stell dir vor, deine Kund*innen sehen, wie ihre personalisierten Produkte direkt vor ihren Augen zum Leben erwachen! So machst du’s möglich:
Durchsuchen, um zu finden
Öffne die Entwicklertools deines Webbrowsers (klicke mit der rechten Maustaste auf die Webseite und wähle "Untersuchen" oder "Element untersuchen").
Verwende das Element-Auswahlwerkzeug (normalerweise ein Pfeilsymbol), um den genauen Bereich auf deiner Produktseite auszuwählen, in dem die Live-Vorschau erscheinen soll.
Kopiere den Selektornamen. Das ist der Code, der den ausgewählten Bereich identifiziert (z. B. „.product-media“).
Den Selektor integrieren
Gehe in dein Shopify-Adminbereich und navigiere zur Personalization Studio-App.
Finde die App-Einbettungseinstellungen.
Füge den kopierten Selektornamen in das dafür vorgesehene Feld für Live-Vorschauen ein.
Speichere deine Einstellungen.
Erlebe die Magie
Aktualisiere deine Produktseite. Voilà! Jetzt solltest du die Live-Vorschauen in Aktion sehen.
Tipp: Für präzises Targeting solltest du generische Selektoren wie „col-2“, „col-4“ oder „container“ vermeiden. Wähle stattdessen spezifische Selektoren.
Elemente nahtlos ausblenden
Halte deine Produktseite übersichtlich und fokussiert, indem du unnötige Elemente ausblendet. So geht's:
Prüfen, um auszuwählen
Öffne die Entwicklertools deines Browsers (Rechtsklick + Inspect).
Verwende den Elementauswähler, um genau das Element auszuwählen, das du ausblenden möchtest.
Kopiere den Selektornamen für dieses spezifische Element.
Den Selektor konfigurieren
Navigiere zu den App-Einbettungseinstellungen im Personalization Studio.
Finde den vorgesehenen Abschnitt zum Ausblenden von Elementen.
Füge den kopierten Selektornamen in das vorgesehene Feld ein.
Speichere deine Einstellungen.
Werde Zeug*in des Verschwindens
Aktualisiere deine Seite und das ausgewählte Element wird verschwinden.
Optimiere deine Warenkorbseite mit personalisierten Vorschauen
Verbessere das Einkaufserlebnis, indem du personalisierte Produktvorschauen direkt auf der Warenkorbseite anzeigst. Befolge diese Schritte:
Prüfen, um zu erkennen
Öffne die Entwicklertools deines Browsers und navigiere zu deiner Warenkorbseite.
Verwende den Elementauswähler, um den Bereich zu wählen, in dem die personalisierte Vorschau erscheinen soll. Das ist normalerweise innerhalb des Bildcontainers des Warenkorbartikels.
Kopiere den Selektornamen und achte genau darauf, dass du das Bildelement selbst ansprichst, damit die Vorschau optimal angezeigt wird.
Richte den Selektor ein
Gehe zu den App-Einbettungseinstellungen im Personalization Studio.
Füge den kopierten Selektornamen in das dafür vorgesehene Feld für Warenkorbseiten-Vorschauen ein.
Speichere deine Einstellungen.
Vorschau im Warenkorb
Aktualisiere deine Warenkorbseite. Du solltest jetzt die personalisierten Produktvorschauen innerhalb der Warenkorbartikel sehen, die dir deine personalisierten Auswahlentscheidungen visuell in Erinnerung rufen.
Tipp : Für exakte personalisierte Vorschauen zielst du am besten auf das Warenkorb-Bild und nicht auf das gesamte div. Wir empfehlen, das Bild-Tag innerhalb des cart-item-divs anzusprechen, zum Beispiel ".cart-item img".
Bearbeitung verbessern mit einer Bearbeiten-Schaltfläche auf der Warenkorbseite
Gib deinen Kund*innen die Freiheit, Änderungen vorzunehmen – sogar nachdem sie Artikel in den Warenkorb gelegt haben. Diese Schritt-für-Schritt-Anleitung hilft dir dabei, deiner Warenkorbseite eine „Bearbeiten“-Schaltfläche hinzuzufügen:
Prüfen und lokalisieren
Öffne die Entwickler-Tools deines Browsers und navigiere zur Warenkorbseite.
Verwende den Elementauswähler, um die genaue Position festzulegen, an der für jeden Warenkorbartikel die Schaltfläche „Bearbeiten“ erscheinen soll.
Kopiere den Selektornamen. Dafür musst du eventuell Pseudo-Selektoren wie :nth-child() verwenden, um das richtige Element innerhalb einer Liste von Warenkorbartikeln zu treffen.
Den Selector integrieren
Suche in den Einstellungen deiner Personalization Studio-App den Abschnitt, der der Schaltfläche zum Bearbeiten der Warenkorbseite gewidmet ist.
Füge den kopierten Selektornamen in das vorgesehene Feld ein.
Speichere deine Einstellungen.
Aktualisieren und überprüfen
Aktualisiere deine Warenkorbseite. Du solltest jetzt die Schaltfläche „Bearbeiten" perfekt positioniert sehen, sodass Kund*innen ihre personalisierten Produkte ändern können, ohne den Warenkorb zu verlassen.
Selektoren für präzises Targeting meistern
Denk an Selektoren wie an deine GPS-Koordinaten in der Welt der Webentwicklung. So nutzt du sie effektiv:
Verstehen von "div:nth-child()" Diese Kombination ist entscheidend, um bestimmte Elemente innerhalb einer Gruppe genau zu bestimmen. Der ':nth-child()'-Selektor hilft dir, einzelne Kindelemente innerhalb eines Elternelements gezielt anzusprechen.
Identifiziere das übergeordnete Element: Beginne damit, das übergeordnete Element zu finden, das als Container für die untergeordneten Elemente dient, die du ansprechen möchtest. Zum Beispiel könnte ein div mit der Klasse 'cart-item' mehrere untergeordnete Elemente wie Bild, Titel und Preis enthalten.
Zähle die Kindelemente : Sobald du das Elternelement identifiziert hast, zähle die darin enthaltenen Kindelemente. Die Zahl, die du im ':nth-child()'-Selektor verwendest, entspricht der Position des Kindelements, das du anvisieren willst. Zum Beispiel wählt ':nth-child(2)' das zweite Kindelement innerhalb des angegebenen Elternelements aus.
Für eine Liste der Themes, die nativ von Personalization Studio unterstützt werden, klicke hier.