Pages

The pages folder contains json files, representing a unique page. Each page contains one layout and at least one section. Unlike layouts and sections, pages follow a special naming convention which is described later in this page.

A basic page

A basic page might look like this:

pages/index.json

{
  "schema": "https://builderoo.dev/schema/page.json",
  "layout": {
    "component": "DefaultLayout"
  },
  "sections": [
    {
      "component": "PageIntro"
    },
    {
      "component": "FeaturedProducts"
    },
    {
      "component": "ProductCategories"
    },
    {
      "component": "Subscribe"
    }
  ]
}

In this example, DefaultLayout refers to the name of the layout. It is not the name of the exported component within the layouts/DefaultLayout.jsx file, but rather the file name itself without the extension. While it is recommended to keep the file name and the component name consistent, they can differ if needed.

The same principle applies to sections such as PageIntro, FeaturedProducts, ProductCategories, and Subscribe.

See PageSchema object for a full structure.

Page types

There are various types of pages. Each types of pages shows different types of data. Multiple variations can be created for each type of page. The file names for these pages follow this format:

type name.variation name.json

Here are all the types:

Page type	Example page file name	Special data hook
index	`index.json`
product	`product.json` `product.shoes.json` `product.clothes.json`	useProduct()
collection	`collection.json` `collection.spring.json` `collection.minimal.json`	useCollection()
collection	`collections.json`	useCollectionList()
search	`search.json`	useSearch()
order	`order.json`	useOrder()
orders	`orders.json`	useOrderList()
blog	`blog.json` `blog.offers.json`	useBlog()
article	`article.json` `article.gallery.json`	useArticle()

💡

Certain types of pages have specialized React hooks that provide data unique to those specific pages, as indicated in the table above. These hooks are designed to be page-specific, meaning they cannot be utilized on other pages. However, the same hook can be used multiple times across different sections of a single page.

index, product, collection, order, orders, search are the required pages that must be defined. Other pages are optional.

There are also custom pages that can be built-in in the theme. Users can also create and edit custom pages from the admin panel. This is explained in Custom Pages

Sections Product