- Settings — Widget settings → Body & Content → Section Ordering.
- The live widget preview — open a tabbed editor for any section straight from the preview, including inside the AI chat workspace.
Every section option is available in both surfaces. A change you make in Settings shows up in the preview editor, and vice versa — there is one config behind both.
The section catalogue
Sections fall into two groups.Surfaces
Widget header, footer, the logged-out experience, and the Membership Tiers modal.
Body components
Earn & Spend, Points for Spend, Achievements, Leaderboard, Daily Game, Daily Streak, Refer a Friend, Quick Actions, Receipt Scanning, and the standalone Earn and Spend sections.
Per-section design controls
Each section row in Section Ordering carries its own controls.Show or hide a section
Every section has an enable toggle on the right of its row. Turn a section off to remove it from the widget body without deleting its configuration — flip it back on and your settings are still there. Two sections hide through their own control instead of the toggle:- Leaderboard — choose which live leaderboard to feature. Selecting None (hidden) hides the Leaderboard section on the storefront even while it is enabled, because there is nothing to show.
- Section header — open a section’s Edit header dialog (the pencil icon) to toggle Show section header, override the title and description, or Clear custom header to fall back to the defaults.
For team members with the Viewer role, every section control is read-only — drag handles, toggles, and selects are disabled so Viewers can review the configuration without changing it.
Reorder sections
Drag the grip handle to reorder sections; the new order is saved with the section. Reordering is keyboard-accessible as well as pointer-driven. The Earn and Spend sections have a special behaviour: give both a non-compact card layout and they split into two independent sections. Return both to the default or Compact layout and they automatically merge back into a single Earn & Spend section, keeping the earlier position.Choose a layout per section
Most sections expose a layout picker sized to that section. The choices, straight from the section editors:| Section | Layouts |
|---|---|
| Earn / Spend / Earn & Spend | Navigation, Compact, Promotional, Editorial (Promotional Two), Grid, Banner, Carousel |
| Quick Actions | Compact, List, Carousel, Bubbles, Marquee, Feature |
| Daily Game | Classic, Arcade, Compact, Hero, Grid, Minimal |
| Refer a Friend | Classic, Spotlight, Stats, Split, Banner, Minimal |
| Points for Spend | Classic, Spotlight, Compact, Split, Meter, Minimal |
| Achievements | Classic, Showcase, Compact, Timeline, Spotlight, Badges |
| Leaderboard | Classic, Podium, Compact, Ladder, Banner, Minimal |
| Daily Streak | Classic, Calendar, Compact, Flame, Progress, Minimal |
| Receipt Scanning | Classic, Spotlight, Compact, Steps, Ticket, Minimal |
Grid columns and image-first cards
When an Earn/Spend section uses the Grid card layout, the cards become image-first artwork tiles and a Cards per row control appears — pick 2, 3, or 4 columns. Grid and the other rich card layouts also unlock featured items: hand-pick which challenges or rewards appear, in what order, with per-item overrides:- Image — upload artwork or generate it with AI. Each layout shows its recommended dimensions (for example, Grid cards are 5:4 artwork) and feeds the right aspect ratio into the generator.
- Background and Text colour overrides per item.
- A Description override.
- A Max items slider (1–5).
Per-section colour and treatment overrides
The Style dialog (the paintbrush trigger on a section row, and the Style tab in the preview editor) is where a section gets its own visual identity, independent of the global theme. It groups into:Treatment
Treatment
Header & background style — inherit the theme, or set a Solid colour, a Gradient (from/to), or a background Image URL — plus text alignment.
Cards, borders & icons
Cards, borders & icons
Card style, border style, and — where the section has them — icon style and image style.
Element visibility
Element visibility
Toggle individual elements per section: icon, description, metadata, progress, image, and CTA.
Colour overrides
Colour overrides
Override the colours of the title, description, metadata, cards, borders, icons, and accent. Any override left empty inherits the theme colour.
CTA style
CTA style
For sections with a call to action: the button treatment plus the CTA fill and text colours.
Tabbed in-preview section editors
From the live widget preview you can open a focused editor for any single section. The editor splits its options into tabs so you work on one concern at a time:- Content — copy and what appears in the section.
- Layout — the structural presentation (the layouts listed above).
- Style — the treatment and colour overrides described above.
Unsaved-changes guards
The section editors guard your work:- An unsaved-changes dot appears next to the section title while you have edits pending, and the browser warns before you navigate away.
- Closing with unsaved edits prompts Discard unsaved changes? — discarding returns the live preview to the last saved version.
- You can only edit one section at a time. Trying to open another section while one has unsaved edits prompts you to save or discard your current changes first.
Editing sections from the live preview and chat
Inside the AI chat workspace, the live widget preview is interactive. Each section in the preview can hand you straight into the right tool:- Edit a section — opens its tabbed editor.
- Move a section up or down.
- Hide a section — opens the editor with the section pre-set to hidden, still behind the unsaved-changes guard.
- Ask the agent about a section — sends a section-scoped message into the chat composer so you can describe the change in words.
Related
- Embed & Widget Controls — loading state, community-level toggle, and the launcher form.
- Branding & Appearance — the community-wide theme that section overrides inherit from.