Show product cards and let shoppers add to cart from the chat
When Olvio recommends other products from your catalog, it shows product cards under its answer. By default, each card links to the product page. You can also let shoppers choose a variant and add it to their cart without leaving the chat. Both are available on every plan.
When product cards appear
Cards appear under an answer that recommends, offers or describes other products from your catalog. They sit in a row that shoppers scroll sideways.
In the product page chat, an answer generally shows no more than 6 cards.
In Olvio Advisor conversations, an answer shows up to 4 cards. The Advisor is available on Growth and Scale. See What is Olvio Advisor?.
There's no setting to turn product cards off.
What a card shows
By default, each card shows the product image (when the product has one), title and price. Clicking a card opens the product page in a new tab.
Price: a product with one price shows that price, formatted for the language of the storefront page, for example €24.90 in English or 24,90 € in French. Card prices use your store's default currency and the prices synced from your catalog. They aren't converted into the currency a shopper browses in. A product with several prices shows From and its lowest price. A product whose variants are all free shows Free.
Discount badge: when a product has one price and a compare-at price higher than that price, a badge such as -20% appears on the image. The percentage is rounded down.
Sold out badge: when none of a product's variants is available for sale, a Sold out badge appears on the image instead of the discount badge. Products with 50 or more variants never show this badge.
Products without an image show neither badge.
Turn on add to cart in the chat
Open Appearance in the Olvio app menu.
Click the Advanced tab.
In the Add to cart in chat card, check Enable add to cart in chat.
Click Save in the save bar. The message Changes saved confirms it.
The option is off by default. Once you save, it applies to the next answers in the product page chat and in Olvio Advisor conversations.
What shoppers see with add to cart on
Cards change for products with at least one available variant that can be shown in the dropdowns:
An Add to cart button appears under the price.
Under the button, there's one dropdown for each option that has more than one value, such as Color or Size. A product without such options shows only the button.
The dropdowns start on the first available variant. Values that aren't available with the other options selected are grayed out and struck through, and can't be chosen.
The price follows the selected variant. A free variant shows Free.
If no available variant matches the selected options, the button reads Sold out and can't be clicked.
The image, title and price still open the product page in a new tab. These cards don't show the discount badge.
Other products keep the default card described above. The dropdowns include at most 50 variants of a product.
What happens when a shopper clicks Add to cart
Olvio adds one unit of the selected variant to the shopper's Shopify cart. Shoppers can't choose a quantity in the chat.
The button shows Adding... with a spinner, then Added to cart with a check mark.
About a second later, the page reloads so your theme's cart shows the new item, and the chat panel reopens.
If the cart doesn't accept the item, the button shows Error - try again, then returns to Add to cart after a few seconds so the shopper can retry.
Hide free variants
The Add to cart in chat card also has a Hide free variants (price 0) checkbox. It's on by default, and it affects card prices even when Enable add to cart in chat is off.
Checked: variants priced 0 are ignored when Olvio works out the card price and, with add to cart on, they're hidden from the dropdowns. This only happens when the product also has paid variants. A product whose variants are all free still shows, priced Free, and with add to cart on its variants stay selectable. If a product's only available variants are free, its card keeps the default look, without add to cart.
Unchecked: variants priced 0 count. On cards without add to cart, a product that mixes free and paid variants shows From with a zero price, for example From €0.00. With add to cart on, its free variants appear in the dropdowns.
Click Save in the save bar to apply the change.
The Add to cart button in the chat panel
On product pages that show the Olvio widget, the chat panel shows an Add to cart button above the question field, for the product the shopper is viewing. This button isn't controlled by Enable add to cart in chat.
It shows the price and adds the variant currently selected on the product page.
If that variant is unavailable, it reads Sold out and can't be clicked.
A click works like a card button: one unit is added, Added to cart appears, and the page reloads with the chat panel open.
It's hidden while the chat panel shows an Olvio Advisor conversation.
Match the cards and buttons to your brand
Colors: add-to-cart buttons use your Accent color and Accent foreground. Product names on cards use Text, and prices use Muted text. If Use custom colors for this block is checked on the Olvio — Product page block in the theme editor, the block's colors replace these on product pages that show that block. See Customize widget colors.
Corner radius: the Add-to-cart button slider, in the Shape card of the Chat panel tab, sets the corners of both the card buttons and the chat panel button. Variant dropdowns follow the Input field slider, and card images follow the Conversation bubble slider. See Customize the widget's corner radius.
Custom CSS: use
.olvio-cardfor each card,.olvio-card-atcfor card buttons and.olvio-atc-btnfor the chat panel button. Add!importantto every property you override. See Add custom CSS to the widget.
The Live preview on the Appearance page shows the chat panel's Add to cart button, but not product cards. Check cards on your storefront.
Card text in other languages
On cards, From, Free, Sold out, Add to cart, Adding..., Added to cart and Error - try again follow the language of the storefront page. This text exists in English, French, German, Spanish, Italian and Portuguese, and cards use English on pages in other languages. You can't edit it. Product titles and the values in the variant dropdowns come from your catalog in your store's default language, whatever the language of the page. Card links open the product page at its default address, without the language prefix of the page the shopper is on, so the new tab may show the page in your store's default language. See Multi-language: choose which languages your widget serves.
Track add-to-cart results
When a shopper who chatted with Olvio adds a product to the cart on a product page that shows the Olvio widget, within 7 days before or after the conversation, whether from a card, the chat panel button or your theme's own button when it adds the product without loading a new page:
The conversation is marked in the Added to cart column of Conversations.
It counts toward Add-to-cart rate with Olvio on the Dashboard (click Olvio in the app menu).
An add made before the shopper's first message is linked only if the same cart was already used in an earlier conversation with Olvio. If it isn't, later adds with your theme's button aren't linked either until the shopper reloads the page or opens another one, even if they chat in between.
Adds from Olvio Advisor cards on pages that don't show the Olvio widget block aren't recorded as adds to cart. Those conversations are marked Added to cart only if the shopper also adds to cart on a product page that shows the Olvio widget within the 7 days, or if they have an attributed order.
A conversation with an attributed order within 7 days before or after it is also marked Added to cart and counts toward Add-to-cart rate with Olvio. See How conversion attribution works.
Test your setup
Check Enable add to cart in chat and click Save.
Open one of your product pages and ask for alternatives, for example "Show me other options."
On a card with several options, choose a value in one dropdown, then open another dropdown and check that values out of stock with that choice are struck through.
If a product mixes free and paid variants, check that its card matches your Hide free variants (price 0) choice.
Click Add to cart on a card. After the page reloads, check that your cart contains the variant and that the chat panel is open again.
Open Conversations in the Olvio app menu and check that your test conversation is marked Added to cart.
For a full storefront check, see Test Olvio on your storefront.