Loading WardrobeIt
Merchant Login Book a Demo

Install the Storefront Widget

Install the Storefront Widget

Add WardrobeIt to your ecommerce storefront so shoppers can discover products, receive catalog-only recommendations, ask product questions, compare suitable options, and complete supported cart actions.

Open Widget Installation Preview Setup Checklist

This guide walks you through the complete installation journey: Check Readiness Choose Installation Method Configure Experience Test and Publish

  • Current supported installation Shopify theme snippet
  • Planned or reviewed separately WooCommerce and custom ecommerce
WardrobeIt Shopping Assistant
Catalog only

Hi, I can help you find products, compare options, answer product questions, and build a complete look from this store.

  • Help me find an outfit for an evening event
  • Show me products under $150
  • What goes with this item?

Page summary

The storefront widget adds the shopper-facing assistant so visitors can use guided discovery, Product Q&A, catalog-only recommendations, Complete the Look, eligible Virtual Try-On, and supported Add to Cart — without leaving your store.

  • Discovery

    Guided product finding from your catalog

  • Product Q&A

    Answers from merchant-approved knowledge

  • Recommendations

    Catalog-only matches, never competitor stock

  • Complete the Look

    Outfit building from your assortment

  • Virtual Try-On

    Eligible try-on where the feature is enabled

  • Add to Cart

    Valid cart actions stay on your checkout

Before Installing the Widget

Confirm That Your Store Is Ready

Complete the required store, catalog, assistant, brand, knowledge, and test-access setup before placing WardrobeIt on the storefront. Installing the widget before the underlying catalog and merchant information are ready may create incomplete product results, missing answers, or failed cart actions.

Ecommerce store connected

WardrobeIt must connect with the ecommerce store that contains the products shoppers will see.

Ready when:

  • The correct store is connected
  • The connection is active
  • No authentication issue appears
Ready / Action Required

Product catalog synchronized

WardrobeIt must have access to supported products, collections, variants, prices, images, and applicable availability information.

Ready when:

  • The most recent synchronization is complete
  • Priority products appear inside WardrobeIt
  • Product and variant issues have been reviewed
Ready / Needs Review / Action Required

Assistant configuration completed

Review the currently available assistant settings before installation.

Confirm:

  • Correct merchant workspace
  • Enabled shopper capabilities
  • Merchant-approved actions
  • Catalog product retrieval
Ready / Needs Review

Brand settings added

Review available shopper-facing settings.

Confirm:

  • Welcome message
  • Brand name
  • Approved tone and terminology
  • Available appearance settings
  • Suggested shopper prompts

Only use controls that appear in the active Merchant Portal.

Ready / Needs Review

Product and store knowledge reviewed

Test approved answers involving:

  • Product details
  • Materials
  • Care
  • Sizing and fit information
  • Shipping
  • Returns
  • Exchanges
  • Store policies

WardrobeIt should state when merchant-approved information is unavailable instead of inventing an answer.

Ready / Needs Review / Action Required

Storefront test access available

Use a theme preview, approved test environment, or controlled storefront session before publishing WardrobeIt to all shoppers.

Ready when:

  • The implementation team can preview the storefront
  • Test products and variants are available
  • Cart actions can be validated safely
  • Mobile and desktop testing is possible
Ready / Action Required
Review Installation Readiness Open Merchant Portal Guide

Choose the Installation Method

Select the Setup Path for Your Store

Installation depends on your ecommerce platform and storefront architecture. Use the platform tabs below to review availability, required access, installation location, and next action.

Currently Supported

Add WardrobeIt to a Shopify storefront using the generated widget snippet and merchant key provided through the Merchant Portal.

Required access

You need:

  • Access to the WardrobeIt Merchant Portal
  • Permission to view or generate the approved merchant key
  • Shopify theme access
  • Permission to edit or publish the selected theme
  • A connected and synchronized Shopify store

Before editing the theme

Create a duplicate of the current live theme or confirm that a safe preview theme is available. Do not test an unverified installation directly on the live theme when a preview environment can be used.

Shopify installation steps

  1. Step 1: Open the widget installation area

    Sign in to the Merchant Portal and select the correct store. Open: Storefront Setup → Install Widget. The exact navigation label should match the released Merchant Portal.

  2. Step 2: Select Shopify

    Choose Shopify Theme Embed as the installation method. Confirm that the displayed store domain matches the store being edited.

  3. Step 3: Copy the generated snippet

    Select Copy Widget Snippet. Use the complete snippet generated for the selected merchant workspace. Do not recreate the snippet manually, modify the merchant key, copy a snippet from another store, publish the key in documentation or screenshots, or place the key inside public analytics or support messages. The saved merchant key should remain masked inside the Merchant Portal.

  4. Step 4: Open the Shopify theme

    From Shopify admin, open: Online Store → Themes. Select the theme you want to test. Use Duplicate before editing the live theme where appropriate.

  5. Step 5: Add the WardrobeIt snippet

    Open the theme code editor and add the generated WardrobeIt snippet to the approved theme layout location. For a standard Shopify theme, installation may use the main theme layout near the closing body element. Follow the exact placement instructions displayed with the generated snippet. Do not place multiple copies of the widget snippet in the same storefront.

  6. Step 6: Save and preview

    Save the theme changes, then open the Shopify theme preview. WardrobeIt should load using the selected store, merchant key, catalog, and assistant configuration. Do not publish the theme until the full validation checklist passes.

  7. Step 7: Publish the approved theme

    After desktop, mobile, product, and cart testing is complete, publish the approved theme through Shopify. Publishing remains a merchant action. WardrobeIt should not publish or replace a Shopify theme automatically.

Copy Widget Snippet Preview Shopify Theme View the Shopify Theme Embed Guide

Configure the Storefront Experience

Prepare How WardrobeIt Appears to Shoppers

After the widget is installed in a preview environment, review the shopper-facing experience before publication. The controls available may vary by product implementation, merchant plan, and active Merchant Portal settings. Do not display settings that are not available in the current portal.

Widget position

Choose a supported position that avoids covering important storefront controls. Review the widget beside navigation, cookie notices, accessibility controls, support widgets, cart buttons, and mobile sticky elements.

Recommended preview states: Bottom right · Bottom left, where supported · Closed launcher · Open assistant

Desktop and mobile visibility

Confirm whether the assistant should appear on desktop, tablet, and mobile. The mobile version should not block navigation, product options, Add to Cart, or checkout-related controls. Test each viewport independently.

Welcome message

Use a short, helpful introduction that explains what the shopper can do.

Hi, I can help you find products, compare options, answer product questions, and build a complete look from this store.

Avoid unsupported promotional claims, guaranteed discounts, guaranteed sizing or fit, or claims that the assistant can access information not supplied by the merchant.

Suggested shopper prompts

Use prompts that reflect the store’s real catalog and product knowledge.

  • Help me find an outfit for an evening event
  • Show me products under $150
  • What goes with this item?
  • Compare these two products
  • Help me review the available sizes
  • Show me another color or style

Prompts should guide shoppers without implying unsupported capabilities.

Brand colors and appearance

Apply available WardrobeIt appearance settings while maintaining readable contrast. Review launcher color, assistant header, button states, text contrast, product cards, selected states, error messages, and mobile appearance. Do not alter the interface in a way that hides limitations, product information, or shopper controls.

Opening behavior

Where supported, choose how WardrobeIt initially appears: closed launcher, welcome preview, open after shopper action, or page-specific invitation. Avoid aggressive automatic opening that interrupts product browsing. Only use proactive or campaign-specific behavior when the relevant control is available and approved.

Enabled store pages

Where page targeting is supported, review WardrobeIt on homepage, collection pages, product pages, search or discovery pages, campaign landing pages, and cart page, where appropriate. Do not enable the widget on checkout, account, legal, or restricted pages unless the implementation has been specifically reviewed.

Assistant availability

Confirm correct merchant workspace, correct store, healthy catalog synchronization, required features enabled, and assistant available in the approved environment.

  • Preview Only
  • Available
  • Disabled
  • Needs Configuration
  • Connection Issue

Test and Publish

Validate Every Shopper Journey Before Launch

The widget appearing on the storefront does not mean the implementation is ready. Test the assistant, product information, shopper actions, mobile behavior, and supported analytics before publishing WardrobeIt to live visitors.

Launch test checklist

Status: Not Tested / Passed / Needs Review
  • Widget opens correctlyLauncher position, open/close, no overlap, no duplicate widget
    Not Tested
  • Welcome message appearsApproved message on desktop and mobile — spelling, tone, formatting, length
    Not Tested
  • Products are recommended accuratelyFrom connected catalog, match criteria, explain why each product matches — no competitor products
    Not Tested
  • Product links workEvery result leads to the correct merchant-owned product page
    Not Tested
  • Variants and availability are correctNo invalid combinations; availability reflects synchronized information; merchant platform remains final authority
    Not Tested
  • Product questions receive approved answersDetails, materials, care, size, delivery, returns, policies — state when information is unavailable
    Not Tested
  • Add-to-Cart actions workCorrect product, variant, quantity; merchant cart confirms; shopper continues through existing checkout
    Not Tested
  • Mobile experience is responsiveDoes not block navigation, images, variant selectors, cart controls, cookie notices, or accessibility tools
    Not Tested
  • Supported analytics events are receivedAssistant opened, conversation started, product recommended, product selected, feature used, add-to-cart confirmed — do not require external GA4 unless verified integration is active
    Not Tested

Publish the widget

When all mandatory checks have passed, select Publish to Storefront. Confirm store, theme or deployment environment, active widget configuration, enabled capabilities, known limitations, and publishing owner. The merchant should explicitly approve publication.

Publish to Storefront

Preview the widget

Use Preview Widget to test unpublished changes before they reach live shoppers.

Preview Widget

Disable the widget

Use Disable Widget when a serious product issue appears, store connection fails, cart actions stop working, theme changes unexpectedly, or the merchant needs to pause the experience. Disabling the widget should not remove or damage the merchant’s catalog, theme, or existing checkout.

For a Shopify theme-snippet installation, follow the approved rollback process or remove the generated snippet from the applicable theme location.

Disable Widget
Troubleshoot Installation

Common Installation Issues

Fix Storefront Widget Problems Before Publishing

Use these checks when the widget is not loading, not recommending products, or not completing supported actions.

Review:

  • Selected theme
  • Snippet placement
  • Merchant key
  • Store connection
  • Catalog status
  • Widget availability setting
  • Browser errors
  • Conflicts with another script
  • Preview versus live environment
Open Troubleshooting Guide

FAQs

Common Installation Questions

How do I install an ecommerce chatbot widget with WardrobeIt?

Open the Merchant Portal, confirm store readiness, choose Shopify Theme Embed, copy the generated WardrobeIt widget snippet, add it to the approved Shopify theme location, preview the storefront, test product and cart actions, then publish only after approval.

How do I set up an AI assistant on my website?

For Shopify, connect your store, sync the catalog, configure the assistant, copy the generated widget snippet, add it to the theme, test desktop and mobile behavior, validate cart actions, and publish the approved theme.

Do I need a developer to install the WardrobeIt widget?

A merchant with appropriate Shopify theme access may complete the standard generated-snippet installation. A developer is recommended for custom themes, headless storefronts, complex scripts, tag-management setups, or conflicts with other storefront components.

Will installing the widget automatically change my live store?

No. Merchants should install and test WardrobeIt in an approved preview environment before publishing. WardrobeIt should not publish a Shopify theme or alter the live storefront without merchant approval.

Why is the storefront chat plugin installation not working?

The installation may fail if the wrong theme is edited, the snippet is incomplete, the merchant key is invalid, catalog sync is incomplete, the widget is disabled, another script conflicts with it, or the test happens in the wrong environment.

What are the requirements to embed a shopping assistant?

You need a connected store, synchronized catalog, approved merchant workspace, generated widget snippet, masked merchant key, storefront theme access, available test environment, validated product data, and permission to publish the selected theme.

How long does Shopify widget installation take?

Setup time depends on store readiness, theme access, catalog health, testing depth, and whether a developer needs to review the theme. Merchants should not publish until desktop, mobile, product, cart, and supported analytics checks pass.

How do I verify the storefront widget is working?

Confirm that the widget loads, opens, retrieves merchant products, answers approved questions, opens correct product pages, handles valid variants, completes supported cart actions, and records supported WardrobeIt events.

How do I remove WardrobeIt from the storefront?

Use the available Disable Widget control or remove the generated snippet from the approved theme location. Preview the storefront after removal to confirm that the widget no longer loads and the existing store remains unaffected.

Related Guides and Final CTA

Continue Setup With the Right Guide

Use these guides to complete the next setup step or fix installation issues.

Ready to install the storefront widget?

Open the Merchant Portal, confirm readiness, and follow the approved Shopify theme-snippet path. Preview before you publish — cart and checkout stay on your store.

Open Widget Installation Back to Help Center Getting Started Guide