Bevor du startest
DecorViz Storefront ergänzt unterstützte Produktseiten um einen Vorschau-Button. Deine Kunden nutzen deine Produktfotos und ein Foto ihres Raums, ohne ein DecorViz-Konto anzulegen.
- Ein veröffentlichter Squarespace-Shop mit klaren Produktfotos.
- Ein DecorViz-Konto mit Storefront-Zugang und verfügbaren Credits.
- Zugriff auf den Bereich Code-Injektion deiner Squarespace-Website.
Code-Injektion ist in Core, Plus und Advanced sowie den geeigneten älteren Tarifen Business, Commerce Basic und Commerce Advanced enthalten. Basic und der ältere Personal-Tarif bieten diese Installationsmethode nicht.
1. Squarespace in DecorViz auswählen
Storefront erstellen
Melde dich an und öffne das DecorViz-Storefront-Dashboard. Beim ersten Besuch siehst du Storefront erstellen.
Shop-Domain eingeben
Gib nur die Domain der Website ein, zum Beispiel ihrshop.de. Lass https:// und Pfade von Produktseiten wie /shop/blauer-teppich/ weg.
Squarespace als Plattform wählen
Öffne unter Storefront erstellen die Liste Plattform und wähle Squarespace. Trage deine öffentliche Shop-Domain ein, behalte bei einem einzelnen Hostnamen die genaue Domain-Übereinstimmung bei und klicke auf Storefront erstellen.
Auf Storefront erstellen klicken
Deine Storefront ist jetzt mit dieser Domain verbunden. Wenn du bereits eine Storefront hast, öffne stattdessen Einstellungen, um diese Werte zu prüfen.
Du hast bereits eine Storefront?
Öffne Storefront → Einstellungen → Erkennung. Wähle bei Plattformmodus den Eintrag Squarespace und klicke auf Änderungen speichern. Du musst weder eine weitere Storefront erstellen noch das installierte Script austauschen.
Liegt dein Shop unter shop.ihrshop.de, gib diesen Hostnamen ein. Prüfe die Einstellungen zum Domain-Abgleich, wenn deine Produktseiten auch auf anderen Subdomains laufen.
Storefront aktivieren und Script kopieren
Öffne die Seite Einstellungen. Prüfe, dass Storefront aktivieren eingeschaltet ist, und klicke auf Änderungen speichern. Scrolle zur Karte Installations-Snippet und klicke auf Kopieren.
Kopiere das Script aus deinem Dashboard, nicht aus diesem Leitfaden. Dein Dashboard enthält automatisch den richtigen Installationsschlüssel. Das Beispiel unten zeigt nur das Format.
<script
src="https://decorviz.ai/runtime/storefront/v2/auto-inject.js"
data-key="YOUR_INSTALL_KEY"
async
></script>Du brauchst nur Kopieren. Schlüssel erneuern ersetzt den Schlüssel, und das alte Script funktioniert dann nicht mehr.
2. Über Squarespace Code-Injektion installieren
Code-Injektion öffnen
Öffne im Squarespace-Dashboard Seiten → Benutzerdefinierter Code → Code-Injektion. Bei Version 7.0 findest du den Bereich unter Website-Tools. Die Bezeichnungen können je nach Version abweichen.
Script im Footer einfügen
Verwende das Feld Footer, das für die gesamte Website gilt. Füge das vollständige Script aus DecorViz einschließlich der <script>-Tags ein. Lass vorhandenen Code stehen, füge DecorViz in einer neuen Zeile hinzu und klicke auf Speichern.
Code Injection
<script
src="https://decorviz.ai/runtime/storefront/v2/auto-inject.js"
data-key="YOUR_INSTALL_KEY"
async
></script>Darstellung der benötigten Felder. Das Layout kann abweichen.
Füge das Script nicht bei jedem Produkt oder in einzelnen Code-Blöcken ein. Der Checkout unterstützt keine Code-Injektion. Die Raumvorschau gehört auf die Produktseite.
Öffne danach eine veröffentlichte Produktseite in einem privaten Browserfenster, außerhalb des Squarespace-Editors.
3. Button für die Raumvorschau anpassen
Öffne im DecorViz-Dashboard die Seite Darstellung. Wähle Text, Stil, Ecken, Farbe und Position des Buttons und klicke auf Änderungen speichern. Nutze eine Formulierung wie „In deinem Raum ansehen“, damit deine Kunden wissen, was sie erwartet.
Für den ersten Test: Starte mit Über „In den Warenkorb“. Wenn dein Theme diese Position ungünstig macht, probiere Unter dem Produktbild. Speichere und lade deine Produktseite neu, um die Änderung zu sehen.
Prüfe auf der Seite Produkte die Schalter der Kategorien und die Produktliste. Soll ein passendes Produkt keine Raumvorschau anbieten, schalte seinen Button dort aus. Starte mit den Standardeinstellungen der Erkennung und teste, bevor du die Mindestkonfidenz auf der Seite Einstellungen anpasst.
Achte auf der Seite Produkte darauf, dass der Schalter für die Teppich-Kategorie eingeschaltet ist. Produkte einer ausgeschalteten Kategorie zeigen den Button nicht.
Gibt es ein Produkt in verschiedenen Beizen, Farben oder Stoffen, klicke auf der Seite Produkte unter seinem Foto auf Optionen hinzufügen und füge für jede Variante ein Foto hinzu. Kunden wechseln im Vorschaufenster zwischen ihnen. Mehr dazu unter Produktoptionen im Storefront-Leitfaden.
Eigene Squarespace-Galerien und Page Builder können verändern, wo der Button erscheint oder welches Bild erkannt wird. Prüfe die Platzierung in deinem eigenen Theme, auch auf Mobilgeräten.
4. Veröffentlichte Produktseiten testen
Prüfe deine verschiedenen Produktgruppen am Desktop und auf dem Smartphone. Verwende die öffentlichen Adressen, die deine Kunden besuchen.
- Prüfe die Position des Buttons und öffne die Vorschau.
- Kontrolliere das Produktfoto und die in DecorViz hinterlegten Fotooptionen. Squarespace-Varianten richten diese Fotos nicht automatisch ein.
- Lade ein Raumfoto hoch und erstelle eine Vorschau. Dafür wird ein Credit verwendet.
- Prüfe, ob Galerie, Varianten und In den Warenkorb weiterhin funktionieren.
- Kontrolliere unter Produkte die Kategorie und die Platzierung an Wand, Boden oder auf einer Fläche. Auf Start- und Kategorieseiten soll kein Vorschau-Button erscheinen.
Fehlerbehebung
Code-Injektion ist nicht verfügbar
Prüfe deinen Squarespace-Tarif und deine Zugriffsrechte. Bitte den Website-Inhaber um Hilfe, wenn du den Bereich nicht öffnen kannst.
Der Button erscheint nicht
Prüfe das Script im Footer, den Installationsschlüssel, die öffentliche Domain und den Storefront-Schalter. Wähle in den Einstellungen Squarespace, speichere und teste außerhalb des Editors. Kontrolliere unter Produkte auch die Schalter für Produkt und Kategorie.
Foto, Kategorie oder Position stimmen nicht
Wähle unter Produkte die passende Kategorie und das richtige Foto. Ergänze Fotooptionen für verschiedene Ausführungen. Passe unter Darstellung die Button-Position an, speichere und prüfe auch die mobile Ansicht.
Die Vorschau schlägt fehl
Prüfe deinen Storefront-Zugang und die verfügbaren Credits. Schicke dem Support bei weiteren Problemen die Produkt-URL und die angezeigte Fehlermeldung.
Häufige Fragen
Muss ich das Script bei jedem Produkt einfügen?
Nein. Einmal im Footer für die gesamte Website genügt. Prüfe anschließend die erkannten Produkte in DecorViz.
Brauche ich eine Squarespace-Erweiterung oder 3D-Modelle?
Nein. DecorViz nutzt das Installationsscript und deine vorhandenen Produktfotos.
Kann ich verschiedene Ausführungen zeigen?
Ja. Hinterlege unter Produkte über Optionen hinzufügen ein Foto pro Ausführung. Kunden wählen diese Fotos im Vorschaufenster aus.
Soll ich im Editor testen?
Teste veröffentlichte Produktseiten in einem privaten Fenster. Im Editor können eigene Scripts anders ausgeführt werden.
Wie entferne ich Storefront?
Entferne nur das DecorViz-Script aus dem Footer und speichere. Lass andere Scripts stehen. Wenn du den Schlüssel erneuerst, ersetze das alte Script sofort durch das neue.
Verbinde deinen Squarespace-Shop
Hol dir dein Installations-Snippet und biete auf deinen Produktseiten eine Raumvorschau an.