Bevor du startest
DecorViz Storefront erkennt unterstützte Produktseiten, liest das Produktbild aus und fügt einen Button für die Raumvorschau hinzu. Deine Kunden öffnen das Widget, laden ein Foto ihres Raums hoch und erstellen eine Vorschau, ohne ein DecorViz-Konto anzulegen.
- Ein WooCommerce-Shop, der online ist und klare Produktfotos hat.
- Ein DecorViz-Konto mit Storefront-Zugang und verfügbaren Vorschau-Credits. Deinen Status siehst du im Storefront-Dashboard.
- Administratorzugang zu WordPress oder Hilfe von der Person, die die Scripts deiner Website verwaltet.
Die WooCommerce-Integration nutzt ein Script aus dem DecorViz-Dashboard. Du kannst es über dein vorhandenes Tool für Footer-Code auf der ganzen Website einfügen oder über ein WordPress-Plugin, das HTML-Scripts akzeptiert.
Erstelle zuerst deine Storefront in DecorViz. Kopiere dann ihr Script in WordPress. Teste anschließend den Button auf einer Live-Produktseite. Die Beispiele unten zeigen, worauf du bei jedem Schritt achten solltest.
1. WooCommerce-Shop verbinden
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.
Plattform wählen
Wählst du für einen WooCommerce-Shop WooCommerce, sucht DecorViz zuerst nach dem Produkttitel, dem Galeriebild und den Produktdetails von WooCommerce. Automatisch erkennen unterstützt WooCommerce ebenfalls, du kannst es also beibehalten, wenn die Erkennung bereits richtig funktioniert. Lass Domain-Abgleich bei einem Shop mit nur einem Hostnamen auf Exakte Domain.
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.
Storefront erstellen
Beispielansicht. Gib im Dashboard die Domain deines eigenen Shops ein.
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 den Tab Einstellungen. Prüfe, dass Storefront aktivieren eingeschaltet ist, und klicke auf Änderungen speichern. Scrolle zur Karte Installations-Snippet und klicke auf Kopieren.
Installations-Snippet
<script src="...auto-inject.js" data-key="..." async></script>KopierenBeispielansicht. Die Karte Installations-Snippet liegt unter den Einstellungen und dem Button Änderungen speichern.
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. Script in WordPress installieren
Nutze ein Feld für Footer-Code, das auf der ganzen Website gilt, damit das Script auf deinen Produktseiten geladen wird. Wenn deine Website schon ein Tool dafür hat, füge dort das vollständige Script ein und speichere.
Ein Plugin für Footer-Code hinzufügen
WPCode installieren und aktivieren
Öffne im WordPress-Adminbereich das Menü Plugins und füge ein neues Plugin hinzu. Suche nach WPCode - Insert Headers and Footers, klicke auf Jetzt installieren und dann auf Aktivieren. Ist WPCode bereits aktiv, mach mit dem nächsten Schritt weiter.
Script in Footer einfügen
Header & Footer öffnen
Gehe zu Code Snippets → Header & Footer. Scrolle zum Feld Footer. Je nach Sprache deines WordPress können diese Menüs übersetzt angezeigt werden.
Einfügen und speichern
Füge das vollständige Script, das du aus DecorViz kopiert hast, in Footer ein, von <script bis </script>. Behalte vorhandenen Code im Feld und füge DecorViz in einer neuen Zeile hinzu. Klicke auf Save Changes.
Code Snippets → Header & Footer
Header & Footer
<script
src="https://decorviz.ai/runtime/storefront/v2/auto-inject.js"
data-key="YOUR_INSTALL_KEY"
async
></script>Füge hier dein eigenes kopiertes Script ein. Behalte vorhandene Footer-Scripts.
Beispielansicht. Feldnamen und Layout können je nach Version und Sprache von WPCode abweichen.
Website-Cache leeren
Wenn du ein Cache-Plugin für WordPress nutzt, leere seinen Cache. Wenn auch dein Hoster oder CDN Seiten zwischenspeichert, leere diesen Cache ebenfalls. Öffne danach eine Live-Produktseite in einem privaten Browserfenster, um die aktualisierte Seite zu prüfen.
WPCode bietet dafür globale Script-Felder. Die aktuelle Oberfläche beschreiben die offiziellen Header & Footer-Anleitungen von WPCode (auf Englisch).
Nutze nur eine Installationsmethode. Das Footer-Feld akzeptiert das vollständige HTML-Script mit öffnendem und schließendem Tag. Produktbeschreibungen und Blöcke einzelner Seiten gelten nicht für die ganze Website.
Wenn deine Entwicklerin oder dein Entwickler die Installation übernimmt
Bitte sie oder ihn, das Script aus dem Dashboard in den gemeinsamen Footer der Website oder über den WordPress-Footer-Hook einzufügen, damit es auf Produktseiten geladen wird. Eine Einbindung per Plugin übersteht einen Theme-Wechsel; liegt das Script im Theme, prüfe die Installation nach einem Theme-Wechsel erneut.
3. Button für die Raumvorschau anpassen
Geh im DecorViz-Dashboard zurück zu Einstellungen. Wähle Text, Farbe, Form und Platzierung des Buttons und speichere. Nutze eine Formulierung wie „In deinem Raum ansehen“, damit deine Kunden wissen, was sie erwartet.
Button-Platzierung und Darstellung
Beispieleinstellungen. Wähle Text und Darstellung passend zu deinem Shop.
Für den ersten Test: Starte mit Automatisch (neben „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 die ausgeschlossenen Kategorien und den Tab Produkte. Soll ein passendes Produkt keine Raumvorschau anbieten, deaktiviere es dort. Starte mit den Standardeinstellungen der Erkennung und teste, bevor du die Konfidenz anpasst.
Achte darauf, dass Rugs & Carpets unter Ausgeschlossene Kategorien nicht angehakt ist. Die Kategorienamen erscheinen im Dashboard auf Englisch. Angehakte Kategorien sind ausgeschlossen, ihre Produkte zeigen den Button also nicht.
Eigene WooCommerce-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. Live-Produktseite testen
Nimm ein Produkt mit einem klaren Hauptfoto, etwa einen Teppich, ein Sofa oder einen Stuhl. Öffne die öffentliche Produkt-URL, die deine Kunden nutzen, nicht einen Editor- oder Vorschau-Link aus WordPress.
- Öffne eine Live-Produktseite in einem privaten Browserfenster, mit dem Hostnamen, der in DecorViz gespeichert ist.
- Prüfe, dass der Vorschau-Button an der gewählten Position erscheint. Prüfe am Desktop und auf dem Smartphone.
- Öffne das Widget und prüfe, dass es das richtige Produktfoto verwendet. Bei Produkten mit Varianten änderst du die Auswahl und prüfst das Bild, bevor du eine Vorschau erstellst.
- Lade ein Raumfoto hoch und erstelle eine Vorschau. Dabei wird ein Vorschau-Credit verbraucht.
- Prüfe, dass Galerie, Variantenauswahl und der Button „In den Warenkorb“ weiterhin funktionieren.
- Öffne in DecorViz den Tab Produkte und prüfe, dass die besuchte Seite aufgeführt ist. Prüfe auch die Startseite oder eine Blogseite, auf der der Vorschau-Button nicht erscheinen sollte.
der Button auf der Produktseite erscheint, das Widget das richtige Produktbild zeigt und eine Raumvorschau erfolgreich erstellt wird. Wiederhole die Prüfung auf dem Smartphone, bevor du die Funktion deinen Kunden anbietest.
Eine Raumvorschau hilft deinen Kunden, die Optik einzuschätzen. Für die Frage, ob ein Produkt in den Raum passt, bleiben deine Produktmaße und Angaben zum Platzbedarf maßgeblich.
Fehlerbehebung
Der Button erscheint nicht
- Prüfe, dass das Script im globalen Footer gespeichert ist und deinen echten Installationsschlüssel enthält.
- Prüfe in den DecorViz-Einstellungen, dass Storefront aktivieren eingeschaltet ist, und klicke auf Änderungen speichern.
- Prüfe, dass der Hostname der Live-Website mit deinen Storefront-Einstellungen übereinstimmt.
- Leere Seiten- und CDN-Cache und lade die Seite in einem privaten Fenster neu.
- Prüfe, ob das Produkt oder seine Kategorie in DecorViz ausgeschlossen ist.
- Prüfe, dass Produktname, Kurzbeschreibung oder Produktkategorie den Artikel benennen, etwa Teppich, Sofa oder Stehlampe. DecorViz erkennt das Produkt an diesen Wörtern. Kommt keines davon auf der Seite vor, ergänze das Wort in der Kurzbeschreibung oder der Kategorie.
- Wenn ein Performance-Plugin JavaScript bis zu einer Interaktion verzögert, nimm das DecorViz-Script von dieser Verzögerung aus und teste erneut.
Das falsche Bild wird gewählt oder der Button sitzt falsch
Prüfe, dass die Plattform auf WooCommerce eingestellt ist, und probiere eine andere Produktseite. Prüfe die Einstellung zur Button-Platzierung. Machen eine eigene Galerie oder ein Page Builder weiterhin Probleme, kontaktiere DecorViz mit der Live-Produkt-URL, dem Namen deines Themes und der Galerie oder dem Page Builder, den du nutzt.
Das Widget öffnet sich, aber die Vorschau schlägt fehl
Prüfe deinen Storefront-Zugang und deine verbleibenden Credits. Versuche es mit einem klaren Raumfoto und prüfe, dass das Produktbild geladen wird. Besteht das Problem weiter, sende die Produkt-URL und die Fehlermeldung an den Support.
Der Button erscheint zweimal
Prüfe, ob das Script an zwei Stellen eingefügt wurde, zum Beispiel in WPCode und im Footer deines Themes. Behalte eine Installation, entferne das Duplikat, leere deine Caches und lade neu.
Du brauchst Hilfe mit deinem Theme
Kontaktiere uns mit der URL deiner Live-Produktseite, dem Namen deines WordPress-Themes und einem Screenshot des Problems. Nenne auch den Page Builder oder das Galerie-Plugin, das du nutzt, damit wir das richtige Layout prüfen können.
Häufige Fragen
Muss ich jedes Produkt einzeln einrichten?
Nein. Das Script für die ganze Website erkennt unterstützte Produktseiten automatisch. Erkannte Produkte und Ausschlüsse prüfst du im Dashboard.
Brauche ich 3D-Modelle?
Nein. DecorViz nutzt die Produktfotos, die bereits auf deinen Produktseiten sind, und ein Raumfoto, das der Kunde hochlädt.
Kann ich ein anderes WordPress-Plugin für Scripts nutzen?
Ja. Nutze ein Tool, das das vollständige HTML-Script akzeptiert und es auf der gesamten öffentlichen Shop-Website einfügt. Prüfe, dass das Script auf deinen Produktseiten ankommt.
Wie entferne ich Storefront?
Entferne nur das DecorViz-Script aus dem Footer-Feld oder von der Stelle, an der es installiert ist, speichere und leere deine Caches. Der Button verschwindet, sobald die aktualisierten Seiten ausgeliefert werden.
Was passiert, wenn ich meinen Installationsschlüssel erneuere?
Der alte Schlüssel funktioniert nicht mehr. Ersetze das installierte Script sofort durch das neue Script aus dem Dashboard, leere dann die Caches und teste erneut.
Weitere Dashboard-Einstellungen findest du im allgemeinen Storefront-Einrichtungsleitfaden. Für Shopify nutze den Leitfaden zur Shopify-App.
Verbinde deinen WooCommerce-Shop
Hol dir dein Installations-Snippet und biete auf deinen Produktseiten eine Raumvorschau an.