Shoply AI Chat and AI Search provide more than 40 options to customize the appearance of the the app.
This section walks you through the different customization options available for your AI Chatbot. You can personalize its appearance, chat window design, and messaging experience to match your brand.
Ready to get started? Visit the Customize AI Chat page in our app’s admin console to begin customizing your chat experience. Once you’ve enabled Shoply AI Chat in Shopify’s Theme Editor, the chat icon will appear in the bottom right corner of your store’s web page.
Select an icon
You can choose a chat icon from our 17 pre-defined different icons, or upload an image as your own chat icon
Primary Color
This is the main theme color, and it is also used as a highlighted text color in the chat window.
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.
Complementary Color
This is a complementary color that works with your primary color to create gradients (smooth transition between two colors) for the chat icon and the header of chat window, making the chat icon more visually appealing and aligned with your brand.
Icon’s Line Color
This is the outline color of the chat icon.
Whether to remove the background color of the chat icon.
This is often useful if you upload an image as the chat icon, and you want to remove the background color (the primary color) of the chat icon.
Whether to remove the shadow of the chat icon.
This option allows you to remove the drop shadow effect from the chat icon for a flatter, more minimalist design. This is particularly useful if your store has a clean, modern aesthetic, or if you’ve uploaded a custom icon that already includes its own shadow or depth effects.
Floating Icon Size for desktop and mobile.
On mobile, you may want to set a smaller size for the chat icon to avoid blocking the customer’s view of the mobile screen.
Chat icon positioning’s 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.
Auto-hide chat icon on mobile
Hide the chat icon after a specified number of seconds on mobile devices.
This option is only available for mobile devices. It helps prevent the chat icon from blocking the customer’s view of the mobile screen.
When you click the chat icon of Shoply AI, the chat window will pop up. Customers can interact with the Shoply AI through that chat window.
This section will walk you through the different options available to customize the chat window.
Color Theme (dark mode or light mode) of the chat window
If you choose the dark mode, the background of the chat window will be black and the font color will be white. We recommend t0 adopt the dark mode option if your store’s theme is also in the dark mode.
Width of the chat window on desktop
This option only applies to desktop. On mobile, the chat window always occupies the whole screen.
Select the branding image and background image
You can choose to upload your own brnading image and background image for the chat window, or simply let Shoply AI generate those images for you.
If you choose to use the AI-generated image, Shoply AI will generate the branding images and background images based on your store’s description.
Adjust the transparency and aspect ratios of the background image for the chat window.
Background images in the chat winow may make the text above it un-readable. Therefore, by default, we add a half-transparent layer above the background image.
Whether to remove Shoply AI’s Logo in Input Bar
This option allows you to remove the Shoply AI logo from the chat input bar for a cleaner, more branded experience. This is particularly useful if you want to maintain a consistent brand identity throughout your store without third-party logos, or if you prefer a more minimal chat interface design.
This option is only available for paid plans.
You can also set or edit default messages that guide customers when they first interact with your chatbot. In addition, you can configure the translation options for those messages (see this FAQ page for more details).
Popup Welcome message (shows above chat icon if not empty)
If you leave the welcome message empty, we will not show the welcome message above the chat icon.
Pre-defined messages in chat window
You can set up to 3 types of pre-defined messages in the chat window:
First message in the chat window - This is the initial greeting message that automatically appears when customers first open the chat window. Use this to welcome customers and set the tone for the conversation.
Up to 4 starting questions - These are clickable question suggestions displayed at the beginning of the chat. They help guide customers by providing common questions they can click to start a conversation, making it easier for customers to get started.
Input placeholder message - This is the hint text that appears in the chat input field before customers start typing. It provides guidance on what customers can ask, such as “Ask me anything 🤗” or “How can I help you today?”
See the example for each type of predefined messages:
