Add custom CSS to the widget

If the built-in controls on the Appearance page don't give you the look you want, you can add your own CSS to change how the Olvio widget looks on your storefront. Custom CSS is available on every plan.

For colors, fonts and corner radius, start with the built-in controls: see Customize widget colors, Customize the widget font and font size and Customize the widget's corner radius.

Your CSS applies to the whole page

The widget isn't isolated from the rest of your storefront page. Olvio adds your CSS to the page as a regular style sheet, so a rule can change any element on the page, not only the widget.

Olvio adds it on product pages that show the Olvio block and, if you use the Olvio Advisor (Growth and Scale plans), on the other pages of your store where the Olvio Advisor app embed loads.

Include an Olvio class in every selector, such as .olvio-panel. A bare selector like p or button restyles every paragraph or button on those pages.

Add your CSS

In the Olvio admin, open Appearance.
Click the Advanced tab.
In the Custom CSS card, paste or type your CSS. The field accepts up to 5,000 characters and shows a character count.
Click Save in the save bar.

A Changes saved message confirms the save. The field then shows your CSS as Olvio stored it, so you can see whether anything was removed (see What Olvio removes when you save below).

The Live preview on the Appearance page doesn't show custom CSS: Custom CSS is only applied on the live widget. To see your changes, reload a product page on your storefront.

Make your rules override Olvio's styles

Olvio's own widget styles use !important on many properties so that your theme can't break the widget. Add !important to every property you override: where Olvio's style uses it, a rule without it loses to Olvio's default.

To help your rules win, Olvio adds html in front of each selector when it applies your CSS: .olvio-panel is applied as html .olvio-panel.

Selectors inside at-rules such as @media don't get this prefix. Start them with html yourself, for example @media (max-width: 600px) { html .olvio-title { font-size: 1.2em !important; } }.

Outside at-rules, don't start a selector with html or :root yourself: with the prefix Olvio adds, the rule would match nothing. Also avoid commas inside :has() and inside quoted attribute values: Olvio adds the prefix there too, and that part of the selector stops matching.

Useful selectors

The Custom CSS card suggests these selectors:

.olvio-label: the Expert name, the small uppercase text above the title on the product page.
.olvio-title: the Hook question, the title on the product page.
.olvio-suggestion-btn: the suggested question buttons on the product page and, in Olvio Advisor conversations, the answer buttons above the question field and the Continue and Start over buttons that offer to resume an earlier conversation. To style only one of these places, put .olvio-suggestions (product page) or .olvio-panel-chips-row (Olvio Advisor) in front of the class, for example .olvio-panel-chips-row .olvio-suggestion-btn.
.olvio-input-row: the question field, on the product page and in the chat panel.
.olvio-panel: the chat panel.
.olvio-msg-user: the shopper's messages in the chat panel.
.olvio-msg-assistant: Olvio's replies in the chat panel.
.olvio-atc-btn: the add-to-cart button for the product being viewed, above the question field in the chat panel. Add-to-cart buttons on product cards in the chat use .olvio-card-atc.

To find the class of another element, right-click it on your storefront and use your browser's Inspect tool.

Examples

Shadow on the chat panel: .olvio-panel { box-shadow: -12px 0 40px rgba(0,0,0,0.15) !important; }
Smaller title on the product page: .olvio-title { font-size: 1.25em !important; }
Hover color on suggested questions and Advisor answer buttons: .olvio-suggestion-btn:hover { background: #faf5ff !important; }
Hide the Expert name: .olvio-label { display: none !important; }

What Olvio removes when you save

Olvio checks your CSS when you save and removes, among other things:

@import rules.
CSS comments (/* … */).
HTML fragments such as <script, </style, .
Full addresses inside url(), image-set(), image(), src() and cross-fade(): a value that starts with http://, https://, //, javascript: or vbscript: is replaced with an empty url(), even when it points to your own store. You can't load images or fonts from a full web address this way. data: URIs and relative paths, such as a path that starts with a single /, are kept.
The behavior property and expression(), which only old versions of Internet Explorer used. Avoid scroll-behavior and overscroll-behavior in custom CSS: when you save, Olvio removes part of these declarations, and the CSS that follows them can stop working.
Any rule whose selector targets the footer line of the chat panel (.olvio-panel-footer, .olvio-brand-mention) or the area at the bottom of the panel that contains it (.olvio-panel-input), including inside @media and nested rules. The whole rule is removed, even if it lists other selectors too. An at-rule such as @scope that names one of these classes is removed with everything inside it. To style the question field, use .olvio-input-row.
Anything beyond 5,000 characters.

Inside a quoted string, avoid backslash escapes such as \", \\ and \A: they break the string when you save. Type the character itself instead where you can, and put a string that contains " in single quotes.

The "Powered by Olvio" line stays on every plan

The bottom of the chat panel shows a line that reads You're chatting with an AI • Powered by Olvio in English, with a link to Olvio on the Shopify App Store. Olvio doesn't offer a way to hide this line, on any plan.

Olvio removes rules that name the line's classes. On your storefront, the widget also forces the line's own display and visibility styles and puts the line back if something removes it.

Test and undo your changes

After you save, reload a product page on your storefront and click a suggested question (or type a question) to open the chat panel. Check that messages are readable and nothing overlaps. Check the page in a narrow, phone-sized window too.

To cancel edits you haven't saved, click Discard in the save bar. To remove custom CSS you've already saved, clear the field and click Save: the widget returns to its default look the next time a storefront page loads.

If your changes still don't appear, see My Appearance changes don't show on the storefront.