Add the Olvio widget to your product pages
The Olvio widget is a block you add to your product template in the Shopify theme editor. On your product pages it shows your Expert name, your Hook question, suggested questions and a question field, and the chat panel opens when a shopper sends a question. You don't need to edit any theme code.
Before you start
Your theme must be an Online Store 2.0 theme. If Olvio detects an older Online Store 1.0 theme, the Dashboard shows the banner Your theme is not compatible with Olvio's widget. See Online Store 1.0 not supported — what to do.
The widget only appears on your storefront while you're subscribed to a plan, including during your free trial.
Connect your Anthropic API key. Without a key, the block still shows its Expert name, Hook question and question field, but no suggested questions, and sending a message shows an error message (in English: Sorry, an error occurred. Please try again.). See Connect your Anthropic (Claude) API key.
Add the block from the setup guide
Open Olvio in your Shopify admin. On the Dashboard, find the Get Olvio ready for your first customer card.
On the step Add the Olvio block to your product page, click Open theme editor. The Shopify theme editor opens in a new tab on a product template, with the Olvio block added in a new Apps section for you to preview.
Drag the section to where you want the widget to appear on the page.
Click Save to add it to your theme. The block shows on your storefront only if that theme is your published theme.
The card disappears once every step is done. If you clicked Hide on the card, it doesn't come back, so add the block manually as described below. See Your setup guide: get Olvio ready for your first customer.
Add the block manually
From your Shopify admin, go to Online Store.
Find your published theme, then click Edit theme. If you add the block to another theme, it shows on your storefront only once that theme is published.
Open the page menu at the top of the editor (it shows Home page) and select the product template you want to edit.
On the sidebar, click Add section, or Add block inside the section where you want the widget.
From the drop-down menu, in the Apps section, select Olvio — Product page.
Drag the block into position if needed, then click Save.
The Olvio block is only available on product templates. Changes to a template apply to every product that uses it, so if some of your products use another product template (chosen in the product's Theme template setting), add the block to that template as well.
If the block isn't in the list, see Cannot find the Olvio block in the theme editor.
Override colors or font size for one template (optional)
By default, the widget uses the colors and font size set on the Appearance page in Olvio. To change them for one template only, select the Olvio block in the theme editor and use its settings:
Use custom colors for this block: when checked, the widget uses the Accent, Accent foreground, Background, Surface, Border, Text and Muted text colors set in the block.
Use custom font size for this block: when checked, the widget uses the block's Base font size, from 12 to 20 px (14 px by default).
These overrides apply to every product that uses the template, and also to the chat panel that opens from the widget. The font, corner radius, avatar and custom CSS always come from the Appearance page. See Customize widget colors.
Check that the widget is live
Open a product page on your storefront: the widget appears where you placed the block. The first time the widget loads on an active product that Olvio has already imported, the setup guide marks this step as done (if other steps are still open, its button changes to View conversations). This step can also be checked off while you preview the block in the theme editor, so check a product page on your live storefront to confirm the block is saved: a preview alone doesn't publish it. To try a full conversation, see Test Olvio on your storefront.
If you checked Hide the widget on languages Olvio doesn’t cover in the Languages card on the Advanced tab of Appearance, the widget doesn't appear when a shopper browses your store in a language the widget doesn't cover. When the box is unchecked, the widget still shows on those pages: its suggested questions are in your default language, and the chat starts in that language. On a page in a language Olvio doesn't support, the suggested questions are in English instead, and the chat starts in English, if your widget serves English. Under the checkbox, Olvio lists the languages your store publishes that the widget doesn't cover. If the widget covers every language your store publishes, the checkbox is grayed out. The theme editor always shows the block, whatever language you preview. See Multi-language: choose which languages your widget serves.
If the widget still doesn't appear, see The widget isn't showing on my storefront.
Using Olvio Advisor (Growth and Scale)
The product page block is separate from Olvio Advisor. If your store is on the Growth or Scale plan and you use Advisor links, also turn on the Olvio Advisor app embed in your published theme: in the theme editor, click the App embeds icon, turn on Olvio Advisor, then click Save. Advisor links need this embed: once it's on, a link opens the Advisor on any page of your store, except in languages hidden by Hide the widget on languages Olvio doesn’t cover. See Turn on the Olvio Advisor and add Advisor links to your store.