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)