Footer

The footer is the bottom counterpart to the header. It carries persistent navigation, brand presence, legal info, payment-method badges, and (optionally) a newsletter signup. Hyprism’s footer is block-first — you compose it from any of 11 block types arranged in rows.

The footer is defined in sections/footer.liquid and lives in the Footer section group.

5.1 Footer architecture

The footer is structured as rows of blocks:

[Footer-row]   logo | menu | menu | newsletter
[Footer-row]   social | localization | quick-links
[Footer-bar]   copyright | payment | legal

Each Footer-row block holds 1–4 child blocks side by side on desktop, stacking vertically on mobile. The Footer-bar section sits below as a sub-footer (typically copyright + payment-method icons + legal links).

5.2 Footer section settings

Theme editor → Footer section → settings.

Layout

Setting	What it does
🔧 Max width	Range 600–1800px, step 50. ✅ Default 1400px. Inner content width.
🔧 Content gap	Range 0–120px, step 4. ✅ Default 48px. Vertical gap between footer rows.
🔧 Show top border	✅ Default on. 1px hairline border separating from content above.
🔧 Connected to footer-bar	✅ Default on. When on, footer’s bottom and footer-bar’s top visually merge (no gap, shared rounded-corners). For the merge to actually paint, the footer-bar section below must also have “Connected to footer” turned on — symmetric opt-in via :has().

Section style (effects)

Setting	What it does
🔧 Transparent background	✅ Default off.
🔧 Glass	✅ Default off. Translucent over content above.
🔧 Glass tint with accent	✅ Default off. When glass is on, tints with the scheme accent (uses --ne-glass-bg-tinted).
🔧 Accent glow	✅ Default off. Scaled by global Section glow intensity.
🔧 Drop shadow	✅ Default off. Scaled by global Section shadow intensity.

Color scheme

Standard 4-setting pattern — Use global scheme + Color scheme + dark/light pair. A common pattern: turn off Use global, set a permanently dark scheme so the footer always reads as a “section break” between content and the page edge.

Section sizing

Setting	What it does
🔧 Full width	✅ Default on. Edge-to-edge mode.
🔧 Padding top	Range 0–200px, step 4. ✅ Default 64px.
🔧 Padding bottom	Range 0–200px, step 4. ✅ Default 32px. Padding below the last row, before the footer-bar.

Radius

Setting	What it does
🔧 Use global radius	✅ Default on.
🔧 Custom radius	Range 0–48px, step 2. ✅ Default 0. Visible when Use global is off.

Visibility

Setting	What it does
🔧 Hide on desktop	✅ Default off.
🔧 Hide on mobile	✅ Default off.

What’s NOT in the section

• No background-image / background-overlay-opacity setting at section level. To put an image behind the footer, use a page-background section on the relevant template (§3.10) and let the footer’s Transparent background or Glass mode let it show through.
• No “Enable dark/light pair” per-section toggle. The footer follows the theme-wide pair via use_global_scheme: false + scheme picker(s). Same pattern as other sections.

5.3 Block types

Footer-row

A flex container that holds child footer-blocks side-by-side on desktop and stacks them on mobile.

Setting	What it does
🔧 Gap	Range 0–80px, step 4. ✅ Default 32px. Horizontal gap between columns.
🔧 Minimum column width	Range 120–360px, step 10. ✅ Default 220px. CSS auto-fit threshold — columns shrink to this minimum, then wrap to a new line.
🔧 Vertical alignment	Stretch (✅ default) / Flex-start (top) / Center / Flex-end (bottom) — vertical alignment of columns when their heights differ.
🔧 Mobile columns	1 (✅ default — single-column stack) or 2.

Child blocks accepted: any footer block + atom blocks (footer-logo · footer-menu · footer-quick-links · footer-newsletter · footer-social · footer-follow-shop · footer-payment · footer-legal · footer-localization · footer-copyright · heading · text · image · icon · divider · spacer).

Footer-logo

Displays the brand logo with optional tagline below.

Setting	What it does
🔧 Logo version	Standard (✅ default — primary logo from Branding tab), Inverse (alternate logo from Branding), or Custom (upload a footer-specific logo via the picker below).
🔧 Custom logo	Image picker. Visible when version = Custom.
🔧 Logo width	Range 40–320px, step 10. ✅ Default 120px.
🔧 Alignment	Left (✅ default) / Center / Right.
🔧 Swap logo on dark/light toggle	✅ Default on. When on, the footer logo swaps between standard ↔ inverse whenever the storefront dark/light mode flips. Set off to keep one version pinned.
🔧 Show inverse logo statically	✅ Default off. When on AND dark/light toggle is off, displays the inverse logo regardless of theme mode. Useful when the footer has a permanently dark/light scheme that differs from the rest of the site.
🔧 Tagline	Free text. Optional one-line text below the logo.

Footer-menu

A menu rendered from a Shopify-admin link list.

Setting	What it does
🔧 Heading	✅ Default Quick links. Heading above the menu.
🔧 Menu	Link-list picker. ✅ Default footer.
🔧 Alignment	Left (✅ default) / Center / Right.
🔧 Layout	Vertical (✅ default — column of links) / Horizontal (single row) / Two-column (two columns of links, auto-balanced).
🔧 Link gap	Range 0–24px, step 1. ✅ Default 8px.
🔧 Heading size	Range 10–24px, step 1. ✅ Default 14px.
🔧 Heading font role	Inherit (✅ default) / Heading / Subheading / Accent / Body.
🔧 Link size	Range 10–24px, step 1. ✅ Default 14px.
🔧 Link font role	Inherit (✅ default) / Heading / Subheading / Accent / Body.
🔧 Link weight	300 / 400 (✅ default) / 500 / 600 / 700.
🔧 Link transform	None (✅ default) / Uppercase / Capitalize.
🔧 Hover underline	✅ Default off.
🔧 Mobile accordion	✅ Default off. When on, the heading becomes a tap-to-expand toggle on mobile (collapses to save space). Always-open on desktop. Implementation uses native <details> with JS-resize sync (Rule 199).

Footer-newsletter

Email subscription form. Submits to Shopify’s customer-tag-newsletter endpoint, which is then synced with whatever email-marketing app you’re using (Shopify Email, Klaviyo, Mailchimp).

Setting	What it does
🔧 Heading	✅ Default Stay in the loop.
🔧 Text	✅ Default Subscribe to get …. Optional description above the form.
🔧 Placeholder	Email input placeholder. ✅ Default Your email.
🔧 Button label	Submit button text. ✅ Default Subscribe.
🔧 Success message	Shown after successful submission. ✅ Default Thanks for subscribing!.
🔧 Alignment	Left (✅ default) / Center / Right.

Footer-social

Social-media icon row. Icons displayed are determined by the URLs you filled in at Theme settings → Social media (see §2.11). Only filled-in social platforms show.

Setting	What it does
🔧 Heading	Free text. Optional heading above the icons.
🔧 Alignment	Left (✅ default) / Center / Right.
🔧 Icon size	Range 12–40px, step 1. ✅ Default 20px.
🔧 Button size	Range 24–64px, step 2. ✅ Default 36px. The clickable hit-target size around each icon.
🔧 Gap	Range 0–24px, step 1. ✅ Default 8px.
🔧 Button shape	Rounded (✅ default) / Circle / Square.
🔧 Hover effect	None / Fade / Lift (✅ default) / Glow.

Footer-follow-shop

Renders the Follow on Shop button (Shopify’s login_button filter with action: 'follow'). It lets customers follow your store in the Shop app to get notifications and personalised recommendations. The button itself is rendered and styled by Shopify.

Setting	What it does
🔧 Heading	Free text. Optional heading above the button.
🔧 Alignment	Left (✅ default) / Center / Right.

Footer-payment

Payment-method icons (Visa, Mastercard, Shop Pay, PayPal, Apple Pay, etc.). Auto-pulls from Shopify Admin → Payments by default; you can also add up to 8 custom icons.

Setting	What it does
🔧 Heading	Free text. Optional heading above the row.
🔧 Show default Shopify payment icons	✅ Default on. Pulls active payment-method icons from Shopify Payments configuration.
🔧 Alignment	Left (✅ default) / Center / Right.
🔧 Icon height	Range 12–56px, step 2. ✅ Default 24px.
🔧 Gap	Range 0–24px, step 1. ✅ Default 8px.
🔧 Wrap	Wrap (✅ default — icons wrap to new line on narrow viewports) / No wrap (force single line, scroll if overflow).
🔧 Opacity	Range 30–100%, step 5. ✅ Default 100%. Useful to tone down the row when it’s competing visually with other footer content.
🔧 Monochrome	✅ Default off. When on, icons are rendered as monochrome silhouettes matching the active text color.
🔧 Custom icons (1–8)	8 image-picker + alt-text pairs for adding extra payment / certification / shipping-method icons not covered by Shopify’s defaults. Examples: Klarna, Afterpay regional variants, eco-certifications, “Buy Now Pay Later” badges.

✅ Always show enabled payment methods — it builds checkout trust.

Footer-copyright

Setting	What it does
🔧 Show year	✅ Default on. Renders the current year (e.g., © 2026).
🔧 Show shop name	✅ Default on. Renders shop.name after the year.
🔧 Suffix	Free text. Appears after the year + shop name. Use for legal-entity text (“Werner Bundschuh, Tbilisi, Georgia”) or rights-reserved (“All rights reserved”).
🔧 Show policies link	✅ Default off. When on, appends a small “Privacy · Terms” link cluster.
🔧 Alignment	Left (✅ default) / Center / Right.
🔧 Font size	Range 10–18px, step 1. ✅ Default 13px.

The full rendered copyright string is composed: [©] [Year] [Shop name] [Suffix]. There is no Powered by Shopify toggle in the schema — Shopify’s branding-attribution is optional and configured at the storefront level (Settings → Customer accounts → Online Store branding).

Footer-legal

Legal-policy links, optionally rendered as an inline strip or a dropdown popover (European-friendly pattern — Imprint and Privacy Policy don’t clutter the footer).

Setting	What it does
🔧 Trigger label	✅ Default Terms and Policies. The dropdown trigger text.
🔧 Show chevron	✅ Default on. Chevron icon next to the trigger.
🔧 Show Privacy	✅ Default on. Auto-links to the Shopify Privacy Policy page.
🔧 Show Terms	✅ Default on. Auto-links to the Terms page.
🔧 Show Refund	✅ Default on. Auto-links to the Refund Policy.
🔧 Show Shipping	✅ Default off.
🔧 Show Contact	✅ Default off.
🔧 Show Subscription	✅ Default off.
🔧 Custom link 1–5	5 label + URL pairs for additional legal links (Imprint, Cookie Policy, Accessibility statement, etc.).
🔧 Alignment	Left (✅ default) / Center / Right. Alignment of the trigger label.
🔧 Popover alignment	Left (✅ default) / Center / Right. Alignment of the link list inside the popover.
🔧 Label size	Range 10–18px, step 1. ✅ Default 13px.
🔧 Link size	Range 12–18px, step 1. ✅ Default 14px.
🔧 Font role	Inherit (✅ default) / Heading / Subheading / Accent / Body.
🔧 Label weight	300 / 400 / 500 (✅ default) / 600 / 700.
🔧 Label transform	None (✅ default) / Uppercase / Capitalize.

The popover uses native <details> + hover/focus-within (Rule 198) for desktop hover-open + mobile tap-open. No separate “Display style: inline / dropdown” setting — the block is always a dropdown.

Footer-localization

Country and language switcher. Country/language data is auto-pulled from Shopify Markets and Locales settings — no manual list management.

Setting	What it does
🔧 Heading	Free text. Optional.
🔧 Show country switcher	✅ Default on. Renders only if shop has multiple Markets configured.
🔧 Show language switcher	✅ Default on. Renders only if shop has multiple published locales.
🔧 Alignment	Left (✅ default) / Center / Right.
🔧 Layout	Stacked (✅ default — country above language) or Inline (side-by-side).

No “Show flags” setting — flag icons are not rendered automatically; country names display as text only.

Footer-quick-links

A short list of quick-action links with icons — useful for support / utility links that don’t belong in the main menu. Has 6 link slots, each with an independent icon.

Setting	What it does
🔧 Heading	✅ Default Help.
🔧 Link 1–6 label + URL	Up to 6 link slots. Each has a label + URL pair.
🔧 Link 1–6 icon	Per-link icon picker — 12 built-in icons: arrow / truck / box / return / question / chat / mail / phone / gift / shield / user / clock. Defaults per slot vary (truck / return / question / arrow / arrow / arrow).
🔧 Alignment	Left (✅ default) / Center / Right.
🔧 Layout	Vertical (✅ default) / Horizontal.
🔧 Icon position	Left (✅ default) / Right.
🔧 Icon size	Range 12–28px, step 1. ✅ Default 18px.
🔧 Link gap	Range 4–32px, step 1. ✅ Default 12px.
🔧 Heading size	Range 10–22px, step 1. ✅ Default 14px.
🔧 Link size	Range 12–20px, step 1. ✅ Default 14px.
🔧 Link font role	Inherit (✅ default) / Heading / Subheading / Accent / Body.
🔧 Link weight	300 / 400 / 500 (✅ default) / 600 / 700.

Footer-row + group blocks

Within a Footer-row, you can combine atom blocks (heading + text + image + icon + divider + spacer) alongside the footer-* blocks — useful for promo cards or feature highlights in the footer. (The Group block is not available inside a Footer-row.)

5.4 Footer-bar (sub-footer)

The Footer-bar is a separate section (sections/footer-bar.liquid) that sits below the main footer. Typically it carries copyright, payment-method icons, and a legal-link strip. Lives in the footer group alongside the main footer section; both render on every page via the theme layout.

Layout settings:

Setting	What it does
🔧 Full width	Edge-to-edge mode. ✅ Default off — footer-bar uses the page-grid for consistency with the main footer.
🔧 Max content width	Inner content width when not full-width. ✅ Default 1400 px.
🔧 Gap	Horizontal gap between the (up to 3) blocks inside the footer-bar. ✅ Default 24 px.
🔧 Vertical alignment	flex-start / center / flex-end — how the blocks align vertically when their heights differ. ✅ Default center.

Spacing & connection:

Setting	What it does
🔧 Padding top / Padding bottom	Vertical padding inside the bar. ✅ Default 16 px each.
🔧 Show top border	1px hairline border separating from main footer above. ✅ Default on.
🔧 Connected to footer	Visually merges with the footer section above — no vertical gap, shared rounded corners. ✅ Default on. ⚠️ For the merge to actually paint, the footer section above must also have “Connected to footer-bar” turned on (symmetric opt-in via :has()).

Color scheme:

Setting	What it does
🔧 Use global scheme	When on (default), inherits the theme’s global color scheme. Turn off to give the footer-bar its own scheme.
🔧 Color scheme	Single-mode scheme override. Visible when Use global = off and dark/light pair is off.
🔧 Color scheme (dark) / (light)	Pair-mode schemes — separate light + dark variants when the dark/light pair is active.

Radius:

Setting	What it does
🔧 Use global radius	When on (default), follows the theme-wide --ne-radius-global token.
🔧 Custom radius	Per-section override (0–48 px, step 2). Visible when Use global radius = off.

Surface:

Setting	What it does
🔧 Transparent background	Drops the section’s solid bg — useful when the footer-bar overlays a custom background image.
🔧 Glass	Translucent glassmorphism over content above. ✅ Default off.
🔧 Glass tint with accent	When Glass is on, tints with the scheme accent. ✅ Default off.
🔧 Accent glow	Outer glow in the scheme accent. ✅ Default off.
🔧 Drop shadow	Soft drop shadow under the bar. ✅ Default off.

Block constraints:

The footer-bar accepts these block types: footer-copyright, footer-social, footer-follow-shop, footer-payment, footer-legal. Hard-capped at 3 blocks via Shopify’s max_blocks: 3 to keep the bar visually balanced. Typical layouts:

[footer-copyright]              [footer-payment]    [footer-legal]
[© Brand 2026]                  [💳 Visa MC Apple]  [Imprint · Privacy]

[footer-social]      [footer-copyright]
[icons icons icons]  [© Brand 2026]

5.5 Common footer configurations

Minimal (small store)

• One row: footer-logo (left) + footer-menu (right with 4 links)
• Footer-bar: copyright (centered)

No newsletter, no payment icons, just brand + nav + copyright. Good for stores with <20 products.

Standard e-commerce

• Row 1: footer-logo | footer-menu (Shop) | footer-menu (Customer Service) | footer-newsletter
• Row 2: footer-social (left) | footer-localization (right)
• Footer-bar: footer-copyright | footer-payment | footer-legal

Classic and complete.

Editorial / magazine

• Row 1: footer-logo + tagline | footer-menu (Read) | footer-menu (Shop) | footer-quick-links (subscribe to blogs)
• Row 2: footer-newsletter (full width — large)
• Row 3: footer-social
• Footer-bar: footer-copyright | footer-legal (dropdown)

Newsletter is the star (editorial stores depend on email reach).

5.6 Footer color appearance pair

The footer can opt into the dark/light pair just like any section:

Setting	What it does
🔧 Use global scheme	Inherit theme-wide
🔧 Color scheme (dark)	When dark-mode is active, the footer uses this scheme
🔧 Color scheme (light)	When light-mode is active, the footer uses this scheme

A common pattern: footer is always a dark scheme regardless of the page’s dark/light mode (creates a consistent “section break” between content and footer). To do this, turn off Use global scheme, set a dark scheme, and don’t enable per-section pair.

Next

You’ve now configured the foundation, layout, header, and footer. Time to build pages.

Before diving into section chapters, get familiar with the atom blocks — heading, text, button, image, icon, group, divider, spacer — that are used inside almost every section:

• Chapter 5a — Atom blocks (reference)

Then jump to the section that matches what you’re building:

• Chapter 6 — Hero and storytelling sections
• Chapter 9 — Premium signature sections
• Chapter 10 — Marketing sections