Widget list

The default page after installing the app, titled “Widgets”. Centralized management of all widgets in your store.

Image: full widget list (header + setup guide + StatsRow + view toggle + grid / list).

Header

• Page title: “Widgets”
• Primary action: “Create widget” button → Widget creation wizard

Setup guide (conditional)

Shown when install steps are incomplete. The “Setup guide” card:

• Subtitle: “Get TT Badges & Product Labels running in a few steps.”
• Progress: “{done} / {total} steps complete”
• 4 steps: “Enable app embed” → “Create widget” → “Add app block” → “Visit storefront”
• “I’ve done this” / “Skip” / “Close setup guide”

Image: “Setup guide” card (4-step progress).

StatsRow

Four cards:

• “Published” count

• “Unpublished” count

• “Widget impressions” (“Last 90 days”)

• “App status” — “Enabled” / “Disabled”

  • “Enabled” description: “App embed is enabled — published widgets should be visible on your storefront.”
  • “Disabled” description: “App embed is not enabled; widgets won’t render on the storefront.” + “Enable” button

Image: StatsRow (with “Disabled” highlighted state).

View toggle

Top-right “Grid” / “List” toggle.

Grid view

Four-column responsive layout. Each card:

• Live widget preview (200px tall, interactive)
• Name (bold) + status badge (“Published” / “Unpublished” / “Pending” / “Error” / “Custom” / “Scheduled” / “Expired” / “Hidden”) + ⋯ menu
• Placement label
• Stats row: “Impressions {n}” · “Clicks {n}” · “Last 90 days”
• “Copy ID” button (tooltip: “Copy this widget’s ID and paste into theme block settings”)
• “Add to theme” button (tooltip: “Open the theme editor with this widget pre-selected”, opens theme location picker: Home / Product page / Collection page)
• ⋯ menu: Edit / Rename / Duplicate / Delete

Image: grid view (multiple cards) + single card zoomed in.

List view

Header columns: Name / Placement / Stats / Status / Actions

Row interaction: drag to reorder, checkbox to bulk-select.

Bulk actions bar (shown when selecting):

• “{n} selected”
• “Publish” / “Unpublish” buttons
• More Actions: Duplicate / Delete

Row ⋯ menu: Edit / Rename / Duplicate / Copy ID / Delete

Image: list view + bulk-selection state.

Empty state

Shown when no widgets exist:

• Title: “Create your first widget”
• Description: “Build widgets with headings, buttons, text, and images — they render directly in your store theme.”
• “Create widget” button

Image: empty state.

Dialogs

• “Rename widget”: title + text input + “Save” / “Cancel”
• “Delete widget” confirmation: “Are you sure you want to delete ‘{name}’? This cannot be undone.” + “Delete” / “Cancel”
• Bulk delete confirmation: includes count

Success toasts:

• “Widget deleted”
• “Widget renamed”
• “Widget saved”
• “Duplicate created”
• “Copied!” / “Widget ID copied! Paste into theme block settings.”

Image: three dialogs each.