Schritt 1: Holen Sie sich Ihren Photta Widget-Key
Melden Sie sich im Photta Business-Dashboard unter business.photta.app an. Navigieren Sie zu Einstellungen → API-Keys und suchen Sie Ihren Publishable Key – er beginnt mit pk_live_ und sieht etwa so aus: pk_live_xxxxxxxxxxxxxxxxxxxxxxxx. Klicken Sie auf das Kopiersymbol neben dem Key. Dies ist die einzige Anmeldeinformation, die Sie für die Shopify-Integration benötigen; fügen Sie niemals Ihren geheimen sk_live_-Key in Frontend-Code ein.
Falls Sie noch kein Konto haben, klicken Sie auf der Photta Business-Seite auf 'Kostenlose Testversion starten'. Die Testversion bietet Ihnen 50 kostenlose Anproben, ohne dass eine Kreditkarte erforderlich ist. Ihr pk_live_-Key ist sofort verfügbar, nachdem Sie Ihre E-Mail-Adresse verifiziert und Ihre Store-Domain unter Einstellungen → Erlaubte Domains registriert haben.
Schritt 2: Öffnen Sie Ihren Shopify Theme-Code
Gehen Sie in Ihrem Shopify-Adminbereich zu Onlineshop → Themes. Klicken Sie neben Ihrem aktiven Theme auf das Drei-Punkte-Menü und wählen Sie 'Code bearbeiten'. Der Code-Editor öffnet links eine Dateistruktur. Erweitern Sie den Ordner 'Layout' und klicken Sie auf theme.liquid – dies ist das Master-Template, das jede Seite Ihres Shops umschließt.
Nutzen Sie die integrierte Suche Ihres Browsers (Cmd+F oder Strg+F) im Code-Editor und suchen Sie nach </body>. Sie sollten genau einen Treffer ganz unten in der Datei finden, direkt über </html>. Positionieren Sie Ihren Cursor in der Zeile unmittelbar vor </body>. Alles, was Sie hier einfügen, wird auf jeder Seite Ihres Shops geladen, was genau das ist, was Sie benötigen.
Schritt 3: Fügen Sie das Photta Script-Snippet ein
Fügen Sie das folgende Snippet in die Zeile unmittelbar vor </body> ein und ersetzen Sie pk_live_... durch Ihren in Schritt 1 kopierten Key: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>. Das Attribut 'defer' ist wichtig – es verhindert, dass das Script das Rendern Ihrer Seite blockiert, stellt aber sicher, dass das Widget initialisiert wird, sobald das DOM bereit ist.
Klicken Sie oben rechts im Code-Editor auf 'Speichern'. Shopify speichert die Datei und zeigt eine grüne Bestätigungsmeldung an. Sie müssen keine neue Theme-Version veröffentlichen – die Änderung ist in Ihrem aktiven Theme live, sobald Sie auf Speichern klicken.
Schritt 4: Korrekte Funktion des Widgets überprüfen
Öffnen Sie eine beliebige Produktseite in Ihrem Shop in einem neuen Browser-Tab (nutzen Sie ein privates/Inkognito-Fenster, um Caching durch eingeloggte Nutzer zu umgehen). Scrollen Sie zum Produktbereich – Sie sollten einen 'Anprobieren'-Button in der Nähe des 'In den Warenkorb'-Buttons sehen. Klicken Sie darauf, laden Sie ein Testfoto hoch und bestätigen Sie, dass das Ergebnis der Anprobe erscheint. Wenn der Button sichtbar ist, ist die Installation abgeschlossen.
Falls der Button nicht erscheint, öffnen Sie die Entwicklerkonsole des Browsers (F12 → Tab Konsole) und suchen Sie nach Fehlermeldungen von photta oder sdk.js. Das häufigste Problem ist eine Diskrepanz bei der Domain: Ihre Shop-Domain muss im Business Dashboard unter Einstellungen → Erlaubte Domains aufgeführt sein. Fügen Sie sie dort hinzu, warten Sie 30 Sekunden und laden Sie die Produktseite neu.
Schritt 5: Widget-Farben an Ihre Marke anpassen
Standardmäßig verwendet das Widget die neutrale dunkle Palette von Photta. Um es an Ihre Marke anzupassen, fügen Sie Daten-Attribute zum selben Script-Tag hinzu: data-color-primary für die Farbe Ihres CTA-Buttons (Hex-Wert, z. B. #D4AF37) und data-color-surface für den Hintergrund des Modals. Beispiel: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-color-primary="#D4AF37" defer></script>. Speichern Sie die theme.liquid nach dem Hinzufügen dieser Attribute erneut.
Für vollständige CSS-Anpassungen stellt das Photta-Widget CSS-Custom-Properties im Namensraum --photta-* bereit, die Sie über das Basis-CSS Ihres Themes ansteuern können. Ab dem Growth-Plan können Sie zudem den Hinweis 'Powered by Photta' über das Business Dashboard unter Anpassen → Branding ausblenden. Änderungen werden nach dem Speichern in Echtzeit übernommen – kein erneutes Deployment oder Widget-Update erforderlich.