# Footer Component

## Contents

- [Overview](#overview)
- [Essential Footer Elements](#essential-footer-elements)
- [Dynamic Category Links (Ecommerce-Specific)](#dynamic-category-links-ecommerce-specific)
- [Newsletter Signup](#newsletter-signup)
- [Payment and Trust Badges](#payment-and-trust-badges)
- [Mobile Footer](#mobile-footer)

## Overview

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.

### Key Requirements

- 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)

## Essential Footer Elements

### Must-Have Content

**Required:**
- Navigation links (categories from backend)
- Contact information (email, phone)
- Legal links (Privacy Policy, Terms of Service)
- Copyright notice with current year

**Strongly recommended:**
- Newsletter signup form
- Payment method badges
- Social media links
- Trust signals

### Multi-Column Layout (Desktop)

**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

## Dynamic Category Links (Ecommerce-Specific)

**CRITICAL: Fetch categories from backend dynamically** - never hardcode. Fetch from ecommerce backend API (for Medusa: `sdk.store.category.list()`).

**Benefits:**
- Stays in sync with main navigation
- Categories added/removed automatically
- No manual footer updates

**Guidelines:**
- Show top-level categories only (5-8 max)
- Match labels from main navigation
- Cache category data (rarely changes)

## Newsletter Signup

**Essential elements:**
- 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 and Trust Badges

**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.

## Mobile Footer

**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.

## Checklist

**Essential features:**

- [ ] Navigation links (categories, pages)
- [ ] Categories fetched dynamically from backend
- [ ] Contact information (email, phone)
- [ ] Legal links (Privacy Policy, Terms of Service)
- [ ] Copyright notice with current year
- [ ] Newsletter signup form with value proposition
- [ ] Payment method icons
- [ ] Social media links
- [ ] Responsive (4-5 columns desktop, single-column mobile)
- [ ] Mobile: 44px touch targets
- [ ] Mobile: Collapsible sections (optional)
- [ ] Semantic HTML (`<footer>`, `<nav>` sections)
- [ ] ARIA labels on navigation ("Footer navigation")
- [ ] Keyboard accessible
- [ ] Visible focus indicators
- [ ] Color contrast 4.5:1 minimum
- [ ] Consistent across all pages