TL;DR
The container is the outer layer of your message and controls overall position, size, and styling.
Styling and placement settings are found in the Styles and Placement tabs of the editor.
You must select the container (not just a section) to access these settings.
You can also resize the container by dragging its blue border handles.
Size can be set manually, or automatically based on content.
When to Use It
Use container styling when you want to:
Control where your message appears on the screen
Adjust the size or shape of your message box
Set global background color, padding, and layout
How It Works
The container wraps your entire message and sets the outer styling and layout. You'll know it's selected when you see the Container label at the top of your message.
The container controls:
Position on the page (via the Placement tab)
Width, height, and padding (manual or auto-sizing)
Stack direction (horizontal or vertical)
Background color, opacity, and border
Alignment of content directly placed in the container
Dismissible vs. collapsible options
Dismissible means a guest can close the message completely so it no longer appears.
Collapsible means a guest can minimize the message into a smaller bar that can be reopened. (Collapsible is only available for the Price Check template for now.)
Collapsed state styling for collapsible messages
Collapsed state styling for collapsible messages
Step-by-Step Instructions
1. Select the Container
Click on the outer edge of your message or use the layers panel to select the container. Look for the Container tag to confirm.
You can also click and drag any of the blue handles around the border of the container to manually resize it. The new dimensions will be reflected in the Size fields under the Styles tab.
Alternatively, you can set width and height to auto, which makes the container adjust automatically to fit your content. However, if you find that the message looks too large when both are set to auto, try switching one or both dimensions back to px for more precise control.
2. Open the Styles Tab
The Styles tab allows you to control layout and appearance.
Settings include:
Type: Choose whether the container is dismissible (can be closed) or collapsible (expand/collapse)
Initial Appearance: Set whether the message is expanded or collapsed when it loads (only for collapsible messages)
Size: Define width and height manually in %/px, or set to auto
Layout: Choose vertical or horizontal stacking of inner content. Vertical stacking creates a taller, portrait-style layout. Horizontal stacking places content side-by-side for a wider, landscape layout.
Alignment: Sets how content placed directly in the container is aligned (left, center, right, top, middle, bottom). This can be overridden by section alignment.
Padding & Gap: Adjust space inside the container and between stacked elements
If the container is collapsible, you’ll also see a Collapsed state section where you can:
Toggle whether the direct price appears
Set collapsed font, text color, and background
Adjust opacity independently from the expanded view
3. Customize Appearance
Still within the Styles tab, scroll to Appearance:
Background color: Use a solid color or brand-aligned hex code
Opacity: Adjust transparency of the background
Corner radius: Round the edges of your message container
Border: Add or remove border, change color and thickness
4. Open the Placement Tab
The Placement tab controls where the message sits on the page.
Settings include:
Widget Position Grid: Click to choose a corner or center alignment (e.g. bottom-right)
Distance from Edge: Fine-tune how far from page edges the message sits
Z-index: Adjust stacking order on the page (higher values bring it to the front)
Pro Tip: By default, the z-index is set high enough (usually around 999) so your message overlays everything. You only need to change this if you know exactly what you want to show above or below your message. If you’re unsure, it’s best to leave the default in place.
5. Save Your Changes
Be sure to Save after each styling or placement update before previewing.
Pro Tips
Start with a template, then tweak the container to suit your layout needs
When testing placement, use preview mode to ensure it doesn't interfere with other page elements
Use auto size when content length varies or you want a more adaptive layout
FAQs / Troubleshooting
Question: I don’t see the container label—what am I editing?
Answer: You're likely editing a section or block. Use the layer selector to navigate to the container.
Q: Why won’t my background color show?
A: A section inside the container might have its own background set, which can cover the container background.
Q: Can I use percentage values for width/height?
A: No. You can only set dimensions in px (pixels) or choose auto to let the container size itself automatically to fit your content.
Q: Can I resize the message by dragging?
A: Yes. Select the container and drag any of the blue dots around its edge. The updated dimensions will appear in the Styles panel.
Q: What happens if both container and section alignment are set?
A: The section alignment takes priority. This means any content inside that section will follow the section alignment, not the container alignment