My Appearance changes don't show on the storefront
The settings on the Appearance page of the Olvio admin control how the widget looks on your product pages and in its chat panel. If a change doesn't show on your storefront, go through the checks below in order.
The Appearance page is available once you've chosen a plan. Automatic translation of the Expert name and Hook question needs the Growth or Scale plan.
Make sure the change is saved
Your storefront only gets a change after you save it. The Live preview on the Appearance page updates as you edit, so it can show changes your storefront doesn't have yet.
After you change a setting, click Save in the save bar.
Wait for the Changes saved message.
If an error message appears instead of Changes saved (for example Too many requests), your change wasn't saved. Try again. You also can't click Save while a color field shows Expected format: #rrggbb. Enter a six-digit code such as #7b3fe4 first.
Reload the product page
Open or reload a product page that shows the Olvio widget.
If it still looks the same, wait two minutes and reload again.
Check the page in a private (incognito) browser window too. The widget remembers an open chat and its suggested questions in the same browser tab, so a private window shows the page the way a new shopper sees it.
Changes to the avatar, and to Conversation bubble and Add-to-cart button in the Shape card of the Chat panel tab, only show in the chat panel. Ask a question in the widget to open it.
Occasionally, a change is saved in Olvio but doesn't reach your storefront, even though Changes saved appeared. Your storefront then keeps the previous look until Olvio sends your settings again, for example the next time you save on the Appearance page. To send your settings again, change any setting and click Save, then change it back and click Save again.
Colors or font size don't change: check the theme editor block
The Olvio — Product page block in the Shopify theme editor has two settings that replace some of your Appearance settings for every product that uses that product template:
Use custom colors for this block: the block's own colors replace your seven Appearance colors.
Use custom font size for this block: the block's Base font size replaces the one set on the Appearance page.
While one of these boxes is checked, changing the same setting on the Appearance page has no visible effect on those product pages or on the chat panel that opens from them. The Live preview in Olvio doesn't show these overrides.
In the Shopify theme editor, open the product template where you added the Olvio block, then select the Olvio — Product page block.
Uncheck Use custom colors for this block and Use custom font size for this block, or set the values you want in the block.
Click Save in the theme editor.
The block's color settings start with Olvio's default colors, not your Appearance colors. If your products use more than one product template, check the block in each one. The font, corner radius, avatar and custom CSS always come from the Appearance page, and the Expert name and Hook question from Widget → Product Detail Page. To find the block, see Add the Olvio widget to your product pages.
The font doesn't change
Olvio doesn't load any font files. Apart from Default (system), the font you choose in the Font menu, or type in CSS font-family after choosing Custom at the bottom of that menu, must already be loaded by your Shopify theme or installed on the shopper's device. Otherwise, the shopper's browser uses the next available font in the list, such as a generic sans-serif font, or picks a font itself when no font in the list is available.
A font can look right on your own computer because it's installed there, and still be replaced on shoppers' devices. Check the page on another device as well.
The Live preview uses the fonts available in your browser, not the fonts your theme loads, so it can show a font your storefront can't display. For example, the Olvio admin loads Inter, so Inter always shows in the Live preview, even when your theme doesn't load it.
Custom CSS can't load a font from another website:
@importrules andurl()links that start withhttp://,https://or//are removed when you save.In the Font menu, if you choose Custom and leave CSS font-family empty, the widget uses Default (system).
To choose a font your theme loads, see Customize the widget font and font size.
Custom CSS has no effect
Custom CSS never shows in the Live preview. As the Appearance page says, Custom CSS is only applied on the live widget. Check your rules on a product page of your storefront, and open the chat panel to check rules that style it.
Add
!importantto every property you override. Olvio's own styles use it too, so without it your rule loses to Olvio's default.Olvio adds
htmlin front of your selectors to help them win, but not inside@mediaor other at-rules. Start those selectors withhtmlyourself, for example@media (max-width: 600px) { html .olvio-title { font-size: 1.2em !important; } }.Outside at-rules, don't start a selector with
htmlor:rootyourself: with the prefix Olvio adds, that selector matches nothing. Olvio also adds the prefix after commas inside:has()and inside quoted attribute values, so that part of the selector stops matching. Avoid commas there.Target Olvio's classes, such as
.olvio-panel,.olvio-msg-user,.olvio-msg-assistant,.olvio-suggestion-btn,.olvio-atc-btn,.olvio-input-row,.olvio-labeland.olvio-title.After you save, the field shows your CSS as Olvio stored it. Compare it with what you pasted: Olvio removes
@importrules, comments, images or fonts loaded from other websites throughurl(), and every rule whose selector targets the bottom area of the chat panel (.olvio-panel-footer,.olvio-brand-mentionor.olvio-panel-input), even when the rule lists other selectors too. To style the question field, use.olvio-input-row.
For everything Olvio removes and more examples, see Add custom CSS to the widget.
The Expert name or Hook question looks wrong
You cleared the field, but text still shows. An empty Expert name or Hook question isn't hidden: the widget shows its default text instead, such as YOUR EXPERT, or VOTRE EXPERT when the widget is in French. The field on Widget → Product Detail Page also shows the default text again the next time you open the page. To hide the Expert name, add
.olvio-label { display: none !important; }to your custom CSS.The Expert name is in capital letters. The widget displays it in capital letters, whatever case you type. To change that, add
.olvio-label { text-transform: none !important; }to your custom CSS.The text isn't exactly what you typed, or the old wording still shows (Growth and Scale). On these plans, when your widget serves at least one of English, French, German, Spanish, Italian or Portuguese besides your default language, Olvio translates your Expert name and Hook question when you save. The widget shows those translations first, including on pages in your default language when it's one of these six languages. If your default language isn't one of these six and your widget serves English, pages in your default language show the English translation. In both cases, shoppers on your default language see a translated version, which can differ from what you typed. If the translation can't be made, your changes are still saved, but the widget keeps the translations made earlier, so shoppers can still see your old wording. Without an API key no error appears; with a key, a message says your changes couldn't be translated.
To have Olvio translate your text again, check that your key is connected on the API Key page (see Connect your Anthropic (Claude) API key). Then change the Expert name or Hook question, click Save, put your wording back and click Save again. Translating again creates a new version, which can still differ from what you typed.
Your text isn't translated
Olvio translates the Expert name and Hook question when all of these are true:
Your store is on the Growth or Scale plan. On Starter, text you type yourself is shown as you typed it, on every page. If it's exactly the default text (YOUR EXPERT or Any question about this product?), the widget shows its built-in default instead, which is translated when your store's default language is French, German, Spanish, Italian or Portuguese (for example VOTRE EXPERT).
Your Anthropic API key is saved on the API Key page. Translations use your key, so they're billed to your Anthropic account.
The language is one your widget serves, and it's English, French, German, Spanish, Italian or Portuguese. Olvio doesn't translate this text into other languages.
Your widget serves at least one of these six languages besides your default language. For example, if you unchecked every language in the Languages card on the Advanced tab while on Growth, or your store publishes none of these languages besides your default language, Olvio doesn't translate your text. If your default language is one of these six, your widget still serves another language and your text was translated earlier, shoppers keep seeing that earlier translation instead of your new text.
You save a change to the Expert name or Hook question, or you save any change while one of these six languages your widget serves has no translation yet. Olvio also fills in missing translations when you move up to Growth or Scale while your key is saved.
Connecting an API key doesn't translate your text by itself. If your text has never been translated, click Translate now in the Some languages are not translated yet banner on Widget → Product Detail Page. If an earlier translation exists, change the Expert name or Hook question and click Save, then put your wording back and click Save again, as described above. If the widget shows the wrong language on a page, see The widget or the AI uses the wrong language.
Other problems
The widget doesn't appear on pages in some languages: check whether Hide the widget on languages Olvio doesn’t cover is checked in the Languages card on the Advanced tab. See Multi-language: choose which languages your widget serves.
The widget doesn't appear at all: see The widget isn't showing on my storefront.
No suggested questions: see Suggested questions don't appear on my product pages.
If your change still doesn't show, contact us through the chat in the Olvio admin. Include a link to the product page and the setting you changed. See Contact us and support hours.