Layouts

A layout is a React component that wraps each page. You can put common parts of the pages such as header and footer in the layout file. A theme typically needs only one layout.

A basic layout might look like this:

import React from "react";
import Header from '../sections/Header';
import Footer from "../sections/Footer";
 
export default function DefaultLayout({ children, title = 'My Awesome Store'}) {
 
  return (
    <div className="app-root">
      <Header/>
      <main className='app-content'>
        { children } {/*  <-- Placeholder to render actual page content */}
      </main>
      <Footer/>
    </div>
  )
}

In some cases you may need multiple layouts. For example, you may not want to show the header and footer on the login screen. In individual pages, you can define which layout will be used for that page.