Creating a page folder

What's a page folder

Page folders can be used to create the structure of your website. So they need to be created when setting up your site or when you want to add a new section to it.

Let's look at an example of how they work. Below is the site builder, if you look at the structure on the left of the image, you'll see a page folder called Main. Within that, there are 3 more page folders (Men, Women, and Sales). Within the Men page folder, there are 2 page folders (Shoes and Clothing). Sales doesn't have any sub-folders. The Women page folder has 3 page folders within it (Accessories, Clothing, and Shoes).

When the burger menu is clicked on the quick preview, 3 items appear at the top are the same as the page folders (Men, Women, and Sale), and when these are selected, the page folders within them are displayed.

0c7fa7d Page folder navigation example

Not all page folders go into the navigation, and they're not necessarily in the same order shown in the site builder. In our example, our navigation is set up using a Frontend component and we've defined the order there.

To create a new page folder within your website:

  1. Click New and select Create page folder

20d9857 Click new then select create page folder

  1. Input a Page name (this will be displayed to you and your customers), the Relative path (the URL), and the Parent page folder (where your new page folder will sit within your structure), then click Save

If you leave the relative path empty, this will be automatically added using the page name.

In the below example, we're creating a new Accessories page folder that'll be within the Men page folder:

cff58e2 Input a page name relative path and page folder

Click on the page folder name where you want the page folder to go, and the parent page folder will automatically be selected. Select the blank item in the dropdown list if you want the new page folder at the top level of your structure.

For this example, we'll only input this information, for now, so we'll click Save. You can come back and edit it at any time.

We recommend creating new page folders in the staging environment unless you know it's in a folder that won't affect your navigation.

This page folder will now be in your list and you can add a page version to it. But first, let's look at how to edit an existing page folder.

df6afc8 New page folder in menu

Composable Commerce
Getting StartedMerchant CenterTutorialsHTTP APIGraphQL APIImport & ExportSDKs & Client LibrariesCustom Applications
Frontend
Getting StartedStudioDevelopingHTTP API
Sign upLog inSupportStatusOfferingTech BlogIntegrationsUser Research Program
Copyright © 2023 commercetools
Privacy PolicyImprint