Multi Column

A footer with several columns of grouped links for shop, support, company, and legal. Organizes a large storefront so customers find any page fast.

import { Facebook, Twitter, Instagram, Youtube } from '@/components/ui/brand-icons';

export default function EcommerceFooterMultiColumn() {
  return (
    <footer className="bg-muted/50 border-t px-4 py-8 md:py-12">
      <div className="container mx-auto max-w-7xl">
        {/* Brand Section */}
        <div className="mb-8 md:mb-12">
          <a href="/" className="inline-block">
            <h2 className="text-foreground text-2xl font-bold">ShopCraft</h2>
          </a>
          <p className="text-muted-foreground mt-2 max-w-md text-sm">
            Your trusted partner for quality products and exceptional customer
            service since 2020.
          </p>
        </div>

        {/* Footer Links Grid */}
        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
          {/* Customer Service */}
          <div className="space-y-4">
            <h3 className="text-foreground text-sm font-semibold tracking-wider uppercase">
              Customer Service
            </h3>
            <ul className="space-y-3">
              <li>
                <a
                  href="/contact"
                  className="text-muted-foreground hover:text-foreground text-sm transition-colors"
                >
                  Contact Us
                </a>
              </li>
              <li>
                <a
                  href="/faq"
                  className="text-muted-foreground hover:text-foreground text-sm transition-colors"
                >
                  FAQ
                </a>
              </li>
              <li>
                <a
                  href="/shipping"
                  className="text-muted-foreground hover:text-foreground text-sm transition-colors"
                >
                  Shipping Info
                </a>
              </li>
              <li>
                <a
                  href="/returns"
                  className="text-muted-foreground hover:text-foreground text-sm transition-colors"
                >
                  Returns & Exchanges
                </a>
              </li>
              <li>
                <a
                  href="/size-guide"
                  className="text-muted-foreground hover:text-foreground text-sm transition-colors"
                >
                  Size Guide
                </a>
              </li>
              <li>
                <a
                  href="/support"
                  className="text-muted-foreground hover:text-foreground text-sm transition-colors"
                >
                  Customer Support
                </a>
              </li>
            </ul>
          </div>

          {/* Products */}
          <div className="space-y-4">
            <h3 className="text-foreground text-sm font-semibold tracking-wider uppercase">
              Products
            </h3>
            <ul className="space-y-3">
              <li>
                <a
                  href="/new-arrivals"
                  className="text-muted-foreground hover:text-foreground text-sm transition-colors"
                >
                  New Arrivals
                </a>
              </li>
              <li>
                <a
                  href="/best-sellers"
                  className="text-muted-foreground hover:text-foreground text-sm transition-colors"
                >
                  Best Sellers
                </a>
              </li>
              <li>
                <a
                  href="/sale"
                  className="text-muted-foreground hover:text-foreground text-sm transition-colors"
                >
                  Sale Items
                </a>
              </li>
              <li>
                <a
                  href="/collections"
                  className="text-muted-foreground hover:text-foreground text-sm transition-colors"
                >
                  Collections
                </a>
              </li>
              <li>
                <a
                  href="/gift-cards"
                  className="text-muted-foreground hover:text-foreground text-sm transition-colors"
                >
                  Gift Cards
                </a>
              </li>
              <li>
                <a
                  href="/accessories"
                  className="text-muted-foreground hover:text-foreground text-sm transition-colors"
                >
                  Accessories
                </a>
              </li>
            </ul>
          </div>

          {/* Company */}
          <div className="space-y-4">
            <h3 className="text-foreground text-sm font-semibold tracking-wider uppercase">
              Company
            </h3>
            <ul className="space-y-3">
              <li>
                <a
                  href="/about"
                  className="text-muted-foreground hover:text-foreground text-sm transition-colors"
                >
                  About Us
                </a>
              </li>
              <li>
                <a
                  href="/careers"
                  className="text-muted-foreground hover:text-foreground text-sm transition-colors"
                >
                  Careers
                </a>
              </li>
              <li>
                <a
                  href="/press"
                  className="text-muted-foreground hover:text-foreground text-sm transition-colors"
                >
                  Press
                </a>
              </li>
              <li>
                <a
                  href="/sustainability"
                  className="text-muted-foreground hover:text-foreground text-sm transition-colors"
                >
                  Sustainability
                </a>
              </li>
              <li>
                <a
                  href="/investors"
                  className="text-muted-foreground hover:text-foreground text-sm transition-colors"
                >
                  Investors
                </a>
              </li>
              <li>
                <a
                  href="/affiliate"
                  className="text-muted-foreground hover:text-foreground text-sm transition-colors"
                >
                  Affiliate Program
                </a>
              </li>
            </ul>
          </div>

          {/* Follow Us */}
          <div className="space-y-4">
            <h3 className="text-foreground text-sm font-semibold tracking-wider uppercase">
              Follow Us
            </h3>
            <div className="space-y-4">
              <ul className="space-y-3">
                <li>
                  <a
                    href="/newsletter"
                    className="text-muted-foreground hover:text-foreground text-sm transition-colors"
                  >
                    Newsletter
                  </a>
                </li>
                <li>
                  <a
                    href="/blog"
                    className="text-muted-foreground hover:text-foreground text-sm transition-colors"
                  >
                    Blog
                  </a>
                </li>
              </ul>

              {/* Social Media Icons */}
              <div className="flex space-x-4">
                <a
                  href="https://facebook.com"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                  aria-label="Follow us on Facebook"
                >
                  <Facebook className="h-5 w-5" />
                </a>
                <a
                  href="https://twitter.com"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                  aria-label="Follow us on Twitter"
                >
                  <Twitter className="h-5 w-5" />
                </a>
                <a
                  href="https://instagram.com"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                  aria-label="Follow us on Instagram"
                >
                  <Instagram className="h-5 w-5" />
                </a>
                <a
                  href="https://youtube.com"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                  aria-label="Follow us on YouTube"
                >
                  <Youtube className="h-5 w-5" />
                </a>
              </div>
            </div>
          </div>
        </div>

        {/* Bottom Section */}
        <div className="border-border mt-8 border-t pt-8">
          <div className="flex flex-col space-y-4 md:flex-row md:items-center md:justify-between md:space-y-0">
            <div className="flex flex-col space-y-2 md:flex-row md:space-y-0 md:space-x-6">
              <a
                href="/privacy"
                className="text-muted-foreground hover:text-foreground text-xs transition-colors"
              >
                Privacy Policy
              </a>
              <a
                href="/terms"
                className="text-muted-foreground hover:text-foreground text-xs transition-colors"
              >
                Terms of Service
              </a>
              <a
                href="/cookies"
                className="text-muted-foreground hover:text-foreground text-xs transition-colors"
              >
                Cookie Policy
              </a>
            </div>
            <p className="text-muted-foreground text-xs">
              © 2024 ShopCraft. All rights reserved.
            </p>
          </div>
        </div>
      </div>
    </footer>
  );
}

About this block

Multi Column Footer opens with a brand name and a short tagline, then spreads into a four column link grid covering Customer Service, Products, Company, and a Follow Us column. The Follow Us column pairs two text links with a row of social icons for Facebook, Twitter, Instagram, and YouTube. A ruled bottom bar closes the block with three legal links and a copyright line laid out side by side on wider screens.

Every section is independent. The brand name, tagline, and copyright text are plain copy you can swap in place. Each column stands alone, so you can remove a column, reorder them, or cut link items without affecting the others. The social icon row sits inside the Follow Us column and can be removed or replaced with different platform icons as needed.

When to use

Reach for this block on any platform that needs to direct visitors to a wide range of destinations from a single footer. For a logistics and delivery platform it is especially useful: operators need quick routes to tracking pages, carrier support, shipping policies, and company information all in one place, and the four column layout handles that breadth cleanly. It outperforms a single row footer when the link count is large and grouping by topic genuinely saves the visitor time.

A natural flow around it on an Ecommerce page:

Before

Shipping Returns to surface policies before visitors reach the footer
Trust Guarantee to close the main content with reassurance

After

Nothing typically follows a footer, but if you need a lighter alternative consider Simple Links for pages where the full column grid is too heavy

What you can display

The four column structure fits any platform with several distinct link categories. A few ways to use the frame:

Operational link hubs. Map columns to your core service areas such as tracking, dispatch support, billing, and company info so every visitor can orient themselves quickly.
Product and category navigation. Point the Products column at your top categories, new arrivals, or featured collections to keep browsing momentum going from the footer.
Policy and compliance links. The legal bar at the bottom is a natural home for privacy policy, terms of service, and cookie notices that must be reachable from every page.

Tip: keep each column to five or six links so the grid stays balanced and no single column towers over its neighbors on desktop.

About this block

When to use

A natural flow around it on an Ecommerce page:

Before

Shipping Returns to surface policies before visitors reach the footer
Trust Guarantee to close the main content with reassurance

After

Nothing typically follows a footer, but if you need a lighter alternative consider Simple Links for pages where the full column grid is too heavy

What you can display

The four column structure fits any platform with several distinct link categories. A few ways to use the frame:

Operational link hubs. Map columns to your core service areas such as tracking, dispatch support, billing, and company info so every visitor can orient themselves quickly.
Product and category navigation. Point the Products column at your top categories, new arrivals, or featured collections to keep browsing momentum going from the footer.
Policy and compliance links. The legal bar at the bottom is a natural home for privacy policy, terms of service, and cookie notices that must be reachable from every page.

Tip: keep each column to five or six links so the grid stays balanced and no single column towers over its neighbors on desktop.

Multi Column

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display