Skip to content
Static chat
Section overview
The Static chat section creates a simulated chat interface for your Shopify store, allowing you to display conversations with animated typing indicators, timed message reveals, and support for text, avatars, images, and videos.
Common use cases
- Creating interactive customer support demonstrations
- Showcasing product Q&A in a conversational format
- Displaying testimonials or customer experiences in a chat-like interface
- Creating guided tutorials or onboarding flows in a friendly chat format
Usage tips
- Use the delay settings to create a natural conversation flow by timing message appearances
- Alternate between left and right alignment to create the appearance of a two-person conversation
- For best readability, keep your column width between 50-70% on desktop
- Add avatar blocks after text blocks to create a more personalized conversation experience
Mobile responsiveness considerations:
- The chat interface automatically adapts to smaller screens, with content reflow
- Consider using shorter messages for better mobile readability
- Test your chat section on mobile to ensure the timing feels natural on smaller screens
Section settings
| Setting | Description |
|---|---|
| Top spacing | Controls the amount of padding above the chat section (in pixels) |
| Bottom spacing | Controls the amount of padding below the chat section (in pixels) |
| Color scheme | Sets the background color for the entire chat section |
| Custom color | Allows choosing a custom background color when "Custom" is selected as the color scheme |
| Text color | Controls the text color for the entire section (default, light, or dark) |
| Border color | Sets the color for any borders (subtle or strong) |
| Enable color fade | Makes the background and text color fade in when the section enters the viewport |
| Border position | Controls where borders appear (none, top, bottom, or both) |
| Horizontal alignment | Sets the horizontal alignment of the chat column (left, center, or right) |
| Column width | Controls the width of the chat content column as a percentage of the container on desktop |
| Enable margin | When enabled, adds horizontal margin to the section |
| Visibility | Controls when the section is visible (all devices, mobile only, or desktop only) |
Block settings
Text
Text blocks display chat messages with typing indicators and timed reveals. Each text block can be styled and positioned independently.
Limit: 50 blocks
| Setting | Description |
|---|---|
| Content | Rich text editor for the message content |
| Color scheme | Sets the background and text color for this message bubble |
| Horizontal alignment | Controls whether the message appears on the left or right side |
| Delay | Sets how many seconds to wait before revealing this message (0-10s) |
Avatar
Avatar blocks display a profile image with a timestamp, typically used to indicate who is speaking in the conversation.
Limit: 50 blocks
| Setting | Description |
|---|---|
| Image | The profile image to display (shows a placeholder if none selected) |
| Time | Text displayed next to the avatar (typically shows when the message was sent) |
| Horizontal alignment | Controls whether the avatar appears on the left or right side |
Image
Image blocks display an image within the chat interface, with typing indicators and timed reveals.
Limit: 50 blocks
| Setting | Description |
|---|---|
| Image | The image to display in the chat (shows a placeholder if none selected) |
| Horizontal alignment | Controls whether the image appears on the left or right side |
| Delay | Sets how many seconds to wait before revealing this image (0-10s) |
Video
Video blocks embed videos in the chat interface, with typing indicators and timed reveals.
| Setting | Description |
|---|---|
| Video | The video to display in the chat |
| Enable autoplay | When enabled, the video plays automatically when revealed |
| Enable mute toggle | When enabled, displays a button to toggle sound on/off |
| Enable loop | When enabled, the video will repeat continuously |
| Horizontal alignment | Controls whether the video appears on the left or right side |
| Delay | Sets how many seconds to wait before revealing this video (0-10s) |