Footer

The footer renders at the bottom of every page. It always displays a copyright notice and optionally renders link columns sourced from a Shopify menu.

Default behavior

The footer always renders, even when no footer menu exists in Shopify. At minimum it shows the copyright line with the current year. When a "footer" menu is configured in Shopify, the footer also displays a grid of link columns above the copyright.

Link columns

Link columns are sourced from getMenu("footer", locale). The menu supports a two-level hierarchy: top-level items become column headings and their children become the links. Column headings can optionally link to a URL.

The grid is responsive: 2 columns on mobile, 3 on tablet (md), and 4 on desktop (lg).

Social links

Social media icons are driven by the socialLinks array in lib/config.ts. Each entry has a platform (one of facebook, instagram, x, youtube, tiktok, pinterest, linkedin, github) and a url. When the array is non-empty, icons render on the right side of the footer opposite the copyright.

// lib/config.ts
socialLinks: [
  { platform: "x", url: "https://x.com/mystore" },
  { platform: "instagram", url: "https://instagram.com/mystore" },
],

The default is an empty array, which hides the social links section entirely.

Copyright

The copyright line is a server component that reads the current year and the footer.copyright translation key. It is wrapped in a Suspense boundary so the rest of the footer can render without waiting for the translation lookup.

Key files