Customize widget colors
You can match the Olvio widget to your brand with seven colors. They apply to the widget on your product pages and to the chat panel, including the chat panel that opens from Olvio Advisor links (Growth and Scale plans). The color settings themselves are available on every plan.
Change the widget colors
Open Appearance in the Olvio app menu.
Click the Style tab.
In the Colors card, change the colors you want. They're grouped into Brand (Accent color, Accent foreground), Surfaces (Background, Surface, Border) and Text (Text, Muted text).
Click Save in the save bar that appears as soon as you change something. The message Changes saved confirms it.
To pick a color, click the square swatch to the left of a field to open your browser's color picker, or type or paste a hex code into the field. Codes must use the six-digit #rrggbb format, for example #7b3fe4. Short codes such as #fff and color names aren't accepted: the field shows Expected format: #rrggbb, and you can't save until you fix it.
To cancel changes you haven't saved, click Discard in the save bar.
What each color changes
Color | Where it appears |
Accent color | The Expert name above the Hook question, the sparkle icons in the suggested questions on the product page, the send button, the shopper's messages, the default avatar, the area behind an uploaded avatar that has a transparent background, the Add to cart button above the question field in the chat panel on product pages, and add-to-cart buttons and discount badges on product cards. It also outlines a suggested question on hover and the question field while it's selected, and, on hover, colors links in the AI's replies. |
Accent foreground | Text and icons shown on top of the accent color: the shopper's messages, the send arrow, the default avatar icon, the text on add-to-cart buttons in the chat panel and on product cards, and discount badges. |
Background | The chat panel, the suggested questions, the question field (on the product page and in the chat panel) and the variant selectors and their menus on product cards. On the product page, the rest of the widget is transparent, so your theme's background shows behind the Expert name and the Hook question and around the suggestions and the question field. |
Surface | The AI's replies, the typing indicator, the background behind product images on product cards, the highlight when a shopper hovers over a suggested question or a variant option, and the selected option in a variant menu. |
Border | The outline of suggested questions, the question field, variant selectors and their menus, and the line under the chat panel header. The thin line above the question field in the chat panel doesn't use this color. |
Text | The Hook question, suggested questions, the text shoppers type, the AI's replies, product names in the chat panel and on product cards, the variant selectors and their options on product cards, your store name at the top of the Advisor chat panel, and the close button and the arrow for loading earlier messages on hover. |
Muted text | The placeholder in the question field, product prices in the chat panel and on product cards, the dropdown arrow on variant selectors and sold-out options in variant menus on product cards, the typing dots, the close button and the arrow for loading earlier messages (both switch to Text on hover; the arrow also shows its Load previous messages label), the disclaimer and Powered by Olvio line at the bottom of the chat panel, and the background of the Sold out badge on product cards. |
Variant selectors and add-to-cart buttons on product cards only appear when Enable add to cart in chat is on, in the Advanced tab of the Appearance page. See Show product cards and let shoppers add to cart from the chat.
Olvio doesn't adjust your colors for contrast. Check that Accent foreground stays readable on Accent color, that Text and Muted text stay readable on Background, that Text stays readable on Surface, and that Background stays readable on Muted text, which fills the Sold out badge. On product pages, the Expert name (Accent color) and the Hook question (Text) appear directly on your theme's background, so check that they stay readable there too.
Preview your colors
The Live preview updates as you edit, before you save. Use the Product page and Chat panel buttons above it to switch views. Surface only appears in the Chat panel view. While a color code is invalid, the preview shows Olvio's default for that color.
The preview uses sample content and doesn't include your custom CSS or the color overrides set in the theme editor. In the Chat panel view, Border also colors the line above the question field; on your storefront that line keeps the same faint color whatever you choose. After saving, check a product page on your storefront.
See the new colors on your storefront
When you click Save, Olvio sends your new colors to your storefront. Reload a product page to see them. If the old colors still show, see My Appearance changes don't show on the storefront.
Override colors for one product template
The Olvio — Product page block has its own color settings, which appear when you select the block in the Shopify theme editor. When Use custom colors for this block is checked, the block's Accent, Accent foreground, Background, Surface, Border, Text and Muted text colors replace the ones set on the Appearance page. Click Save in the theme editor.
The override applies to every product that uses the template, and also to the chat panel that opens from it, even though the setting's description says for this block only.
The block's color settings start with Olvio's default colors, not the colors you set on the Appearance page. When you turn the override on, set all seven.
To go back to the Appearance colors, uncheck Use custom colors for this block and save the theme.
For the full block setup, see Add the Olvio widget to your product pages.
Olvio's default colors
There's no reset button. To go back to Olvio's default palette, enter these codes and click Save:
Accent color:
#7b3fe4Accent foreground:
#ffffffBackground:
#ffffffSurface:
#f7f6ffBorder:
#e3e0f5Text:
#0e0c1bMuted text:
#6e6c8a
Related settings
Font and text size: Customize the widget font and font size
Rounded corners: Customize the widget's corner radius
Expert name, hook question and avatar: Change the widget expert name, hook question, and avatar
Anything the seven colors don't cover: Add custom CSS to the widget