Appearance hub
Open Popup notifications → Appearance to preview your live popup design. The page shows side-by-side desktop and mobile previews and reports whether the theme app embed is enabled.
From here you can:
- Open fullscreen editor: full design controls in a dedicated window
- Enable app embed: jump to the theme editor if the embed is off
- Manage drafts: create, duplicate, rename, delete, and publish appearance drafts (up to 10)
Card styles
Recently supports five popup styles:
- Classic: product thumb on the left, message on the right
- Modern: soft-rounded card with contemporary spacing
- Spotlight: highlight-banner treatment
- Minimal Pill: compact text-only pill (no product image)
- Editorial: full-width product image above the copy
Design controls
Desktop and mobile each have independent settings. Key controls include:
Layout & placement
- Placement: corners (bottom-left, bottom-right, top-left, top-right), top center, or bottom center
- Edge distance: uniform or per-edge custom insets
- Corner shape and border thickness
- Shadow intensity
Colors
- Background, text, product link, and border colors
- Verified badge / indicator color
- Relative time (“4 minutes ago”) color
- Star color (review notifications)
- Shopify brand colors can be pulled in as swatches when available
Typography
- Font family from the built-in catalog (Google Fonts and system fonts)
- Font weight and size
- Separate time font size
Product image
- Image size and padding
- Thumb shape (square, rounded, extra-rounded, circular)
- Default product image: upload a fallback shown when a notification has no product photo (PNG, JPG, WEBP, or GIF up to 2 MB)
Animation
- Entrance animation style
- Hover attention animation (optional)
- Close button style
Theme drafts
Appearance drafts let you experiment without affecting the live storefront. Create a draft, edit it in the fullscreen editor, preview on desktop and mobile, then Publish when ready. Publishing replaces the live appearance immediately.
You can maintain up to 10 drafts. Duplicate an existing draft to branch from a known-good design.
Changes save to your Shopify store metafields and sync to the theme extension on the next page load. If previews look stale, hard-refresh the storefront.