Setting the file. One moment.
Footer · Storefront Best Practices · medusajs/medusa-agent-skills · Skills Docs
ContentsBack to the top of the page Mcloud
Footer provides supplementary navigation, company info, and trust signals. Appears on every page.
Assumed knowledge : AI agents know how to build multi-column layouts and navigation lists. This guide focuses on ecommerce footer patterns.
Navigation links (categories, pages)
Dynamic category fetching from backend
Legal links (Privacy, Terms)
Newsletter signup
Payment method badges
Social media links
Responsive (multi-column desktop, single-column mobile)
Navigation links (categories from backend)
Contact information (email, phone)
Legal links (Privacy Policy, Terms of Service)
Copyright notice with current year
Newsletter signup form
Payment method badges
Social media links
Trust signals
Standard pattern: 4-5 columns
Column 1: Shop/Categories (dynamic from backend)
Column 2: Customer Service (Contact, FAQ, Shipping)
Column 3: Company (About, Careers)
Column 4: Newsletter signup
Bottom: Legal links, payment badges, copyright
CRITICAL: Fetch categories from backend dynamically - never hardcode. Fetch from ecommerce backend API (for Medusa: sdk.store.category.list()).
Stays in sync with main navigation
Categories added/removed automatically
No manual footer updates
Show top-level categories only (5-8 max)
Match labels from main navigation
Cache category data (rarely changes)
Email input + submit button (“Subscribe”)
Value proposition (CRITICAL) : State clear benefit (“Get 10% off your first order”, “Exclusive deals + early access”). Don’t just say “Subscribe to newsletter”.
Privacy note: “We respect your privacy” + link to privacy policy
Layout: Input + button inline (desktop), stacked (mobile). Full width on mobile.
Payment method icons:
Display accepted payments (Visa, Mastercard, PayPal, Apple Pay, Google Pay). 40-50px icons, horizontal row, bottom of footer.
Trust badges (optional):
Max 3-4 legitimate certifications (SSL, BBB, money-back guarantee). Only use real badges with verification links.
Single column, stacked: Logo → Navigation → Newsletter → Social → Legal/copyright.
Collapsible sections (optional): Accordion pattern for navigation to reduce height. Keep newsletter/social always visible.
Touch-friendly: 44px minimum links, 8-12px spacing, 14-16px text, 48px newsletter input height.
Not done: Navigation links (categories, pages)
Not done: Categories fetched dynamically from backend
Not done: Contact information (email, phone)
Not done: Legal links (Privacy Policy, Terms of Service)
Not done: Copyright notice with current year
Not done: Newsletter signup form with value proposition
Not done: Payment method icons
Not done: Social media links
Not done: Responsive (4-5 columns desktop, single-column mobile)
Not done: Mobile: 44px touch targets
Not done: Mobile: Collapsible sections (optional)
Not done: Semantic HTML (<footer>, <nav> sections)
Not done: ARIA labels on navigation (“Footer navigation”)
Not done: Keyboard accessible
Not done: Visible focus indicators
Not done: Color contrast 4.5:1 minimum
Not done: Consistent across all pages
reference/components/footer.md