Guides top announcement bar and sticky banner design for conversion. Top banners answer visitor questions in ~3 seconds (trust, discount, free shipping, urgency) and can increase coupon redemption by 30-50% when used well.
When invoking
On
first use
, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On
subsequent use
or when the user asks to skip, go directly to the main output.
Initial Assessment
Check for product marketing context first:
If
.claude/product-marketing-context.md
or
.cursor/product-marketing-context.md
exists, read it for offers, messaging, and Section 12 (Visual Identity).
Identify:
Goal
Lead capture, promo, urgency, trust, free shipping
Placement
Above header (sticky) or below; dismissible or persistent
Audience
All visitors vs segmented (geo, returning, cart abandoners)
Best Practices
Use Cases
Use
Example
Lead capture
Newsletter, lead magnet, demo request
Promo
Discount code, flash sale, free shipping threshold
Urgency
Limited-time offer, countdown
Trust
Guarantee, security, shipping info
Launch
Product launch, event, cross-sell
Design
Clear hierarchy
Message + CTA in ~400ms "blink test"
Minimal copy
One line typical; link for "Learn more"
High contrast
Stand out from page; CTA color distinct
Mobile-first
70%+ traffic on mobile; thumb-friendly close/CTA
Technical
Desktop
1920x600px keeps content above fold; 16:9 common
Mobile
800x1200px (2:3 portrait); use separate assets, not scaled
Performance
Optimize images; oversized banners hurt LCP and SEO
Avoid
Crowding the header; leave space for nav and logo
Too many CTAs; one primary action
Stale messaging; refresh every 2-4 weeks
Output Format
Message
and CTA copy
Placement
(sticky top, below header)
Targeting
(all vs segment)
Design
notes (contrast, mobile)