Widget Customization
Appearance
Customize the look and position of Lumen's chat widget on your storefront.
Lumen's chat widget is configured through Shopify's Theme Editor. No coding required.
Accessing widget settings
- In your Shopify admin, go to Online Store → Themes.
- Click Customize on your active theme.
- Click the App embeds tab (puzzle-piece icon in the left sidebar).
- Click Lumen Chat Widget to expand its settings.
Widget position
Choose where the chat bubble appears on your storefront:
- Bottom right (default) — The standard position for chat widgets. Most customers expect it here.
- Bottom left — Use this if you have another widget or element in the bottom-right corner.
Widget colors
You can customize the widget's primary color to match your store's branding. This color is applied to:
- The chat bubble button
- The chat header background
- Send button and interactive elements
Enter a hex color code (e.g., #D97706) or use the color picker.
Widget size
Adjust the size of the chat window:
- Compact — Smaller chat window, good for stores with dense layouts
- Standard (default) — Balanced size that works for most stores
- Large — Bigger chat window with more visible conversation history
Mobile behavior
The widget automatically adapts to mobile screens:
- On mobile, the chat opens as a near-full-screen overlay
- The chat bubble scales down slightly to avoid blocking content
- Touch-friendly input and scrolling
No additional configuration is needed for mobile responsiveness.
Preview changes
All changes in the Theme Editor are previewed in real time. Click Save only when you're satisfied with the appearance.
Widget appearance changes apply immediately after saving. No need to republish your theme.