Skip to main content

Mobile & desktop chat settings

ShopGuide's device-specific controls are deliberately minimal: show/hide per device, independent max-height limits, and a couple of layout accommodations for stores with a mobile navigation bar or a desktop drawer. This guide covers exactly those controls.

Show or Hide by Device​

In the ShopGuide admin app's Settings page:

  • Hide on desktop — removes the widget above the mobile breakpoint
  • Hide on mobile — removes the widget at or below the mobile breakpoint

The breakpoint is fixed at 766px: viewports 766px and wider count as desktop, 765px and narrower count as mobile. There is no additional tablet-specific tier.

Maximum Chat Height​

Configured separately per device in the Appearance page, as a percentage of the viewport height:

  • Chat max height (desktop) — default 35vh
  • Chat max height (mobile) — default 50vh

This caps how tall the open chat panel can grow before its message list scrolls internally.

Mobile Navigation Bar​

If your theme has a bottom mobile navigation bar, enable "Store has mobile navigation bar" (Settings → Bubble) so the chat's notification bar shifts up to avoid overlapping it.

Drawer Mode (Desktop, Experimental)​

"Enable Drawer Mode (experimental)" (Settings → Experimental Features) opens the chat as a fixed right-side drawer on desktop instead of scrolling the page to it inline. It automatically falls back to the standard behavior on screens narrower than 1024px. As an experimental feature, test it thoroughly before relying on it for a live store.

What's Not Configurable​

The following are not real ShopGuide settings — don't look for them in the admin app:

  • Separate positioning rules per breakpoint beyond the desktop/mobile split above
  • Swipe gestures, drag-and-drop, or multi-window support
  • Touch-target sizing controls (the widget's tap targets are fixed by its CSS)
  • Per-device color or font overrides

Testing Checklist​

  1. Preview the theme editor's mobile and desktop views after any settings change
  2. Confirm the bubble and open chat panel don't overlap your theme's own sticky elements (mobile nav bar, sticky add-to-cart bar, cookie banner)
  3. If you enabled Drawer Mode, resize the browser across the 1024px boundary to confirm the fallback works

Next Steps​

Keep device-specific configuration minimal: hide/show, height limits, and the mobile-nav/drawer accommodations cover the vast majority of themes.