# Page frame slots (https://docs.salla.dev/twilight/react/slots/page-frame)



Use these slots when the content belongs on every page, such as an announcement bar or a tracking snippet.

## Where they sit [#where-they-sit]

<PageLayout
  title="Page frame: the slots every page has"
  url="any page"
  chrome="false"
  nodes="[
  { slot: 'body:start', note: 'above the header' },
  { group: 'Header', tone: 'chrome', nodes: [
    { slot: 'header:start', note: 'first thing in the header' },
    { block: 'Announcement bars (PageAdvertisements)', size: 'xs' },
    { block: 'Top bar: menu, language, currency', size: 'xs' },
    { cols: [
      { w: 1, nodes: [{ block: 'Logo', size: 'xs' }] },
      { w: 3, nodes: [{ block: 'Main menu and search', size: 'xs' }] },
      { w: 1, nodes: [{ block: 'Account and cart', size: 'xs' }] },
    ] },
    { slot: 'header:end', note: 'last thing in the header' },
  ] },
  { block: 'The current page (a route)', size: 'xl' },
  { group: 'Footer', tone: 'chrome', nodes: [
    { slot: 'footer:start', note: 'first thing in the footer' },
    { cols: [
      { w: 2, nodes: [{ block: 'Logo, description, contacts, social links and trust badges', size: 'sm' }] },
      { w: 2, nodes: [{ block: 'Footer menu', size: 'sm' }] },
      { w: 2, nodes: [{ block: 'Apps', size: 'sm' }] },
    ] },
    { cols: [
      { w: 3, nodes: [{ slot: 'copyright', note: 'default: the copyright line' }] },
      { w: 2, nodes: [{ block: 'Payment methods', size: 'xs' }] },
    ] },
    { slot: 'footer:end', note: 'last thing in the footer' },
  ] },
  { slot: 'body:end', note: 'below the footer' },
]"
/>

The three `head` slots are not drawn, because they output nothing visible.

The `head:*` slots are not inside the document `<head>` tag. They render at the top of the app, before `body:start`, which is why they exist mostly for installed apps' elements. To change the real `<head>` (title, meta, links), use the route `head` option instead.

## Slot reference [#slot-reference]

| Slot           | Where                                                                                                      | Context                 | Notes                                                                                                                           |
| -------------- | ---------------------------------------------------------------------------------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| `head:start`   | Top of the app, first of the three head slots                                                              | `twilight`              | Server-rendered (`ssr`).                                                                                                        |
| `head`         | Between `head:start` and `head:end`                                                                        | `twilight`              | Server-rendered (`ssr`).                                                                                                        |
| `head:end`     | Last of the head slots                                                                                     | `twilight`              | Server-rendered (`ssr`).                                                                                                        |
| `body:start`   | After the head slots, before the layout                                                                    | `twilight`              | The engine registers defaults here: Google Tag Manager, fraud-check snippet and the store-closed notice (priority 100, 90, 80). |
| `header:start` | First child inside `<header class="store-header">`, above the merchant's announcement bars and the top bar | `twilight`              | Good for a bar of your own.                                                                                                     |
| `header:end`   | Last child inside `<header>`, after the mobile menu                                                        | `twilight`              |                                                                                                                                 |
| `footer:start` | First child inside `<footer class="store-footer">`, above the footer columns                               | `twilight`              | Not rendered when the footer has `inSheet`.                                                                                     |
| `copyright`    | In the footer's bottom row, before the payment icons                                                       | `storeName`, `twilight` | Shows the default copyright line while nothing is registered. Any handler replaces that line.                                   |
| `footer:end`   | Last child inside `<footer>`, after the bottom row                                                         | `twilight`              | Not rendered when the footer has `inSheet`.                                                                                     |
| `body:end`     | After the layout, at the end of the app                                                                    | `twilight`              | The engine registers defaults here: its tracking bundles and the fast-checkout script (priority 100, 90).                       |

`header:*`, `footer:*` and `copyright` are rendered by the engine's `Header` and `Footer` components. A layout that replaces them must render these slots itself (the [header and footer page](https://docs.salla.dev/twilight/react/layouts/header-and-footer) explains the swap). `body:start` and `body:end` belong to the provider and keep working.

## Example: announcement bar [#example-announcement-bar]

Register it once, in the module your app loads at startup (see [Slots](https://docs.salla.dev/twilight/react/slots)):

```tsx title="app/hooks/index.tsx"
import { hookRegistry, type HookContext } from '@salla.sa/twilight-theme-engine/hooks';

// Announcement bar above the header content
hookRegistry.register('header:start', ({ twilight }: HookContext) => {
  const code = twilight.currency?.code;
  return (
    <div className="bg-black text-white text-center text-sm py-2">
      Free shipping on orders over 200 {code}
    </div>
  );
});
```

## Next [#next]

* [Slots overview](https://docs.salla.dev/twilight/react/slots) covers priority, fallbacks and installed apps.
* [Home and catalog slots](https://docs.salla.dev/twilight/react/slots/home-and-catalog) are the next area.
* [Header and footer](https://docs.salla.dev/twilight/react/layouts/header-and-footer) shows how to replace them.