SpectreSkills
← All skills

shopify-global-nav

v1.0.0

Build a persistent luxury header and footer for a Shopify theme — transparent-over-hero sticky header, refined mega-menu from linklists, and a quiet multi-column footer. Trigger when building site chrome, navigation, header, or footer.

Shopifyshopifynavigationheaderfootertheme
Install
npx @spectre-apps/skills add shopify-global-nav

Writes .claude/skills/shopify-global-nav/SKILL.md. Add --user to install globally.

What it does

Shopify global nav

The header and footer are sections placed in header-group.json / footer-group.json so they persist across every template and stay editable.

Header

  • Drive links from a linklist setting: {% for link in linklists[section.settings.menu].links %}. Support one level of link.links for a mega-menu.
  • Transparent over the hero, solid on scroll. Start position: sticky; top: 0 with a transparent background and light text, then a tiny global.js IntersectionObserver/scroll listener toggles a .is-scrolled class that fades in the paper background and ink text.
  • Center the logo, nav left, utilities (search, account, cart) right — or a centered logo with nav split either side for a couture layout. Uppercase, wide-tracked nav labels.
  • Cart count from {{ cart.item_count }}; open a drawer rather than navigating away.
  • Schema settings: menu (link_list), logo (image_picker), transparent_on_home (checkbox), plus color overrides. Include a presets entry.

Mega-menu

  • Full-width panel under the bar, revealed on hover/focus. Columns of links plus a featured image or collection tile on the right. Generous padding, hairline top border, quiet fade-in.
  • Keyboard-accessible: toggle on focus-within, aria-expanded, and an Esc handler. Mobile collapses to an off-canvas drawer.

Footer

  • Multi-column, restrained: link columns from linklists, a slim newsletter form ({% form 'customer' %}), payment icons, locale/currency selectors ({% form 'localization' %}), and a small legal row.
  • Roomy top padding, hairline divider, muted type. No loud color blocks.

Follow luxury-storefront-aesthetic for type and spacing, and liquid-conventions for clean {% render %} snippets.