Header & Footer
The Header and Footer are static sections that appear on every page of your store. They are managed through section groups in the theme editor.
Header Section
File: sections/header.liquid
The TabletopForge header is a floating navigation bar (tf-nav) that provides your store's primary branding and navigation interface.
Features
| Feature | Description |
|---|---|
| Logo | Upload your shop logo; falls back to shop name text |
| Desktop navigation | Full link list rendered as inline nav links |
| Mobile drawer | Hamburger menu (☰) collapses links into a full-screen drawer on mobile |
| Cart icon | Shopping cart with animated badge showing item count |
| Account icon | Links to login or account dashboard |
| Transparency transition | Header starts transparent over hero images; becomes solid on scroll |
Settings
| Setting | Type | Default | Description |
|---|---|---|---|
| Logo Image | Image picker | — | Upload your shop logo |
| Logo Width | Range (50–250px) | 140px | Maximum display width of the logo |
| Menu List | Link list | main-menu | Shopify navigation menu handle |
Scroll Behavior
The header uses a backdrop-filter: blur() and solid background color on scroll to ensure navigation links remain legible over any page content below it. This behavior is automatic and not configurable in the editor.
Mobile Drawer
On viewports narrower than 1024px, the header renders a mobile menu trigger button. Tapping it opens the full-screen tf-mobile-menu drawer. The drawer includes:
- All primary navigation links
- Account link (if customer accounts are enabled)
- Cart shortcut button
Announcement Bar
File: sections/announcement-bar.liquid
A thin, full-width banner that displays above the header. Use it to communicate promotions, shipping notices, or campaign launches.
Settings
| Setting | Description | Default |
|---|---|---|
| Announcement text | The message displayed in the bar | "Free shipping on orders over $75" |
| Link URL | Optional link target for the announcement | — |
| Background color | Override bar background | Accent color |
Footer Section
File: sections/footer.liquid
The TabletopForge footer renders as a multi-column grid on desktop, collapsing to a stacked layout on mobile.
Footer Columns
| Column | Content |
|---|---|
| About | Brand description and social media icon links |
| Menu 1 | Link list (e.g., Shop categories) |
| Menu 2 | Link list (e.g., Help & support) |
| Newsletter | Email subscription form (powered by Shopify Customer API) |
Settings
| Setting | Type | Description |
|---|---|---|
| About Title | Text | Heading for the brand column |
| About Text | Textarea | Short brand description |
| Menu 1 Title | Text | Heading for the first link column |
| Menu 1 | Link list | Shopify menu handle for column 1 |
| Menu 2 Title | Text | Heading for the second link column |
| Menu 2 | Link list | Shopify menu handle for column 2 |
| Newsletter Text | Textarea | Subtext above the email input |
Social Media Links
Social icon links in the footer are driven by Theme Settings → Social media:
- X (Twitter)
Enter the full URL to your profile page for each platform.
Payment Icons
The footer automatically renders payment method icons based on your Shopify store's enabled payment providers. These are injected using the payment_type_svg_tag Liquid filter and require no manual configuration.