MasterLayout

MasterLayout is the frame the engine puts around every page. You rarely import it. Read this page to know what you get by default, and what you must bring along when you replace it with your own layout.

Use itCopy Anchor Link

TwilightProvider uses MasterLayout unless you pass your own layout. A theme replaces it like this:

<TwilightProvider translations={themeTranslations} layout={ThemeLayout}>
  <Outlet />
</TwilightProvider>

Replace itCopy Anchor Link

Write a layout that takes { children } and pass it to the provider. Keep what you still need from the list below: the header and footer, a <main> around children, and the global modals.

import { Suspense } from 'react';
import type { LayoutProps } from '@salla.sa/twilight-theme-engine/types';
import { Footer } from '@salla.sa/twilight-theme-engine/layout';
import { Header } from './Header';

export function ThemeLayout({ children }: LayoutProps) {
  return (
    <div className="app-inner flex min-h-full flex-col">
      <Header />
      <main id="main-content" className="flex-1">
        {children}
      </main>
      <Suspense fallback={null}>
        <Footer />
      </Suspense>
    </div>
  );
}

This one keeps the engine's footer and brings its own header, like the starter theme. The engine's Footer loads lazily, hence the <Suspense>. Passing layout={false} removes the frame completely.

APICopy Anchor Link

function MasterLayout(props: LayoutProps): JSX.Element;

interface LayoutProps {
  children: ReactNode;
}

What it rendersCopy Anchor Link

• The engine Header, a <main id="main-content"> around children, and the engine Footer.
• The offer modal, always.
• The login modal, only when the customer is not logged in. It follows the store's email and mobile login settings.
• The scopes dialog, when the store defines a scope.

GotchasCopy Anchor Link

• Your own layout receives the same { children } and replaces all of the above. Include the modals you still need. The starter theme's ThemeLayout copies them.
• The header:* and footer:* slots live inside the engine Header and Footer. If your layout uses its own, render the slots there.
• Header, Footer, Copyright, WidgetHead and CustomerLayout are also exported from @salla.sa/twilight-theme-engine/layout and load lazily. PageAdvertisements, the merchant's announcement bar that the engine Header renders, is exported there too and is not lazy. A header of your own should render it (see Header and footer).

NextCopy Anchor Link

• Layouts overview: every layout and how to replace it.
• Layout and components shows how to build your own layout step by step.
• HookSlot for the slots a layout should keep.