Skip to main content

Chat positioning & layout

ShopGuide only has one placement pattern: a fixed floating bubble anchored to a bottom corner of the viewport. This guide covers the real configuration options and how to avoid conflicts with the rest of your theme — it's not a page-by-page placement strategy guide, because the bubble's position doesn't change based on where in the page you add the block.

How Positioning Actually Works​

The chat bubble is rendered with position: fixed, 20px from the bottom of the viewport, and either 20px from the left or right edge depending on the Bubble position setting. It stays in that corner regardless of scroll position, and regardless of which theme section the "ShopGuide Chat" block is attached to. There is no sidebar-embedded, inline, or multi-window placement mode.

Configurable Options​

In the ShopGuide admin app's Settings → Bubble page:

  • Position: left or right
  • Size: the bubble's pixel diameter (default 60px)
  • Icon: sparkles, chat, message, question, robot, or search
  • Icon color
  • Show/hide the bubble entirely

Choosing Left vs Right​

Since the bubble is fixed to one corner, the main decision is which corner avoids conflicts with elements your theme already places there:

  • Right (the default) is the more common corner for chat widgets, but check for a sticky "Back to top" button, a cart drawer trigger, or a cookie-consent banner that also anchors bottom-right.
  • Left is a good alternative if your theme's cart icon, sticky add-to-cart bar, or promotional banner lives bottom-right.
  • On mobile specifically, check against your theme's bottom navigation bar — if your theme has one, enable "Store has mobile navigation bar" (see Mobile & desktop chat settings) so the chat's notification bar shifts to avoid it.

Z-Index​

The bubble renders at a very high z-index so it stays above normal page content, including most modals. If a specific overlay (e.g. a custom cookie banner or a third-party app's own fixed element) still overlaps it, that's a CSS specificity/z-index conflict on the other element, not something ShopGuide's settings control — see Advanced chat styling if you need to adjust the bubble's own styling.

What This Guide Isn't​

To keep expectations accurate: there are no per-page-type positioning presets (homepage vs. product vs. collection), no scroll-triggered position changes, no A/B-testable coordinates, and no "above the product grid" or "in the sidebar" layout modes. Page-specific customization in ShopGuide is about the launch message and buttons, not the bubble's screen position — see Custom launch messages.

Troubleshooting Positioning Issues​

Bubble not visible

  • Check that it isn't hidden by the device visibility toggles (see Mobile & desktop chat settings)
  • Check that the storefront isn't paused via the store-wide pause toggle
  • Inspect the page for a competing fixed-position element with an even higher z-index

Bubble overlaps other UI

  • Try the opposite corner (left vs right)
  • Enable "Store has mobile navigation bar" if applicable
  • Add targeted Custom CSS to nudge the bubble's own offset — see Advanced chat styling

Next Steps​

The floating bubble pattern is simple by design — most positioning work is really about picking the right corner and avoiding overlap with your theme's own fixed elements.