Give your customers a smarter shopping experience by turning on your store’s AI shopper (AI Sales Chat)! It can guide buyers, answer their questions, and help them choose products - all without needing live support. These widgets work smoothly with your website and can help boost trust and sales.
In this guide, we’ll walk you through how to set up and customize the five main AI Shopper (AI Sales Chat) tools: Top Questions, AI Search, Virtual Try-On, Ask AI and Chat Bubble.
Use Cases
Each widget serves a distinct purpose in enhancing the shopping experience. Understanding when to use each one is key to maximizing their value.
Top Questions: Shows common product questions (like size, materials, or care) right on your product pages to help customers without them needing to ask support.
AI Search Bar: Gives your shoppers a smarter way to search your site using natural language - much better than regular keyword search!
Virtual Try-On: Perfect for fashion and sizing recommendations - this lets customers “see” how items look on them, helping build confidence before buying.
Ask AI: Lets your shoppers chat with AI about your products - a smarter, more interactive way to get answers than regular FAQs!
Chat Bubble: Quickly answer customer questions with an AI-powered chat bubble
Choose Model: Lets shoppers select a model to see products visualized on different body types or appearances.
Setting Up Top Questions
This widget shows clickable Q&As on your product pages, so customers can get answers fast.
Go to Launchpad → Website → Click Store Agents → Select Top Questions
Title Settings
Show Title: Use this toggle to display or hide the header at the top of your widget.
Widget Title: Enter the text you want to appear as your header (e.g., "Top Customer Questions").
Title Font Size: Slide to adjust how large or small your title text appears.
Use Brand Header Font: When enabled, this pulls the specific font style defined in your Brand Kit for a consistent look.
Bold Header Text: Toggle this on to make your title text thicker and stand out more.
Title Alignment: Choose whether your title is positioned to the Left, Center, or Right.
Title Padding (px): Adjust the inner spacing (Top, Right, Bottom, Left) between the title text and its container.
Title Margin (px): Adjust the outer spacing (Top, Right, Bottom, Left) to move the entire title block away from other elements.
Colors
Background Color: Sets the main fill color for the widget body.
Hover Background Color: Changes the background color when a user moves their mouse over the widget.
Text Color: Sets the default color for your written content.
Hover Text Color: Changes the text color specifically when a user hovers over it.
Border Color: Sets the color for the thin line around your widget elements.
Hover Border Color: Changes the border color during a mouse hover for a reactive effect.
Widget Animation
Animate (Scrolling Marquee): Switch this on to make your content scroll continuously across the widget, similar to a news ticker.
Shape & Style
Show Icon: Toggle this to display or hide the decorative icon within the widget.
Border Radius: Slide to the right to make the corners of your widget more rounded, or to the left for sharp, square corners.
Border Width: Controls the thickness of the widget's outline.
Font & Behavior
Button Font Family: Select the specific typeface used for your buttons (e.g., "Inter").
Button Font Size: Slide to change the text size specifically for your buttons.
Behavior
Product Search Bar: Enable this toggle to add a search field, allowing users to find specific items quickly.
Add to Your Store
Click the Publish button
2. Click Add block
3. Drag the Top Questions block to your preferred spot.
3. Click Save.
Top Questions not showing on all products?
If the See it on you appears on some products, it’s likely because it’s added only to your default product template.
If your store uses other product templates (e.g., for certain collections or special layouts), you’ll need to add the Top questions block to each template in your Shopify theme editor.
Quick fix:
Open each product template in the Shopify theme editor.
Add the Shopper Top questions block.
3. Save.
Setting Up AI Search Bar
This smart search bar helps shoppers find products by typing questions naturally.
Go to Launchpad→ Website -> Click Store Agents → Select AI Search Bar
Design
Placeholder: Customize the hint text displayed inside the search bar, such as "ASK ME ANYTHING".
Custom Icon: Upload a brand-specific image (PNG, JPG, GIF, or SVG) to represent your widget.
Show Icon: A toggle to determine if the uploaded or default icon is visible.
Search Bar Mode: Select Floating to have the bar sit over page content or Inline to embed it in the page.
Show Chat Bubble on Mobile: When active, mobile users see a compact bubble instead of a full bar to save screen space.
Open chat on click: Triggers the chat interface to open immediately upon clicking the widget.
Colors
Background Color: Sets the main fill color of the search bar.
Hover Background Color: The color the bar turns into when highlighted. Use a contrasting color here to make the bar "pop" when users are about to type.
Border Color: The color of the thin outline surrounding the widget.
Hover Border Color: The color of the outline when the mouse is over the widget. This is useful for adding a subtle glow or highlight effect.
Text Color: The color of the input text (what users type) and the placeholder text inside the bar.
Hover Text Color: Changes the text color during interaction. Ensure this color is readable against your Hover Background Color.
Button Background: The background color of the action button
Hover Button Background: The color the button fills with when a user hovers specifically over that button, indicating it is ready to be clicked.
Search Icon Color: The color of the magnifying glass symbol inside the bar.
Search Icon Hover Color: The color the icon changes to upon interaction. This is often set to white or a light color if the hover background becomes dark.
Position
Position Preset: section determines where the widget is anchored on your page.
Border Width: Use the slider to set the thickness of the widget’s outline in pixels (e.g., 1px).
Font Family: Select your preferred typeface from the dropdown menu (e.g., Inter).
Font Size: Use the slider to increase or decrease the text size in pixels
Settings
Widget Visibility
Control exactly where your AI agent appears on your website to ensure a relevant user experience.
Blacklist by Collection: Use this search bar to select specific product collections where the widget should be hidden.
Show widget in the following templates: Manually type or search for specific page templates where you want the widget to be active.
Agent Knowledge: Click Open Knowledge Base to manage the information and data sources your agent uses to answer user questions.
Agent Connectors: Click Open Integrations to link external tools and software that enhance your agent's capabilities.
Agent Tools: Click Open Agent Settings to configure specific behaviors and functional tools for your AI agent.
Add to Your Store
1. Click Publish
The AI understands different languages! No need to set anything - customers will get replies in the language they use.
To remove it, just unpublish.
Reminder: AI Search widget for non-Shopify website is not yet supported.
Note: In some cases, the AI Search bar might still appear on the player or on your site even if it’s unpublished. If that happens, email us at support@gotolstoy.com and we’ll remove it for you on the backend.
Important 📌
Please make sure the product is published on your store to avoid it showing up as broken. If a product is marked as “Active” but isn’t published, it’ll still get pulled into the recommendations and appear broken on the front end.
We use Shopify’s product recommendation algorithm, so any item listed as “Active” may show up even if it’s unpublished. To fix this, you can either publish the product or change its status to “Disabled.”
Setting Up Virtual Try-On
Let your customers preview how items will look on them - great for clothes and beauty products!
Go to Launchpad → Website → Click Sizing & Try-Ons → Select Virtual Try-On
Design
Button Placement: Choose how the button is integrated into your page layout:
Standalone (Block): The button appears as an independent element.
Inline (Next to Add to Cart): The button sits directly beside your "Add to Cart" button for high visibility.
Button Text: Customize the call-to-action text that appears on the button (e.g., "See it on you").
Background Color: The main fill color for the interaction button (e.g.,
#000000).Text Color: The color of the label inside the button (e.g.,
#FFFFFF).Border Color: The outline color for the button, allowing it to stand out against your site's background.
Desktop Width Mode:
Fit: Automatically sizes the button based on the length of your text.Custom %: Allows you to set a specific percentage of the container width for the button to fill.
Mobile Width Mode: * Similar to desktop, you can choose to Fit the content or use a Custom %.
Mobile Width Slider: When using "Custom %," use this slider to set the exact width (e.g., 100%) for mobile devices to ensure easy tapping.
Link Style (Text with Underline): Toggle this option to change the button from a solid block to a simple text link with an underline.
Show Icon: Choose whether to display a visual icon alongside your button text.
Custom Icon: If you prefer not to use the default sparkles, you can upload your own custom image or logo.
Icon Position: Select whether the icon appears Before Text or After Text.
Border Radius: Use the slider to adjust how rounded the corners of your button appear (e.g., 0px for sharp corners).
Border Width: Set the thickness of the button’s outline (e.g., 3px).
Text Alignment: Use the dropdown to align your text to the Center, left, or right of the button.
Font Family: Choose a specific typeface (e.g., Cinzel) from the dropdown menu to define the overall style of your text.
Font Size: Use the slider to set the exact height of your text in pixels (e.g., 24px).
Letter Spacing: Adjust this slider to increase or decrease the horizontal space between individual letters (e.g., 0px) for a more condensed or airy feel.
📌Add to Your Store
Click Publish
2. Click Add block and Click "Save" in Shopify
See it on you block not showing on all products?
If the See it on you appears on some products, it’s likely because it’s added only to your default product template.
If your store uses other product templates (e.g., for certain collections or special layouts), you’ll need to add the Shopper block to each template in your Shopify theme editor.
Quick fix:
Open each product template in the Shopify theme editor.
Add the Shopper See it on you block.
Save.
Setting Up Ask AI
Shoppers can chat directly with AI about your products - faster, smarter, and way more fun than scrolling through FAQs.
Go to Launchpad → Website → Click Store Agents → Select Ask AI
Customize the Look
Under Design Widget -> Widget Appearance, you can edit:
Use Embedded Chat - When enabled, clicking this widget scrolls to the embedded chat on the page instead of opening a popup modal.
Placeholder – The default text that appears in the input field before users type.
Colors – Customize the widget’s background, text, and button colors to match your brand.
Button Width – Adjust how wide the action button appears.
Shape & Style – Choose the button’s shape (rounded, square, etc.) and overall style.
Font – Select the text style used in the widget.
Text Alignment – Decide whether text is left, center, or right aligned.
Widget visibility
Blacklist by Collection – Add product collections where you don’t want the widget to appear.
Show widget in the following templates – Search and select multiple templates (or type template names manually) where the widget should be visible.
📌Add to Your Store
Once you are all set, just click the publish button.
The Ask AI section is automatically added to your product page. You can easily drag and drop the section to change its placement or location on the page.
Setting Up Chat Bubble
Quickly answer customer questions with an AI-powered chat bubble.
Go to AI Shopper -> Widgets -> Click on the Chat Bubble card.
Widget Appearance
Logo - Upload a custom logo or use the color settings below.
Colors - Change the background and icon colors.
Position - bottom center, top center, top left, top right, bottom left, bottom right
Widget Visibility
Agent Should appear on these pages – Choose the pages where the chat bubble widget will be visible:
Home
Product Pages
Collection Pages
Blacklist by Collection – Add product collections where the widget should not appear.
Show widget in the following templates – Search and select multiple templates where the widget should appear, or manually type template names.
📌Add to Your Store
Once you’re ready, click Publish.
Related Articles: AI Shopper Settings, Exploring Agent Features in AI Shopper