How to Use Shoply AI Search and AI Chat

How to Customize the Shoply AI Chat

This section walks you through the different customization options available for your AI Chatbot. You can personalize the appearance, chat window design, and messaging experience to match your brand.

🎨 Chat Icon: Color & Size

• Select a Chat Icon – Pick from the available icons.

• Upload Your Own Icon – Use a custom image for your brand.

• Primary Color – Main theme color. This is also used as a highlighted text color in the chat. If you use a light mode on your website, please select a non-white color as your theme color — this is to make sure the highlighted text is still readable with the light background. If you use a dark mode on your website, please select a non-black color as your theme color.

• Secondary Color – Accent color for highlights.

• Icon’s Line Color – Outline color of the chat icon.

• Floating Icon Size for desktop and mobile.

• 📍Chat Icon Positioning on desktop and on mobile.

• Z-index of Chat Icon: Use a higher value if you want the icon to stay in front of other UI elements.

💬 Chat Window Customization

• Color Theme (dark mode or light mode) of the chat window.

• Width of the chat window on Desktop.

• Choose your own branding image and background image for the chat window, or simply let Shoply AI generate those images for you.

• Adjust the transparency and aspect ratios of the background image for the chat window.

• Whether to hide Shoply AI’s Logo in Input Bar (only available for paid plans).

💡 Predefined Messages for AI Chat

You can set or edit default messages that guide customers when they first interact with your chatbot.

• Welcome Message (shows above chat icon if not empty). Example: Ask me anything about your snow sports needs 👋.

• Input Placeholder Message. Example: Ask me anything 🤗.

• First Message in Chat Window (Markdown supported)

🌍 Translation Settings for the Predefined Messages

We offer three translation options to enable your chatbot to serve multilingual customers seamlessly.

1. No Translation – Default language only.

2. Translate predefined messages according to your store’s setting – Uses your store’s configured languages.

3. Translate predefined messages according to customer’s preference – Adapts to customer’s browser or preference.

What Information Does Shoply Guide Use to Answer Customer Questions?

Shoply Guide uses the following information from your store:

• Products: Includes product title, description, images, prices, etc.
• Order Information: Customers need to be logged in or provide their email and order ID to receive answers to order-related questions.
• Home Page: Content from your store’s home page.
• Policies: Includes refund and shipping policies.
• Pages and Blogs: Content from your online store’s visible pages and blog posts.

How to Use Deep Link to Open the Chat Window (Without Editing Theme Code)

You can open the chat window by using a deep link without modifying your theme’s code. In the Shopify Theme Editor, simply add the hashtag #shoply-ai-chatbot to any button, icon, or text element. When customers click on these elements, the chat window will automatically open.

Live example: demo.shoplyai.ai 

Steps:

1. Edit the desired button, text, or icon in your theme editor.
2. Set the link or URL to #shoply-ai-chatbot.

Examples:

Use a button to open the chat window:

Use a linked text to open the chat window:

How to Use Deep Link to Open the Chat Window (need to edit the code in Theme template)

In the previous section, we discussed how to use the hashtag (deep link) to trigger the chat window by adding it to any button, icon, or text directly from the Theme Editor, without editing your theme’s code.

However, if you’d like to have full flexibility to add the deep link anywhere on your store (e.g., creating a new icon in the header), you will need to edit the template code.

Below are simple HTML code examples you can use to create new icons in your Theme template:

Code Examples

1. Chat Icon

The code below adds a chat icon:

<a href="#shoply-ai-chatbot"
   style="display:inline-flex;align-items:center;margin-right:13px">
    <svg viewBox="64 64 896 896" style="height:28px;width:28px;fill:orange">
        <path
            d="M868.2 377.4c-18.9-45.1-46.3-85.6-81.2-120.6a377.26 377.26 0 00-120.5-81.2A375.65 375.65 0 00519 145.8c-41.9 0-82.9 6.7-121.9 20C306 123.3 200.8 120 170.6 120c-2.2 0-7.4 0-9.4.2-11.9.4-22.8 6.5-29.2 16.4-6.5 9.9-7.7 22.4-3.4 33.5l64.3 161.6a378.59 378.59 0 00-52.8 193.2c0 51.4 10 101 29.8 147.6 18.9 45 46.2 85.6 81.2 120.5 34.7 34.8 75.4 62.1 120.5 81.2C418.3 894 467.9 904 519 904c51.3 0 100.9-10.1 147.7-29.8 44.9-18.9 85.5-46.3 120.4-81.2 34.7-34.8 62.1-75.4 81.2-120.6a376.5 376.5 0 0029.8-147.6c-.2-51.2-10.1-100.8-29.9-147.4zm-66.4 266.5a307.08 307.08 0 01-65.9 98c-28.4 28.5-61.3 50.7-97.7 65.9h-.1c-38 16-78.3 24.2-119.9 24.2a306.51 306.51 0 01-217.5-90.2c-28.4-28.5-50.6-61.4-65.8-97.8v-.1c-16-37.8-24.1-78.2-24.1-119.9 0-55.4 14.8-109.7 42.8-157l13.2-22.1-9.5-23.9L206 192c14.9.6 35.9 2.1 59.7 5.6 43.8 6.5 82.5 17.5 114.9 32.6l19 8.9 19.9-6.8c31.5-10.8 64.8-16.2 98.9-16.2a306.51 306.51 0 01217.5 90.2c28.4 28.5 50.6 61.4 65.8 97.8l.1.1.1.1c16 37.6 24.1 78 24.2 119.8-.1 41.7-8.3 82-24.3 119.8zM681.1 364.2c-20.4 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.6 37.1 37.1 37.1s37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1zm-175.2 0c-20.5 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.7 37.1 37.1 37.1 20.5 0 37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1z" />
    </svg>
</a>

2. AI Star Icon

The code below adds an AI star:

<a href="#shoply-ai-chatbot" style="display:inline-flex;align-items:center">
    <img style="height:28px;width:28px" src="https://[CFN_PRODUCTION_ASSET]/AIStar.svg" alt="Shoply Chatbot"  />
</a>

3. Function Call Method

Besides using hashtags, you can also put the function call openShoplyAIChatBot() to the onclick attribute of any button/icon, so that customers will see the chat window when they click the button/icon.

<button onclick="openShoplyAIChatBot()" style="border-radius:20px;margin:10px;cursor:pointer;background:black">
    <span style="font-size:13px;color:white;margin:5px">Click to Chat</span>
</button>

Need Help?

You can use any of the examples above, and inject the code next to the search icon in the sections/header.liquid file, to add the chat deep link to your store’s header.

However, if you’re not entirely comfortable editing the code in your Theme template, don’t worry!

Feel free to book a meeting with us , and we’ll gladly help you set up the perfect icon in the ideal spot to match your store’s unique vibe.

How to Hide the Floating Icon?

Once you configure the deep link to open the chat window. You may want to hide the floating icon. Also, store owners often mention that having too many floating icons on their websites can be overwhelming. We understand your concerns! That’s why we’ve introduced a feature to hide the chat icon.

In the “Customize AI Chat” section of the app’s admin console, under the Select a Chat Icon settings, you can now select the:

“Hide floating icon and use deep link to open chat” option.

This allows you to hide the floating icon while still enabling the chat window to open via a deep link.