Uberblick
DecorViz Storefront ermoeg licht es dir, einen "Im Zimmer ansehen"-Button direkt auf deinen Produktseiten einzubinden. Wenn Kunden darauf klicken, koennen sie dein Moebel mit DecorViz AI in ihrem eigenen Zimmer visualisieren.
Es funktioniert mit jeder Website oder E-Commerce-Plattform: Shopify, WooCommerce, Wix, Squarespace oder einer individuell programmierten Website. Du kopierst einen kleinen Snippet aus deinem DecorViz-Dashboard und fuegst ihn auf deiner Produktseite ein.
Storefront ist ausschliesslich fuer Ultra-Abonnenten verfuegbar. Zum Storefront um loszulegen.
Voraussetzungen
Stelle vor dem Start sicher, dass du Folgendes hast:
- Ultra-Abonnement: Storefront ist nur im Ultra-Plan verfuegbar. Pruefe deinen Plan oder fuehre ein Upgrade durch, falls noetig.
- Ein Onlineshop: Jede E-Commerce-Plattform oder Website, auf der du den Button einbinden moechtest.
- Produktbild: Ein klares, gut beleuchtetes Foto deines Produkts (JPG, PNG oder WebP, bis zu 5 MB).
Verwende ein einfaches, gut beleuchtetes Foto, auf dem das Produkt klar sichtbar ist. Ein neutraler Hintergrund liefert die besten Ergebnisse fuer Zimmervisualisierungen.
Teil 1: DecorViz Storefront einrichten
Gehe zu deiner DecorViz Storefront-Seite. Dort findest du drei Tabs in der Seitenleiste: Storefront, Produkte und Einstellungen. Beginne mit den Einstellungen.
Schritt 1: Storefront aktivieren
Einstellungen-Tab oeffnen
Gehe zu deiner DecorViz Storefront-Seite und klicke in der Seitenleiste auf den Tab Einstellungen.
Storefront aktivieren
Schalte den Schalter "Storefront aktivieren" auf EIN. Dadurch wird das Storefront-Widget aktiviert, damit es in deinem Shop erscheinen kann.
Schritt 2: Domain hinzufuegen
Du musst DecorViz mitteilen, welche Website dein Widget anzeigen darf. So wird verhindert, dass andere deinen Code auf nicht autorisierten Seiten verwenden.
Shop-Domain eingeben
Im Einstellungen-Tab findest du das Feld "Erlaubte Domain". Gib die Domain deines Shops ein, zum Beispiel deinshop.com, und klicke auf "Speichern".
Erlaubte Domain
Gib die Domain ein, auf der das Widget verwendet wird. Das Widget funktioniert nur auf dieser Domain.
Gib deine Domain ohne "https://" und ohne abschliessendem Schraegstrich ein. Zum Beispiel: deinshop.com und nicht https://deinshop.com/
Schritt 3: Widget erstellen und anpassen
Jedes Widget wird fuer ein bestimmtes Produkt erstellt. Du kannst auf zwei Wegen starten:
- Ueber den Storefront-Tab: Klicke direkt auf den Tab Storefront. Der Widget-Builder oef fnet sich und du kannst die Felder in deinem eigenen Tempo ausf uell en.
- Ueber den Produkte-Tab: Gehe zum Tab Produkte und klicke auf "Produkt erstellen". Das bringt dich zum Storefront-Tab, wo der Bild-Upload-Dialog bereits geoef fnet ist, damit du sofort loslegen kannst.
In beiden Faellen landest du auf demselben Bildschirm. Folgendes musst du ausf uell en:
Produkt benennen
Gib einen Produktnamen ein, damit du dieses Widget spaeter in deiner Produktliste wiederfindest. Verwende etwas Beschreibendes, zum Beispiel "Pinkes Sofa - 3-Sitzer" oder "Eichen-Esstisch rund".
Produktbild hochladen
Klicke auf "Produktfoto hochladen" und waehle ein klares Foto deines Produkts. Die KI verwendet dieses Bild, um den Artikel in das Zimmer des Kunden zu platzieren.
Button anpassen
Lege den Button-Text fest (zum Beispiel "Im Zimmer ansehen"), waehle dann eine Button-Farbe aus der Farbpalette, die zu deiner Marke passt. Waehle abschliessend einen Stil: Gefuellt fuer einen soliden Button oder Umriss fuer einen Button mit Rahmen. Die Live-Vorschau rechts aktualisiert sich bei jeder Aenderung.
Unterhalb der Button-Einstellungen gibt es ein optionales Feld Benutzerdefinierter KI-Prompt. Nutze es, um der KI zusaetzlichen Kontext zu deinem Produkt zu geben, zum Beispiel: "Ein handgewebter Wollteppich, 180x270 cm" oder "Ein Holzeckregal fuer die Kueche". Die KI verwendet diese Information, um das Produkt praeziser im Zimmer zu platzieren.
Widget anpassen
Produktbild und Button-Stil festlegen. Die Vorschau aktualisiert sich in Echtzeit. Dann Widget fuer deinen Shop erhalten.
Schritt 4: Widget kopieren
Sobald dein Widget in der Vorschau gut aussieht, generiere es und kopiere es in die Zwischenablage. Das ist das, was du in deinen Shop einfuegst.
Generieren und kopieren
Klicke auf "Generieren", dann auf "Widget kopieren". Dein Widget ist jetzt kopiert und bereit zum Einfuegen. Du bist bereit fuer Teil 2.
Bereit, in deinen Shop einzubinden?
Widget generieren und kopieren
Teil 2: Deinen Shop einrichten
Fuege das kopierte Widget auf deiner Produktseite ein. Die genauen Schritte haengen von deiner Plattform ab. Die gaengigsten sind unten beschrieben. Die Idee ist ueberall dieselbe: Finde eine Moeg lichkeit, benutzerdefiniertes HTML zu deiner Produktseite hinzuzufuegen und das Widget dort einzufuegen.
Shopify
Shopify Theme-Customizer oeffnen
Gehe in deinem Shopify-Adminbereich zu Online Store → Themes → Anpassen. Wechsle zu einer Produktseiten-Vorlage.
Custom Liquid-Block hinzufuegen
Klicke in der linken Seitenleiste unter "Produktinformationen" auf "+ Block hinzufuegen" und waehle "Custom Liquid".
Einfuegen und speichern
Klicke auf den Custom Liquid-Block, um seine Einstellungen zu oeffnen. Fuege dein DecorViz-Widget in das Feld "Liquid-Code" ein. Ziehe den Block unter den "In den Warenkorb"-Button und klicke auf "Speichern".
Dein "Im Zimmer ansehen"-Button ist jetzt auf deiner Produktseite aktiv. Kunden koennen darauf klicken, um das Moebel in ihrem eigenen Zimmer zu visualisieren.
WooCommerce, Wix, Squarespace und andere Plattformen
Das Widget ist Standard-HTML. Es funktioniert ueberall, wo du HTML zu einer Seite hinzufuegen kannst.
| Plattform | So fueges du das Widget ein |
|---|---|
| WooCommerce | Bearbeite deine Produktseite in WordPress. Fuege einen HTML-Block hinzu (oder wechsle im klassischen Editor auf den Tab Text) und fuege den Code ein. |
| Wix | Fuege im Wix Editor ein Element Einbetten → HTML-iFrame auf deiner Produktseite hinzu und fuege den Code darin ein. |
| Squarespace | Bearbeite deine Produktseite und fuege einen Code-Block hinzu. Fuege das Widget in den Block ein und speichere. |
| Benutzerdefinierte HTML-Website | Oeffne das HTML deiner Produktseite und fuege das Widget direkt vor dem schliessenden </body>-Tag ein. |
| Andere Plattformen | Suche nach einer Option "Benutzerdefiniertes HTML" oder "Code einbetten" auf deiner Produktseite. Fuege das Widget dort ein. |
Das Widget ist ein kleiner HTML-Snippet. Jede Plattform, die benutzerdefiniertes HTML auf einer Produktseite unterstuetzt, funktioniert mit DecorViz Storefront.
Deinen Button testen
Ueberpruefe nach dem Speichern, dass alles funktioniert:
- Besuche deine Live-Produktseite. Verwende die echte Live-URL, nicht die Editor-Vorschau.
- Pruefe, ob der Button erscheint mit der gewaehlten Farbe und dem Text.
- Klicke auf den Button und fuehre eine Test-Visualisierung durch.
- Teste auf dem Smartphone. Viele Kunden shoppen mit dem Handy.
Stelle sicher, dass du die Live-Shop-URL aufrufst und nicht den Editor oder die Vorschau. Pruefe auch, dass die in den DecorViz-Einstellungen eingegebene Domain genau mit der Domain deines Shops uebereinstimmt (ohne https://, ohne abschliessenden Schraegstrich).
Fehlerbehebung
Button wird nicht angezeigt
- Die Domain in den DecorViz-Einstellungen muss genau mit der Shop-Domain uebereinstimmen
- Stelle sicher, dass Storefront im Einstellungen-Tab aktiviert ist
- Bestaet ige, dass das Widget korrekt in deinem Shop gespeichert wurde
- Leere den Browser-Cache und lade die Seite neu
Button erscheint, funktioniert aber nicht
- Bestaet ige, dass dein Ultra-Abonnement aktiv ist
- Pruefe, ob das Produktbild erfolgreich hochgeladen wurde
- Stelle sicher, dass du das vollstaendige Widget kopiert hast
Falsches Produktbild wird angezeigt
- Jedes Widget ist mit einem Produkt verknuepft. Verwende das richtige Widget fuer jede Seite.
- Generiere ein neues Widget, um das Produktbild zu aendern
Widget funktioniert auf einer Seite, aber nicht auf einer anderen
- Generiere fuer jede Produktseite ein eigenes Widget
- Jede Seite benoetigt ihren eigenen Widget-Code mit dem eingebetteten Produktbild
Wende dich an unser Support-Team unter [email protected] oder nutze den Chat in deinem DecorViz-Dashboard.
Haeufige Fragen
Benoet ige ich einen Widget-Code pro Produkt?
Ja. Jeder Widget-Code ist mit einem bestimmten Produktbild verknuepft. Generiere einen eigenen Code fuer jedes Produkt, auf dem du die Visualisierung aktivieren moechtest.
Kann ich mehrere Websites demselben Konto hinzufuegen?
Nein. Jedes DecorViz-Konto unterstuetzt eine einzige Storefront-Domain. Wenn du die Visualisierung auf einer zweiten Website aktivieren moechtest, benoeligst du ein separates Konto.
Funktioniert es auf jeder E-Commerce-Plattform?
Ja. Das Widget ist Standard-HTML und funktioniert auf jeder Plattform, die benutzerdefiniertes HTML auf Produktseiten erlaubt: Shopify, WooCommerce, Wix, Squarespace, Webflow oder eine individuell programmierte Website.
Kann ich verschiedene Button-Stile fuer verschiedene Produkte verwenden?
Ja. Jeder Widget-Code hat seine eigenen Einstellungen fuer Button-Farbe, -Stil und -Text. Passe sie fuer jedes Produkt unabhaengig an.
Wird mein Shop dadurch langsamer?
Nein. Das Widget laedt asynchron und blockiert deine Seite nicht. Es fuegt weniger als 50 KB zum Seitengewicht hinzu.
Was passiert, wenn Kunden auf den Button klicken?
Sie werden aufgefordert, ein Foto ihres Zimmers hochzuladen. Die KI platziert dann dein Produkt in ihrem Raum, damit sie genau sehen, wie es aussieht.
Werden dadurch meine Visualisierungs-Credits verbraucht?
Ja, jede Visualisierung deiner Kunden verbraucht Credits aus deinem Ultra-Plan-Kontingent.
Bereit loszulegen?
Fuege Zimmervisualisierung zu deinem Onlineshop hinzu und hilf deinen Kunden, deine Produkte in ihrem eigenen Raum zu sehen.