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:
Asklo Widget Components
| 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
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;
}
For Shopify Store, steps to override default CSS
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.
For Custom Store, steps to override default CSS
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.