Überblick
DecorViz Storefront fügt automatisch einen "In deinem Zimmer ansehen"-Button zu deinen Produktseiten hinzu. Du installierst einmalig ein Script-Tag für deinen gesamten Shop, und die Runtime erkennt Produktseiten von selbst, holt sich das Produktfoto direkt von der Seite und platziert den Button in der Nähe deines "In den Warenkorb"-Buttons.
Diese Anleitung gilt für WooCommerce, Wix, Squarespace und individuell programmierte Websites: Du konfigurierst Storefront im DecorViz-Web-Dashboard und fügst ein Script-Tag in ein globales Template ein. Es gibt keinen Dashboard-Schritt pro Produkt: Sobald das Script live ist, ist jede Produktseite in deinem Shop abgedeckt.
Eine ausführliche Schritt-für-Schritt-Anleitung für WordPress findest du im Leitfaden Storefront für WooCommerce einrichten.
Shopify-Shops nutzen das Script nicht. Installiere die App DecorViz: Furniture Visualizer aus dem Shopify App Store und folge stattdessen dem Leitfaden zur Shopify-App.
Storefront ist im Storefront-Plan enthalten. Zu Storefront, um loszulegen.
Voraussetzungen
Stelle vor dem Start sicher, dass du Folgendes hast:
- Storefront-Abonnement: Storefront ist nur mit einem aktiven Storefront-Plan verfügbar. Prüfe deinen Plan oder führe ein Upgrade durch, falls nötig.
- Einen Onlineshop: Jede E-Commerce-Plattform oder Website mit Produktseiten.
- Zugriff auf deinen Theme- oder Website-Code: Du musst ein Script-Tag in ein globales Template (Theme-Datei, Footer oder Code-Injection-Panel) einfügen, nicht nur auf eine einzelne Seite.
Storefront liest das Produktbild direkt von der Seite, die der Kunde gerade betrachtet. Solange deine Produktseiten bereits ein klares Foto des Artikels zeigen, gibt es nichts zusätzlich hochzuladen.
Teil 1: DecorViz Storefront einrichten
Öffne dein DecorViz Storefront-Dashboard. In der App findest du es auch im Kontomenü oben rechts. Das Menü links hat vier Seiten: Übersicht, Produkte, Darstellung und Einstellungen.
Schritt 1: Storefront erstellen
Jedes DecorViz-Konto kann jeweils einen Storefront betreiben, gebunden an eine Website-Domain. Beim ersten Besuch wirst du gebeten, ihn zu erstellen.
Domain eingeben
Gib die Domain deines Shops ohne "https://" oder abschließenden Schrägstrich ein, zum Beispiel deinshop.com.
Plattform wählen
Wähle Automatisch erkennen, Shopify, WooCommerce, Squarespace oder Generisch / individuell. Automatisch erkennen funktioniert für die meisten Shops und ist der empfohlene Startpunkt; du kannst dies später in den Einstellungen ändern, falls die Erkennung Feinabstimmung braucht.
Domain-Abgleich festlegen
Wähle Exakte Domain, wenn der Button nur auf dieser einen Domain laufen soll, oder Subdomains einschließen, wenn du auch Produktseiten von Subdomains ausspielst (zum Beispiel ein separates shop.deinshop.com).
Jedes DecorViz-Konto unterstützt einen Storefront und eine Domain. Wenn du die Visualisierung auf einer zweiten Website aktivieren möchtest, benötigst du ein separates Konto.
Schritt 2: Erkennung & Button konfigurieren
Die Produkterkennung stellst du auf der Seite Einstellungen ein, Aussehen und Position des Buttons auf der Seite Darstellung. Die Standardwerte passen für die meisten Shops, aber prüfe sie vor dem Livegang.
Erkennungseinstellungen
Prüfe auf der Seite Einstellungen, ob der Plattformmodus zu deinem Shop passt (oder lass ihn auf Automatisch erkennen). Passe bei Bedarf die Mindestkonfidenz an: Niedrigere Werte erkennen mehr Produktseiten, können den Button aber auch auf anderen Seiten zeigen; höhere Werte sind strenger. 0,50 ist der empfohlene Standardwert.
Aussehen & Position des Buttons
Auf der Seite Darstellung zeigt die Vorschau den Button, während du ihn änderst:
- Buttontext: der Text, den Kunden auf dem Button sehen
- Stil: Gefüllt oder Umriss
- Ecken: Abgerundet oder Eckig
- Farbe und Schlagschatten an oder aus
- Position: Über „In den Warenkorb“ (empfohlen), Unter „In den Warenkorb“, Unter dem Produktbild, auf dem Bild (zentriert, unten links oder unten rechts), schwebend (unten rechts oder unten links) oder Eigene Position (erweitert)
- Bei einer eigenen Position gibst du einen CSS-Selektor ein und wählst unter Button platzieren: vor, nach oder in diesem Element
Klicke zum Schluss auf Änderungen speichern.
Schritt 3: Installations-Script kopieren
Sobald du die Erkennungs- und Button-Einstellungen konfiguriert und gespeichert hast, generiert DecorViz ein einzelnes Installations-Script, gebunden an den Installationsschlüssel deines Kontos und deine aktuelle Konfiguration. Das ist der einzige Code, den du zu deinem Shop hinzufügen musst.
Kopiere dein Script
Scrolle auf der Seite Einstellungen unter Änderungen speichern zur Karte Installations-Snippet und klicke auf Kopieren. Jetzt bist du bereit für Teil 2.
Die Karte Installations-Snippet hat außerdem den Button Schlüssel erneuern für die Sicherheit. Das Erneuern macht den alten Schlüssel sofort ungültig, sodass der Button in deinem Shop verschwindet, bis du das Snippet mit dem neuen Schlüssel aktualisierst. Erneuere den Schlüssel nur, wenn du direkt neu installieren kannst.
Teil 2: Deinen Shop einrichten
Füge das Script aus Schritt 3 einmalig in deinen Shop ein, an einer Stelle, die auf jeder Seite geladen wird (eine globale Theme-Datei, Footer, oder Code-Injection-Panel). Platziere es nicht nur auf einer einzelnen Produktseite, die Runtime muss website-weit laufen, um jedes Produkt zu erkennen und abzudecken.
Shopify-Shops installieren stattdessen die App DecorViz: Furniture Visualizer aus dem Shopify App Store und richten alles im Shopify-Adminbereich ein, statt ein Script einzufügen. Folge dem Leitfaden zur Shopify-App.
WooCommerce
WooCommerce läuft auf WordPress, daher kommt das Script in den globalen Footer deines Themes, nicht auf ein einzelnes Produkt.
Header/Footer-Plugin verwenden (empfohlen)
Installiere ein schlankes Plugin wie "Insert Headers and Footers" oder "WPCode". Füge das DecorViz-Script in das Feld für Footer-Scripts ein und speichere. Das schützt das Script vor Theme-Updates.
Oder footer.php direkt bearbeiten
Wenn du lieber Theme-Dateien bearbeitest, gehe zu Design → Theme-Datei-Editor, öffne footer.php und füge das Script direkt vor dem schließenden </body>-Tag ein. Verwende ein Child-Theme, wenn die Änderung Theme-Updates überstehen soll.
Hier hinzugefügter Code wird direkt vor dem schließenden </body>-Tag geladen, auf jeder Seite deiner Website.
Der Button erscheint jetzt auf jeder WooCommerce-Produktseite, automatisch erkannt anhand deines Produktgalerie-Bilds und des "In den Warenkorb"-Buttons.
Wix, Squarespace & andere Plattformen
Das Script ist Standard-HTML. Es funktioniert überall, wo du individuellen Code einfügen kannst, der auf jeder Seite lädt.
| Plattform | So fügst du das Script ein |
|---|---|
| Wix | Gehe im Wix-Editor zu Einstellungen → Benutzerdefinierter Code, füge neuen Code hinzu, stelle ihn so ein, dass er auf allen Seiten in der Position Body - Ende lädt, und füge das Script ein. |
| Squarespace | Ö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. 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. Ausführliche Squarespace-Anleitung |
| Webflow | Gehe zu Projekteinstellungen → Benutzerdefinierter Code → Footer-Code, füge das Script ein, damit es website-weit gilt, und veröffentliche. |
| Individuelle HTML-Website | Füge das Script zum gemeinsamen Layout oder Template hinzu, das jede Seite enthält, direkt vor dem schließenden </body>-Tag. |
| Andere Plattformen | Suche nach einer Option "Benutzerdefinierter Code", "Tracking-Scripts" oder "Footer-Code", die global gilt, und füge das Script dort ein. |
Anders als ein Tracking-Pixel, das du vielleicht auf eine Landingpage einfügst, muss dieses Script auf jeder Produktseite laden. Verwende ein globales Template, Footer, oder eine Code-Injection-Einstellung für "alle Seiten", nicht eine Einbindung auf einer einzelnen Seite.
Teil 3: Deine Produkte verwalten
Sobald das Snippet live ist, öffne die Seite Produkte. Sie listet jede Produktseite auf, auf der der Button erschienen ist, nach Kategorie gruppiert, mit Ansichten, Datum der letzten Erkennung, Produktfoto und einem Button-Schalter. Änderungen gelten beim nächsten Laden der Seite.
Button für eine Seite oder eine Kategorie ausschalten
- Eine einzelne Seite: Schalte ihren Button aus, zum Beispiel bei eingestellten oder ausverkauften Artikeln.
- Eine ganze Kategorie: Schalte die Kategorie aus, damit der Button bei keinem ihrer Produkte erscheint, auch nicht bei später hinzukommenden. Praktisch für Gutscheine, Zubehör oder Ersatzteile.
Eine Produktseite selbst hinzufügen
Um eine Seite zu verwalten, bevor ein Kunde sie besucht hat, oder eine Seite, die DecorViz nicht als Produkt erkennt, füge ihre URL oben auf der Seite unter Produkt-URL hinzufügen ein und klicke auf URL hinzufügen. Aktualisieren holt die neuesten erkannten Seiten, ohne das Dashboard neu zu laden.
Produktfoto korrigieren
Der Button verwendet das Hauptfoto der Produktseite. Wenn DecorViz das falsche Foto gewählt oder keines gefunden hat, klicke unter dem Produktfoto auf Ersetzen (oder Bild festlegen) und lade das richtige hoch. Seitenbild verwenden kehrt zum Foto der Produktseite zurück.
Produktoptionen: Beizen, Farben und Stoffe
Gibt es ein Produkt in mehreren Holzbeizen, Farben oder Stoffen, füge jede Variante als Option hinzu, damit Kunden sie in ihrem eigenen Raum sehen können. Klicke unter dem Produktfoto auf Optionen hinzufügen.
- Das Seitenfoto steht immer an erster Stelle. Füge bis zu 10 weitere Fotos hinzu, eines pro Option (JPG, PNG oder WebP).
- Gib jedem Foto einen Namen, zum Beispiel Nussbaum oder Smaragdgrüner Samt. Namen sind optional; ein Foto ohne Namen zeigt keinen an.
- Lege die Reihenfolge mit den Pfeilen fest und klicke auf Speichern.
Im Vorschaufenster wechseln Kunden mit den Pfeilen zwischen den Fotos, sehen den Namen jeder Option und erstellen die Vorschau mit der gewählten. Hat ein Produkt Optionen, zeigt der Link ihre Anzahl, zum Beispiel Optionen (2).
Eine Seite erscheint erst in der Produkte-Liste, sobald der Button dort tatsächlich angezeigt wurde. Wenn du ein erwartetes Produkt nicht siehst, besuche die Seite selbst, um die Erkennung auszulösen, oder füge die URL manuell hinzu.
Deine Installation testen
Überprüfe nach dem Speichern des Scripts, dass alles funktioniert, bevor du es deinen Kunden mitteilst:
- Besuche einige Live-Produktseiten auf verschiedenen Templates (ein einfacher Artikel, ein Artikel mit vielen Varianten, und alles individuell gebaute).
- Bestätige, dass der Button an der erwarteten Stelle mit deinem gewählten Text, deiner Farbe und deinem Stil erscheint.
- Prüfe die Seite Produkte, um zu bestätigen, dass diese Seiten erkannt und erfasst wurden.
- Führe eine vollständige Test-Generierung durch: klicke auf den Button, lade ein Zimmerfoto hoch, und bestätige, dass das Ergebnis korrekt gerendert wird.
- Besuche eine Nicht-Produktseite (deine Startseite oder einen Blogbeitrag) und bestätige, dass der Button nicht erscheint.
- Teste auf dem Smartphone. Viele Kunden shoppen mit dem Handy.
Stelle sicher, dass du die Live-Shop-URL aufrufst, nicht den Theme-Editor oder eine Entwurfsvorschau. Bestätige auch, dass die Domain in deinen Storefront-Einstellungen genau mit der Domain deines Shops übereinstimmt (ohne https://, ohne abschließenden Schrägstrich, und prüfe die Subdomain-Abgleich-Einstellung).
Fehlerbehebung
Button erscheint nirgends
- Bestätige, dass das Script in einem globalen Template ist (footer.php, website-weite Code-Injection), nicht auf einer einzelnen Seite
- Prüfe, ob Storefront aktivieren auf der Seite Einstellungen eingeschaltet ist
- Bestätige, dass die Domain auf der Seite Einstellungen genau mit der Domain deines Live-Shops übereinstimmt
- Falls du kürzlich deinen Installationsschlüssel erneuert hast, stelle sicher, dass das Live-Script den neuen Schlüssel verwendet
- Leere deinen Browser-Cache und lade die Seite neu
Button erscheint nicht auf einer bestimmten Produktseite
- Senke die Mindestkonfidenz leicht ab, oder lege den Plattformmodus statt Automatisch erkennen explizit fest
- Prüfe, dass die Kategorie des Produkts unter Produkte nicht ausgeschaltet ist
- Prüfe, dass der Button für diese Seite unter Produkte nicht ausgeschaltet wurde
- Wenn dein Theme stark angepasst ist, wähle auf der Seite Darstellung Eigene Position (erweitert) und gib einen CSS-Selektor ein
Button erscheint auf Nicht-Produktseiten
- Erhöhe die Mindestkonfidenz
- Lege den Plattformmodus explizit fest statt Automatisch erkennen
Falsches oder fehlendes Produktbild
- Die Runtime holt das Hauptproduktbild direkt von der Seite; bestätige, dass dieses Bild für Kunden normal lädt (nicht hinter einem Klick verzögert geladen wird)
- Wenn dein Theme eine ungewöhnliche Bildstruktur verwendet, kontaktiere den Support, damit wir dein Galerie-Markup überprüfen können
Button erscheint, aber Generierung funktioniert nicht
- Bestätige, dass dein Storefront-Abonnement aktiv ist
- Bestätige, dass dir noch Visualisierungs-Credits übrig sind
Kontaktiere unser Support-Team unter [email protected] oder nutze den Chat in deinem DecorViz-Dashboard.
Häufig gestellte Fragen
Muss ich für jedes Produkt ein Widget einrichten?
Nein. Storefront verwendet ein einziges website-weites Script. Die Runtime erkennt Produktseiten und das Produktbild automatisch, einschließlich neuer Produkte, die du nach der Installation hinzufügst.
Ich betreibe einen Shopify-Shop. Kann ich diese Anleitung nutzen?
Nein, und das ist auch nicht nötig. Shopify-Shops installieren die DecorViz-App aus dem Shopify App Store, statt ein Snippet einzufügen, und richten den Button im Shopify-Adminbereich ein. Folge dem Leitfaden zur Shopify-App.
Wie viele Storefronts kann ich erstellen?
Einen pro DecorViz-Konto, gebunden an eine Domain. Wenn du mehrere Shops betreibst, benötigt jeder sein eigenes Konto.
Kann ich den Button bei bestimmten Produkten ausblenden?
Ja. Schalte einzelne Seiten auf der Seite Produkte aus, oder schalte dort eine ganze Kategorie aus (zum Beispiel Teppiche, Beleuchtung oder Wanddeko).
Können Kunden verschiedene Beizen, Farben oder Stoffe ausprobieren?
Ja. Klicke auf der Seite Produkte unter einem Produktfoto auf Optionen hinzufügen und füge für jede Beize, Farbe oder jeden Stoff ein Foto hinzu. Kunden wechseln im Vorschaufenster zwischen ihnen und sehen die gewählte Variante in ihrem Raum.
Was passiert, wenn ich meinen Installationsschlüssel erneuere?
Der alte Schlüssel funktioniert sofort nicht mehr. Der Button verschwindet aus deinem Shop, bis du das Live-Script mit dem neuen Schlüssel aktualisierst, erneuere also nur, wenn du bereit bist, sofort neu zu deployen.
Funktioniert es auf anderen Plattformen als Shopify und WooCommerce?
Squarespace hat eine eigene Einstellung für die Produkterkennung. Ja. Die allgemeine Erkennung deckt die meisten E-Commerce-Themes ab, darunter Wix, Webflow und individuell programmierte Websites. Wenn dein Theme eine genaue Platzierung braucht, kannst du auf der Seite Darstellung einen eigenen CSS-Selektor festlegen.
Können Händler die Zimmerfotos der Kunden sehen?
Nein. Zimmerfotos von Kunden werden ausschließlich zur Erstellung der Vorschau verwendet. Händler können diese Zimmerfotos im Storefront-Dashboard nicht ansehen, durchsuchen oder herunterladen.
Werden dadurch meine Visualisierungs-Credits verbraucht?
Ja, jede Visualisierung, die ein Kunde abschließt, verbraucht Credits aus deinem Storefront-Plan-Kontingent.
Wird das meinen Shop verlangsamen?
Nein. Das Script lädt asynchron und blockiert das Rendern deiner Seite nicht.
Bereit loszulegen?
Richte Storefront einmal ein und lass DecorViz die Produkterkennung in deinem gesamten Shop übernehmen.