> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sitestorepro.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Header & Footer Builder: Navigation and Branding

> Set up your sticky header, logo position, cart and search triggers, and a five-column footer with dynamic copyright year replacement and payment badges.

The **Header & Footer Builder** at **Admin → Header & Footer Builder** (`/admin/header-footer-builder`) gives you visual control over the top navigation bar and the five-column responsive footer. Changes you save here update the storefront immediately — no deployment or cache flush is required.

***

## Top Navigation (Header)

### Sticky Header

Enable **Sticky Header** to pin the navigation bar to the top of the viewport as visitors scroll. This keeps your logo, search icon, and cart trigger accessible at all times.

| Setting       | Description                                                                |
| ------------- | -------------------------------------------------------------------------- |
| Sticky Header | Fixes the header to the top of the screen as visitors scroll down the page |

### Logo Alignment & Layout Elements

Choose where your logo sits within the header and which interactive elements appear alongside it.

| Option                 | Description                                                                |
| ---------------------- | -------------------------------------------------------------------------- |
| Logo Position          | Place the logo on the **Left**, **Center**, or **Right** of the header bar |
| Search Icon            | Toggle the storefront search icon in the header                            |
| Language Flag Switcher | Show a flag icon that lets visitors switch the active language             |
| Slide-Cart Trigger     | Show the cart icon that opens the side-drawer cart without navigating away |

<Tip>
  Center logo alignment pairs well with a symmetrical navigation layout — place your primary nav links on the left and the cart/account icons on the right to balance the header visually.
</Tip>

***

## Five-Column Responsive Footer

The footer uses a five-column grid that stacks into a single column on mobile. Configure each column's content independently under the corresponding tab in the Footer Builder.

<CardGroup cols={2}>
  <Card title="Column 1 — Primary Navigation" icon="map">
    Add your main site navigation links, a sitemap shortcut, and store branding copy. This column typically mirrors your top-nav links and helps visitors orient themselves from the footer.
  </Card>

  <Card title="Column 2 — Customer Service" icon="headset">
    List helpdesk links, an order tracking URL, shipping policy pages, and your FAQ. Customers look here first when they have a post-purchase question.
  </Card>

  <Card title="Column 3 — Company & Legal" icon="scale-balanced">
    Include links to your Terms of Service, Privacy Policy, Return Policy, and About Us page. Keeping legal links in a dedicated column improves compliance visibility.
  </Card>

  <Card title="Column 4 — Contact & Business Hours" icon="clock">
    Display your business address, phone number, support email, and operating hours. This column reassures shoppers that a real business stands behind the store.
  </Card>
</CardGroup>

<Card title="Column 5 — Social Proof & Newsletter" icon="newspaper">
  Embed your social icons plugin and a newsletter opt-in form. Social proof elements such as follower counts or review badges can also sit here to reinforce trust at the bottom of every page.
</Card>

### Configuring a Footer Column

<Steps>
  <Step title="Open the Footer Builder">
    Go to **Admin → Header & Footer Builder** and click the **Footer** tab.
  </Step>

  <Step title="Select a column">
    Click the column you want to edit (Column 1 through Column 5). Each column has its own heading field and a rich-text / link editor.
  </Step>

  <Step title="Add and arrange content">
    Type a column heading, then add links or block content. Drag items to reorder them within the column.
  </Step>

  <Step title="Save">
    Click **Save Footer** to publish the changes to your storefront immediately.
  </Step>
</Steps>

***

## Bottom Copyright Row

The copyright row sits below the five columns and spans the full footer width.

### Dynamic Year Replacement

Type `{{year}}` anywhere in your copyright text, and Site Store Pro replaces it with the current four-digit year at render time. This keeps your copyright notice accurate without manual updates every January.

**Example input:**

```text theme={null}
© {{year}} Acme Store. All rights reserved.
```

**Rendered output:**

```text theme={null}
© 2025 Acme Store. All rights reserved.
```

### Payment Method Badges

Toggle the payment icons you want to display in the copyright row. Site Store Pro includes badges for the following providers:

<CardGroup cols={4}>
  <Card title="Visa" icon="credit-card" />

  <Card title="Mastercard" icon="credit-card" />

  <Card title="Amex" icon="credit-card" />

  <Card title="PayPal" icon="paypal" />

  <Card title="Stripe" icon="stripe" />

  <Card title="Apple Pay" icon="apple" />

  <Card title="Google Pay" icon="google" />
</CardGroup>

Enable only the payment methods you actually accept at checkout. Displaying badges for unavailable methods erodes shopper trust.

<Info>
  Payment badges are purely visual indicators. Enabling or disabling a badge here does **not** activate or deactivate the corresponding payment gateway. Manage gateway configuration under **Admin → Payments**.
</Info>