Overview
DecorViz Storefront adds a "See in Your Room" button to your product pages automatically. You install one script tag once, site-wide, and the runtime detects product pages on its own, pulls the product photo directly from the page, and places the button near your Add to Cart button.
It works with Shopify, WooCommerce, Wix, Squarespace, or a custom-coded site. There is no dashboard step for each product: once the snippet is live, every product page on your store is covered.
Storefront is included with the Storefront plan. Go to Storefront to get started.
Prerequisites
Before you begin, make sure you have:
- Storefront Subscription: Storefront is only available on an active Storefront plan. Check your plan or upgrade if needed.
- An online store: Any ecommerce platform or website with product pages.
- Access to your theme or site code: You'll need to paste one script tag into a global template (theme file, footer, or code injection panel), not just a single page.
Storefront reads the product image straight from the page the shopper is viewing. As long as your product pages already show a clear photo of the item, there's nothing extra to upload.
Part 1: DecorViz Storefront Setup
Head to your DecorViz Storefront dashboard. You'll see three tabs in the sidebar: Storefront, Products, and Settings. Start with the Storefront tab.
Step 1: Create Your Storefront
Each DecorViz account can run one storefront at a time, tied to one website domain. The first time you visit, you'll be asked to create it.
Enter Your Domain
Type your store's domain without "https://" or a trailing slash, for example yourstore.com.
Choose a Platform
Pick Auto detect, Shopify, WooCommerce, or Generic / custom. Auto detect works for most stores and is the recommended starting point; you can change this later in Settings if detection needs tuning.
Set Domain Matching
Choose Exact domain if the button should only run on that one domain, or Include subdomains if you also serve product pages from subdomains (for example a separate shop.yourstore.com).
Create your storefront
Enter your shop domain, choose the platform, and get your install snippet in one click.
Each DecorViz account supports one storefront and one domain. If you need to enable visualization on a second website, you'll need a separate account.
Step 2: Configure Detection & Button
Go to the Settings tab to fine-tune how DecorViz detects products and how the button looks. The defaults work well for most stores, but it's worth reviewing these before you go live.
Detection Settings
Confirm the Platform mode matches your store (or leave it on Auto detect). Adjust Min. confidence if needed: lower values catch more product pages but risk showing the button on non-product pages; higher values are stricter. 0.50 is the recommended default.
Detection
Button Placement & Appearance
Placement
- Mode: Automatic (anchored near Add to Cart), Below the product image, Floating in a bottom corner, or a Custom CSS selector for a specific anchor point.
- Insertion position (anchor-based modes only): before, after, or appended inside that element.
Appearance
- Button text
- Shape: Rounded or Square
- Style: Filled or Outline
- Shadow: on or off
- Color: palette swatch or your own custom color
Shape and Style preview live, the option boxes themselves show the corner rounding and fill you're choosing.
Button Placement & Appearance
Excluded Categories
Below button settings, check off any product category where the "See in Your Room" button doesn't make sense for your catalog, for example gift cards, accessories, or spare parts. The button won't show on products that match an excluded category.
Excluded Categories
Checked categories are excluded, the button won't show for matching products.
Step 3: Copy the Install Snippet
Once you've configured detection and button settings and saved, DecorViz generates a single install snippet tied to your account's install key and current configuration. This is the only code you need to add to your store.
Copy Your Snippet
Still on the Settings tab, scroll down past "Save changes" to the Install snippet card and click "Copy." You're now ready for Part 2.
Install snippet
Paste this once inside your theme's </body> tag. One snippet covers all product pages automatically.
The Settings tab also has a "Rotate key" button for security purposes. Rotating immediately invalidates the old key, so the button will stop appearing on your store until you update the snippet with the new key. Only rotate when you're ready to redeploy right away.
Part 2: Your Store Website Setup
Paste the snippet from Step 3 into your store once, in a place that loads on every page (a global theme file, footer, or code-injection panel). Do not place it on a single product page only, the runtime needs to run site-wide to detect and cover every product.
Shopify
Open the Theme Code Editor
In your Shopify admin, go to Online Store → Themes, then click the "⋯" menu next to your live theme and choose "Edit code."
Open theme.liquid
In the file list under Layout, open theme.liquid. This file wraps every page on your store, which is why it's the right place for a site-wide snippet.
Paste & Save
Paste your DecorViz install snippet right before the closing </body> tag, then click "Save." Because the script runs on every page through this one file, you never have to touch theme.liquid again for new products.
The "See in Your Room" button now appears automatically on every product page across your Shopify store.
WooCommerce
WooCommerce runs on WordPress, so the snippet goes in your theme's global footer, not a single product.
Use a Header/Footer Plugin (Recommended)
Install a lightweight plugin such as "Insert Headers and Footers" or "WPCode." Paste the DecorViz snippet into the Footer scripts field and save. This keeps the snippet safe from theme updates.
Or Edit footer.php Directly
If you prefer editing theme files, go to Appearance → Theme File Editor, open footer.php, and paste the snippet just before the closing </body> tag. Use a child theme if you want the change to survive theme updates.
Code added here will be loaded just before the closing </body> tag, on every page of your site.
The button now appears on every WooCommerce product page, detected automatically using your product gallery image and Add to Cart button.
Wix, Squarespace & Other Platforms
The snippet is standard HTML. It works anywhere you can add custom code that loads on every page.
| Platform | How to add the snippet |
|---|---|
| Wix | In the Wix Editor, go to Settings → Custom Code, add new code, set it to load on all pages in the Body - end position, and paste the snippet. |
| Squarespace | Go to Settings → Advanced → Code Injection, paste the snippet into the Footer field, and save. |
| Webflow | Go to Project Settings → Custom Code → Footer Code, paste the snippet so it applies site-wide, and publish. |
| Custom HTML site | Add the snippet to the shared layout or template that every page includes, just before the closing </body> tag. |
| Other platforms | Look for a "custom code," "tracking scripts," or "footer code" option that applies globally, and paste the snippet there. |
Unlike a tracking pixel you might add to one landing page, this snippet needs to load on every product page. Use a global template, footer, or "all pages" code-injection setting, not a single-page embed.
Managing Detected Products
The Products tab lists every page where the button has appeared, along with category, view count, last seen date, the detected image, and a toggle to turn the button off for that specific page.
- Toggle off a page: Use this for products you don't want visualized, for example discontinued or out-of-stock items. The change applies immediately on the next page load.
- Add a URL manually: If you want to manage a page before a shopper has triggered detection on it, paste the product URL directly using "Add product URL" at the top of the tab.
- Refresh: Use the refresh control to pull the latest detected pages and stats without reloading the dashboard.
Add product URL manually
Paste any product page URL to manage its button without waiting for auto-detection.
A page only appears in the Products list once the button has actually been shown there. If you don't see a product you expect, visit that page yourself to trigger detection, or add the URL manually.
Testing Your Installation
After saving the snippet, verify everything is working before telling customers:
- Visit a few live product pages across different templates (a simple item, a variant-heavy item, and anything custom-built).
- Confirm the button appears in the expected spot with your chosen text, color, and style.
- Check the Products tab to confirm those pages were detected and recorded.
- Run a full test generation: click the button, upload a room photo, and confirm the result renders correctly.
- Visit a non-product page (your homepage or a blog post) and confirm the button does not appear.
- Test on mobile. Many shoppers browse on their phones.
Make sure you're viewing the live store URL, not the theme editor or a draft preview. Also confirm the domain in your Storefront settings matches your store's domain exactly (no https://, no trailing slash, and check the subdomain matching setting).
Troubleshooting
Button not appearing anywhere
- Confirm the snippet is in a global template (theme.liquid, footer.php, site-wide code injection), not a single page
- Check that "Enable storefront" is on in the Settings tab
- Confirm the domain in Settings matches your live store domain exactly
- If you recently rotated your install key, make sure the live snippet uses the new key
- Clear your browser cache and reload the page
Button not appearing on a specific product page
- Lower the Min. confidence setting slightly, or set Platform mode explicitly instead of Auto
- Check that the product isn't in an Excluded Category
- Check that the page wasn't toggled off in the Products tab
- If your theme is heavily customized, switch Button Placement to a custom CSS selector
Button appears on non-product pages
- Raise the Min. confidence setting
- Set Platform mode explicitly rather than Auto detect
Wrong or missing product image
- The runtime pulls the main product image directly from the page; confirm that image loads normally for shoppers (not lazy-loaded behind a click)
- If your theme uses an unusual image structure, contact support so we can review your gallery markup
Button appears but generation doesn't work
- Confirm your Storefront subscription is active
- Confirm you have visualization credits remaining
Contact our support team at [email protected] or use the chat in your DecorViz dashboard.
Frequently Asked Questions
Do I need to set up a widget for each product?
No. Storefront uses one site-wide snippet. The runtime detects product pages and the product image automatically, including new products you add after installing.
How many storefronts can I create?
One per DecorViz account, tied to one domain. If you run multiple stores, each needs its own account.
Can I hide the button on specific products?
Yes. Toggle individual pages off in the Products tab, or exclude entire categories (like rugs, lighting, or wall art) in Settings.
What happens if I rotate my install key?
The old key stops working immediately. The button will disappear from your store until you update the live snippet with the new key, so only rotate when you're ready to redeploy right away.
Does it work on platforms other than Shopify and WooCommerce?
Yes. Generic detection covers most ecommerce themes, and you can set a custom CSS selector in Settings if your theme needs precise placement.
Can merchants see shopper room photos?
No. Shopper room photos are used only to generate the preview. Merchants do not see, browse, or download those room photos from the Storefront dashboard.
Does it use my visualization credits?
Yes, each visualization a shopper completes uses credits from your Storefront plan allowance.
Will this slow down my store?
No. The script loads asynchronously and doesn't block your page from rendering.
Ready to Get Started?
Install Storefront once and let DecorViz handle product detection across your entire store.