Use this guide to change the look & feel of the Asklo widget on your store. This guide explain how you can change the colours, fonts etc. of the Asklo button and it's components.
Pre-requisites
You may need developer assistance for customizing the UI.
You will need access to your store's theme files.
⏳ Estimated Implementation Time: 60 Minutes
By default, Asklo will load the default CSS file on your product pages. You can override the default CSS file with your own overrides. Before we look the overrides, take a moment to understand the different components of the Asklo widget as explained below:
1. Popup Style Ask AI
Asklo Widget Components (Popup Style Ask AI)
| Widget Element | Description | CSS Component |
 | Ask Product AI Button | Change the colour of Asklo Product AI Button | klevu-product-query::part(klevu-query-open-button) { |
 | User Chat Bubble | Change the font colour User Chat Bubble |
:root { |
 | Asklo Chat Bubble | Change the font colour Asklo Chat Bubble | :root { |
 | Positive/Negative Feedback | Change the colour of Positive/Negative feedback icon | :root { |
 | Question Input Text field | Change the colour of Positive/Negative feedback icon | klevu-product-query-popup::part(textfield-input) { |
 | Submit Button | Change the colour of Submit button icon | klevu-product-query-popup::part(button-base) { |
 | Loading Indicator | Change the colour of Loading Indicator | :root { |
Asklo UI Customizations Example (Popup Style Ask AI)
The following example shows how to customize the component colour and text colour.
/* General Variables */
:root {
--klevu-chat-bubble-background: #053159 !important;
--klevu-chat-bubble-text-color: #ffffff !important;
--klevu-chat-bubble-background-remote: #dbe6f0 !important;
--klevu-chat-bubble-text-color-remote: #053159 !important;
--klevu-color-positive: #00E933 !important;
--klevu-color-negative: #F46616 !important;
--klevu-loading-indicator-color: #bc5631 !important;
}
/* Ask Product AI Button */
klevu-product-query::part(klevu-query-open-button) {
--background-color: #bce33b !important;
--background-hover : #99bb26 !important;
--text-color: #000000 !important;
}
/* Question Input Text field */
klevu-product-query-popup::part(textfield-input) {
background-color: #ededed !important;
color: #053159 !important;
}
/* Question Submit Button */
klevu-product-query-popup::part(button-base) {
--background-color: #bce33b !important;
--background-hover : #99bb26 !important;
--text-color: #000000 !important;
}
2. Embedded FAQ with Ask AI
Asklo Widget Components (Embedded FAQ with Ask AI)
| Widget Element | Description | CSS Component |
| Widget Header | Customize the widget header by changing its font and background color | :root { |
| Widget Border | Change the color and radius of the widget border | :root { |
| User Chat Bubble | Change the font and background color of the User Chat Bubble | :root { |
| Asklo Chat Bubble | Change the font and background color of Asklo Chat Bubble | :root { |
| Positive/Negative Feedback | Change the color of Positive/Negative feedback icon | :root { |
| Loading Indicator | Change the color of the loading Indicator | :root { |
| Input Box | Change the background color of input box and customize the font of the input placeholder ; customize input box border | :root { |
| Submit Button | Change the background and font color of the submit button; Customize radius | :root { |
 | Pre-populated Questions | Change the color and background color of pre-popualated questions. | :root { |
Asklo UI Customizations Example (Embedded FAQ with Ask AI)
:root {
--klevu-product-query-popup-height: 100%;
--klevu-product-query-popup-width: 100%;
--klevu-product-query-popup-header-background: #1e3a8a; /* Deep Blue */
--klevu-product-query-title-color: #93c5fd; /* Light Blue for header title */
--klevu-product-query-popup-border-color: #93c5fd; /* Light Blue for borders */
--klevu-product-query-popup-border-radius: 5px; /* Subtle rounding for modern look */
--klevu-product-query-bubble-text-color-remote: #2563eb; /* Medium Blue for remote answers */
--klevu-product-query-bubble-text-color: #1e3a8a; /* Deep Blue for main text */
--klevu-product-query-bubble-background: #dbeafe; /* Light Blue background */
--klevu-product-query-embedded-response-bg: #eff6ff; /* Very Light Blue for embedded responses */
--klevu-loading-embedded-indicator-color: #2563eb; /* Medium Blue for loading indicator */
--klevu-product-query-chat-height: 100%;
--klevu-product-query-chat-max-height: 100%;
--klevu-product-query-chat-bubble-border-radius: 8px; /* Softer bubble shape */
--klevu-product-query-chat-bubble-border-radius-remote: 8px;
--klevu-product-query-submit-button-background-color: #1e40af; /* Darker Blue for buttons */
--klevu-product-query-submit-button-background-hover: #1e3a8a; /* Deep Blue on hover */
--klevu-product-query-icon-color: #ffffff; /* White for icons */
--klevu-product-query-submit-button-border-radius: 5px; /* Subtle rounding for buttons */
--klevu-product-query-input-background-color: #ffffff; /* White input field */
--klevu-product-query-input-color: #1e3a8a; /* Deep Blue for input text */
--klevu-product-query-embedded-chat-background-color: #ffffff; /* White widget background */
--klevu-product-query-input-border: 1px solid #93c5fd; /* Thin Light Blue border */
--klevu-product-query-input-border-radius: 5px; /* Soft rounding for inputs */
--klevu-product-query-input-placeholder-color: #93c5fd; /* Light Blue for placeholder */
--klevu-product-query-input-placeholder-font-weight: 300; /* Light font for placeholder */
--klevu-product-query-answer-text-color: #1e3a8a; /* Deep Blue for answers (never white) */
--klevu-product-query-prepopulated-questions-color: #1e3a8a; /* Deep Blue for pre-populated questions text */
--klevu-product-query-prepopulated-questions-background: #eff6ff; /* Very Light Blue background for pre-populated questions */
--klevu-product-query-prepopulated-questions-hover-background: #dbeafe; /* Light Blue background on hover */
--klevu-product-query-prepopulated-questions-hover-color: #1e40af; /* Darker Blue on hover for text */
}
Steps to override default CSS
Shopify Store
Create new CSS file
Define the parameters which you want to modify in your CSS file.
Login to your Shopify Admin Panel & Upload CSS file
Find the theme you want to edit, then click on "Actions" and select "Edit code".
In the Assets folder, click "Add a new asset".
Choose your CSS file and upload it.
Include the Custom CSS File in Your Theme
Still in the "Edit code" section, open the
theme.liquidfile (usually located in the Layout folder).Add the following code inside the
<head>section to link your custom CSS file:<link rel="stylesheet" href="{{ 'your-custom-file.css' | asset_url }}">Replace
your-custom-file.csswith the name of your uploaded CSS file.Save your changes in the
theme.liquidfile.
Preview your storefront to ensure that the custom CSS is being applied.
Custom Store
Create a new CSS file.
Add your custom styles to the new CSS file.
Upload the new CSS file to your CSS folder.
Ensure that you call this custom CSS file on your product page template.
Preview your storefront to ensure that the custom CSS is being applied.
Please contact us if you need assistance.