Ü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.
Es funktioniert mit Shopify, WooCommerce, Wix, Squarespace oder einer individuell programmierten Website. Es gibt keinen Dashboard-Schritt pro Produkt: Sobald das Script live ist, ist jede Produktseite in deinem Shop abgedeckt.
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
Gehe zu deinem DecorViz Storefront-Dashboard. Du siehst drei Tabs in der Seitenleiste: Storefront, Produkte und Einstellungen. Beginne mit dem Storefront-Tab.
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 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).
Erstelle deinen Storefront
Gib die Domain deines Shops ein, wähle die Plattform, und erhalte dein Installations-Script mit einem Klick.
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
Gehe zum Tab Einstellungen, um fein abzustimmen, wie DecorViz Produkte erkennt und wie der Button aussieht. Die Standardwerte funktionieren für die meisten Shops gut, aber es lohnt sich, sie vor dem Livegang zu überprüfen.
Erkennungseinstellungen
Bestätige, dass der Plattformmodus zu deinem Shop passt (oder belasse ihn auf Automatisch erkennen). Passe Min. Konfidenz bei Bedarf an: niedrigere Werte erfassen mehr Produktseiten, riskieren aber, den Button auf Nicht-Produktseiten anzuzeigen; höhere Werte sind strenger. 0,50 ist der empfohlene Standardwert.
Erkennung
Button-Platzierung & Erscheinungsbild
Platzierung
- Modus: Automatisch (verankert nahe "In den Warenkorb"), Unterhalb des Produktbilds, Schwebend in einer unteren Ecke, oder ein individueller CSS-Selektor für einen bestimmten Ankerpunkt.
- Einfügeposition (nur bei ankerbasierten Modi): davor, danach, oder innerhalb dieses Elements angehängt.
Erscheinungsbild
- Button-Text
- Form: Abgerundet oder Eckig
- Stil: Gefüllt oder Umriss
- Schatten: ein oder aus
- Farbe: Palettenfarbe oder deine eigene individuelle Farbe
Form und Stil werden live in der Vorschau angezeigt: Die Auswahlfelder selbst zeigen die Eckenrundung und Füllung, die du wählst.
Button-Platzierung & Erscheinungsbild
Ausgeschlossene Kategorien
Unterhalb der Button-Einstellungen kannst du jede Produktkategorie ankreuzen, für die der "In deinem Zimmer ansehen"-Button in deinem Katalog keinen Sinn ergibt, zum Beispiel Geschenkkarten, Zubehör oder Ersatzteile. Der Button wird auf Produkten, die zu einer ausgeschlossenen Kategorie passen, nicht angezeigt.
Ausgeschlossene Kategorien
Angekreuzte Kategorien sind ausgeschlossen, der Button wird für passende Produkte nicht angezeigt.
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
Noch im Tab Einstellungen, scrolle nach "Änderungen speichern" hinunter zur Karte Installations-Script und klicke auf "Kopieren". Du bist jetzt bereit für Teil 2.
Installations-Script
Füge dies einmalig innerhalb des </body>-Tags deines Themes ein. Ein Script deckt automatisch alle Produktseiten ab.
Der Einstellungen-Tab hat aus Sicherheitsgründen auch einen "Schlüssel erneuern"-Button. Die Erneuerung macht den alten Schlüssel sofort ungültig, sodass der Button in deinem Shop nicht mehr erscheint, bis du das Script mit dem neuen Schlüssel aktualisierst. Erneuere nur, wenn du bereit bist, sofort neu zu deployen.
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
Theme-Code-Editor öffnen
Gehe in deinem Shopify-Adminbereich zu Online Store → Themes, klicke dann auf das "⋯"-Menü neben deinem Live-Theme und wähle "Code bearbeiten".
theme.liquid öffnen
Öffne in der Dateiliste unter Layout die Datei theme.liquid. Diese Datei umschließt jede Seite deines Shops, weshalb sie der richtige Ort für ein website-weites Script ist.
Einfügen & Speichern
Füge dein DecorViz-Installations-Script direkt vor dem schließenden </body>-Tag ein, klicke dann auf "Speichern". Da das Script über diese eine Datei auf jeder Seite läuft, musst du theme.liquid für neue Produkte nie wieder anfassen.
Der "In deinem Zimmer ansehen"-Button erscheint jetzt automatisch auf jeder Produktseite in deinem Shopify-Shop.
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 | Gehe zu Einstellungen → Erweitert → Code-Injection, füge das Script in das Feld Footer ein, und speichere. |
| 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.
Erkannte Produkte verwalten
Der Tab Produkte listet jede Seite auf, auf der der Button erschienen ist, zusammen mit Kategorie, Ansichtszahl, Datum der letzten Erkennung, dem erkannten Bild, und einem Schalter, um den Button für diese bestimmte Seite auszuschalten.
- Eine Seite ausschalten: Nutze dies für Produkte, die du nicht visualisiert haben möchtest, zum Beispiel eingestellte oder ausverkaufte Artikel. Die Änderung gilt sofort beim nächsten Laden der Seite.
- Eine URL manuell hinzufügen: Wenn du eine Seite verwalten möchtest, bevor ein Kunde die Erkennung ausgelöst hat, füge die Produkt-URL direkt über "Produkt-URL hinzufügen" oben im Tab ein.
- Aktualisieren: Nutze die Aktualisieren-Funktion, um die neuesten erkannten Seiten und Statistiken abzurufen, ohne das Dashboard neu zu laden.
Produkt-URL manuell hinzufügen
Füge die URL einer beliebigen Produktseite ein, um ihren Button zu verwalten, ohne auf die automatische Erkennung zu warten.
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 den Produkte-Tab, 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 (theme.liquid, footer.php, website-weite Code-Injection), nicht auf einer einzelnen Seite
- Prüfe, ob "Storefront aktivieren" im Einstellungen-Tab eingeschaltet ist
- Bestätige, dass die Domain in den 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 Einstellung Min. Konfidenz leicht ab, oder lege den Plattformmodus statt Auto explizit fest
- Prüfe, dass das Produkt nicht in einer ausgeschlossenen Kategorie ist
- Prüfe, dass die Seite nicht im Produkte-Tab ausgeschaltet wurde
- Wenn dein Theme stark angepasst ist, wechsle die Button-Platzierung zu einem individuellen CSS-Selektor
Button erscheint auf Nicht-Produktseiten
- Erhöhe die Einstellung Min. Konfidenz
- 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.
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 im Produkte-Tab aus, oder schließe ganze Kategorien (wie Teppiche, Beleuchtung oder Wandkunst) in den Einstellungen aus.
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?
Ja. Die generische Erkennung deckt die meisten E-Commerce-Themes ab, und du kannst in den Einstellungen einen individuellen CSS-Selektor festlegen, falls dein Theme eine präzise Platzierung benötigt.
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.