Shopify Chat Widget UX: Placement, Greeting, Mobile Rules
A Shopify chat widget helps when the shopper opens it and gets in the way when it opens itself. Keep the chat button small and out of the way of the add-to-cart button and filters, especially on phones; let customers start the chat; write a greeting that says what you can answer and when a person replies; and link to chat from the places people look for help, such as the contact page and the FAQ. In Shopify Inbox, the greeting, availability hours and first replies apply to conversations your staff handle; if you assign the Inbox agent, it answers with its own persona instead.
What research says about chat widgets
Baymard Institute’s usability testing, published in its article on live chat usability issues (October 15, 2019), is a dated study of how shoppers react to chat, so use it as a checklist and test your own widget on a phone. It found three implementations disruptive: chat windows that cover the page, smaller chat pop-ups that must be closed, and sticky chat bubbles that stay on screen. Users often saw chat the site started as an interruption, some struggled to close pop-ups with small “No, thanks” targets, and on mobile, sticky chat elements covered search suggestions, color swatches and filter buttons. Users who went looking for chat themselves, for a returns or shipping question, found it helpful.
Baymard’s recommendations follow from that: let the user start the chat, put chat links where people expect help (header, footer, help pages), be careful with sticky chat on mobile, consider making chat pop-ups desktop-only, and if the site must start the chat, exclude pages such as filtering and checkout, show the prompt rarely, and wait before showing it.
Six rules and the Inbox setting for each
Shopify’s Help Center describes Inbox chat as turned on and styled in the theme editor, under App embeds > Online store chat, with settings for colors, the activator (icon, label, horizontal and vertical position), typography, border radius, featured products and the greeting; availability hours and first replies sit under Sales channels > Inbox > Chat settings.
| Rule | Why | Where in Shopify |
|---|---|---|
| 1. Let the shopper open the chat | Site-started chat reads as an interruption | Avoid apps that pop chat open on load; check the widget’s settings for an auto-open option |
| 2. Keep the button clear of key controls | Sticky chat covers swatches, filters and the add-to-cart on phones | Activator horizontal and vertical position; check against your theme’s sticky add-to-cart |
| 3. Use a label, not only an icon, where space allows | A label says what the button does | Activator label, such as “Questions? Chat with us” |
| 4. Write a greeting with the facts | Shoppers want to know what you answer and when | Greeting message: topics you help with and reply hours |
| 5. Tell the truth about hours | “Always available” by default promises a reply at 3 a.m. | Chat settings > Availability, plus first replies for in-hours and out-of-hours chats |
| 6. Link to chat from help content | People look for chat when they have a question | Links from the contact page, FAQ and shipping and returns pages |
A greeting that works: “Hi, ask us about sizing, shipping or an order. We reply in about an hour, Monday to Friday 9 a.m. to 5 p.m. ET; outside those hours, leave a message and we’ll answer by email.”
Show featured products in the chat window is worth testing on a store with a small catalog, where a short list answers “what do you sell?”; on a large catalog it adds noise. Instant answers, the clickable questions in the chat window, cover the most common questions without a person; how they work is in add live chat to Shopify.
Check it on a phone
Open a product page, a collection page with filters and the cart on a phone, and look for three problems: the chat button covering the add-to-cart button or a sticky buy bar, the button covering the last filter or swatch, and the button sitting over the cookie banner. Move the activator’s position until all three pages are clear; vertical position is often the fix when a theme has a sticky add-to-cart at the bottom. Then open the chat and check that the greeting fits without scrolling. Whether chat is worth running at all for your store is in live chat for Shopify, and other support guides are in the running a store hub.
Frequently asked questions
Where should the chat button go? Put it in a corner where it does not cover the add-to-cart button, filters or swatches on a phone, and set it with the activator’s horizontal and vertical position in the Inbox app embed. Also link to chat from your contact and help pages, where Baymard’s research found shoppers look for it.
Should chat open automatically? Baymard’s testing found site-started chat was often seen as an interruption, so let the shopper open it. If you use a tool that opens chat by itself, keep it off filtering and checkout pages, show it once, and add a delay.
What greeting works? A good greeting names what you can help with, when a person replies and what happens outside your hours. Keep it to two or three sentences so it fits the chat window on a phone.