Customize the widget's corner radius
Corner radius sets how rounded the corners of the widget are, from square corners at 0 px up to a circle for the avatar and a pill shape for the add-to-cart button and input field. Olvio gives you five separate sliders, so you can match each part of the widget to your theme. They're available on every plan.
The same values apply to the widget on your product pages, to the chat panel, and to Olvio Advisor conversations (Growth and Scale plans).
Find the corner radius sliders
In the Olvio admin, open Appearance.
On the Product page tab, the Suggestions card has a Corner radius slider.
On the Chat panel tab, the Avatar card has a Corner radius slider, and the Shape card has the Conversation bubble, Add-to-cart button and Input field sliders.
Tab | Card | Slider | Range | Default |
Product page | Suggestions | Corner radius | 0 to 24 px | 12 px |
Chat panel | Avatar | Corner radius | 0 to 16 px | 16 px (circle) |
Chat panel | Shape | Conversation bubble | 0 to 24 px | 12 px |
Chat panel | Shape | Add-to-cart button | 0 to 32 px | 32 px (pill) |
Chat panel | Shape | Input field | 0 to 32 px | 32 px (pill) |
Each slider label shows its current value, for example Conversation bubble — 12px. The avatar slider adds (circle) at 16 px, and the Add-to-cart button and Input field sliders add (pill) at 28 px or more.
What each slider changes on your storefront
Suggestions corner radius: the suggested questions in the Olvio widget on the product page.
Avatar corner radius: the avatar shown next to every AI reply in the chat panel. At 16 px, the avatar is a circle.
Conversation bubble: the shopper's messages and the AI replies, and the typing indicator. It also rounds the product image at the top of the chat panel, the product images on product cards in the chat, and the discount and sold-out badges on those cards. Whatever the slider value, the bottom corner of each message on the sender's side keeps a 4 px radius.
Add-to-cart button: the add-to-cart button above the input in the chat panel on your product pages, and the add-to-cart buttons on product cards in the chat when Enable add to cart in chat is on. See Show product cards and let shoppers add to cart from the chat.
Input field: the question field on the product page and at the bottom of the chat panel, the variant menus on product cards (when Enable add to cart in chat is on), and the answer buttons shown above the input in Olvio Advisor conversations.
The send button and the close button are round and have no slider.
Preview your changes
The Live preview updates as you drag a slider. Opening the Product page tab shows the product page preview, with the suggestions and the input field. Opening the Chat panel tab shows the chat panel preview, with the avatar, message bubbles, add-to-cart button and input field. You can also switch between the two with the Product page and Chat panel buttons above the preview.
The preview doesn't show product cards, Advisor answer buttons or your custom CSS, and the product thumbnail placeholder at the top of the chat panel preview doesn't follow the Conversation bubble slider (the product image on your storefront does). The avatar next to the replies in the preview follows the Avatar slider, but the larger avatar in the Avatar card is always shown as a circle. Check your storefront after you save.
Save and check your storefront
After you move a slider, a save bar appears. Click Save, or Discard to go back to your last saved values.
Wait for the Changes saved message. If an error message appears instead, such as Too many requests, your changes aren't saved: the save bar stays open, so wait a moment and click Save again.
Open or reload a product page on your storefront to see the new corners. The avatar, Conversation bubble and Add-to-cart button only show in the chat panel. Ask a question in the widget to open it and check them.
If you can't click Save, check the Style tab for a color field showing Expected format: #rrggbb and correct it first.
There's no reset button. To go back to the defaults, move each slider to the default value in the table above and save.
If your storefront still shows the old shapes, see My Appearance changes don't show on the storefront.
What the sliders don't cover
Theme editor block settings: the Olvio — Product page block in the Shopify theme editor can override colors and font size only. Corner radius always comes from Appearance.
Other shapes: to change a shape that has no slider, such as the send button, use custom CSS. See Add custom CSS to the widget.