Overview
DecorViz Storefront lets you add a "See in Your Room" button directly on your product pages. When customers click it, they can visualize your furniture in their own space using DecorViz AI.
It works with any website or ecommerce platform: Shopify, WooCommerce, Wix, Squarespace, or a custom-coded site. You copy a small snippet from your DecorViz dashboard and paste it onto your product page.
Storefront is exclusively available to Ultra tier subscribers. Go to Storefront to get started.
Prerequisites
Before you begin, make sure you have:
- Ultra Tier Subscription: Storefront is only available on the Ultra plan. Check your plan or upgrade if needed.
- An online store: Any ecommerce platform or website where you want to add the button.
- Product image: A clear, well-lit photo of your product (JPG, PNG, or WebP, up to 5MB).
Use a simple, well-lit photo where the product is clearly visible. A clean background works best for room visualizations.
Part 1: DecorViz Storefront Setup
Head to your DecorViz Storefront page. You'll see three tabs in the sidebar: Storefront, Products, and Settings. Start with Settings.
Step 1: Activate Storefront
Open the Settings Tab
Go to your DecorViz Storefront page and click the Settings tab in the sidebar.
Enable Storefront
Toggle the "Enable Storefront" switch to ON. This activates the storefront widget so it can appear on your store.
Step 2: Add Your Domain
You need to tell DecorViz which website can show your widget. This prevents anyone else from using your embed code on unauthorized sites.
Enter Your Store Domain
Still in the Settings tab, find the "Allowed Domain" field. Enter your store's domain, for example yourstore.com, and click "Save".
Allowed Domain
Enter the domain where the widget will be used. The widget will only work on this domain.
Enter your domain without "https://" or trailing slashes. For example: yourstore.com, not https://yourstore.com/
Step 3: Create & Customize Your Widget
Each widget is built for one specific product. You can start in two ways:
- From the Storefront tab: Click the Storefront tab directly. The widget builder opens and you can fill in the fields at your own pace.
- From the Products tab: Go to the Products tab and click "Create Product." This takes you to the Storefront tab with the image upload dialog already open, so you can start uploading right away.
Either way, you end up on the same screen. Here is what to fill in:
Name Your Product
Enter a Product Name so you can identify this widget later in your Products list. Use something descriptive, for example "Pink Sofa - 3 Seat" or "Oak Dining Table Round."
Upload Your Product Image
Click "Upload product photo" and select a clear photo of your product. The AI uses this image to place the item into your customer's room photo.
Customize the Button
Set the button text (for example, "See in Your Room"), then pick a button color from the color palette to match your brand. Finally, choose a button style: Filled for a solid button or Outline for a bordered look. The live preview on the right updates as you make each change.
Below the button settings, there is an optional Custom AI Prompt field. Use it if you want to give the AI extra context about your product, for example: "A handwoven wool area rug, 6x9 feet" or "A wooden corner shelf for kitchen storage." The AI will use this to place the product more accurately in the room.
Customize Your Widget
Set your product image and button style. Preview updates in real-time. Then get your widget code to add to your store.
Step 4: Copy Your Widget
Once your widget looks right in the preview, generate it and copy it to your clipboard. That is what you will paste into your store.
Generate and Copy
Click "Generate", then click "Copy Widget". Your widget is now copied and ready to paste. You are all set for Part 2.
Ready to add to your store?
Generate and copy the widget code
Part 2: Your Store Website Setup
Paste the copied widget onto your product page. The exact steps depend on your platform. The most common ones are covered below. The idea is the same everywhere: find a way to add custom HTML to your product page and paste the widget there.
Shopify
Open Shopify Theme Customizer
In your Shopify admin, go to Online Store → Themes → Customize. Switch to a Product page template.
Add a Custom Liquid Block
In the left sidebar under "Product information", click "+ Add block" and choose "Custom Liquid".
Paste & Save
Click the Custom Liquid block to open its settings. Paste your DecorViz widget code into the "Liquid code" field. Drag the block below the "Add to cart" button, then click "Save".
Your "See in Your Room" button is now live on your product page. Customers can click it to visualize the furniture in their own space.
WooCommerce, Wix, Squarespace & Other Platforms
The widget is standard HTML. It works anywhere you can add HTML to a page.
| Platform | How to add the widget code |
|---|---|
| WooCommerce | Edit your product page in WordPress. Add an HTML block (or in Classic Editor, switch to the Text tab) and paste the code. |
| Wix | In Wix Editor, add an Embed → HTML iframe element to your product page and paste the code inside it. |
| Squarespace | Edit your product page and add a Code Block. Paste the widget code into it and save. |
| Custom HTML site | Open your product page's HTML and paste the widget code just before the closing </body> tag. |
| Other platforms | Look for a "custom HTML" or "code embed" option on your product page. Paste the widget code there. |
The widget code is a small HTML snippet. Any platform that supports custom HTML on a product page will work with DecorViz Storefront.
Testing Your Button
After saving, verify everything is working:
- Visit your live product page. Use the actual live URL, not the editor preview.
- Check the button appears with your chosen color and text.
- Click the button and complete a test visualization.
- Test on mobile. Many customers shop on their phones.
Make sure you're viewing the live store URL, not the editor or preview mode. Also check that the domain you entered in DecorViz Settings exactly matches your store's domain (no https://, no trailing slash).
Troubleshooting
Button not appearing
- The domain in DecorViz Settings must match your store domain exactly
- Make sure Storefront is enabled in the Settings tab
- Confirm the widget code was saved correctly in your store
- Clear your browser cache and reload the page
Button appears but doesn't work
- Confirm your Ultra subscription is active
- Check that the product image was uploaded successfully
- Make sure you copied the complete widget code
Wrong product image showing
- Each widget is tied to one product. Use the correct widget for each page.
- Generate a new widget code to change the product image
Widget works on one page but not another
- Generate a separate widget code for each product page
- Each page needs its own embed code with the product image baked in
Contact our support team at [email protected] or use the chat in your DecorViz dashboard.
Frequently Asked Questions
Do I need one widget code per product?
Yes. Each widget code is tied to a specific product image. Generate a separate code for each product you want to enable visualization on.
Can I add multiple websites to the same account?
No. Each DecorViz account supports one storefront domain. If you need to enable visualization on a second website, you will need a separate account.
Does it work on any ecommerce platform?
Yes. The widget is standard HTML and works on any platform that allows custom HTML on product pages: Shopify, WooCommerce, Wix, Squarespace, Webflow, or a custom-coded site.
Can I use different button styles on different products?
Yes! Each widget code has its own button color, style, and text settings. Customize them independently for each product.
Will this slow down my store?
No. The widget loads asynchronously and doesn't block your page. It adds less than 50KB to your page weight.
What happens when customers click the button?
They'll be prompted to upload a photo of their room. The AI then places your product in their space so they can see exactly how it looks.
Does it use my visualization credits?
Yes, each visualization performed by your customers uses credits from your Ultra plan allowance.
Ready to Get Started?
Add room visualization to your online store and help customers see your products in their own space.