Creating a Layout

Last edit: 

Contributors: 

This guide will help you create a layout.

Requirements

So that you can follow the steps in this tutorial, you have to have the Marketplace Kit installed, an environment configured, and the codebase set up (or at least have a marketplace_builder directory). You should also understand the concept behind layouts.

  • Quickstart Guide or Get Started tutorials: help you get access to our platform, set up a site, install the Marketplace Kit, set up the codebase, and deploy to your site.
  • Layouts: explains what layouts are, and how to use them.

Steps

Creating a Layout is a three-step process:

  1. Create a directory for layouts
  2. Create a layout file
  3. Edit the layout file

Step 1: Create a directory for layouts

In order to correctly communicate with the platformOS engine and API, your codebase should be organized into a specific directory structure. The root directory of your project should contain the marketplace_builder directory, and layouts should be placed into the views/layouts directory inside marketplace_builder.

If you are starting from scratch (without having created the codebase), create a views directory inside marketplace_builder, then a layouts directory inside views.

If you have already installed the codebase, you can skip this step, and just locate your marketplace_builder/views/layouts directory.

Step 2: Create a layout file

In the layouts directory, create a Liquid file called application.liquid.

Step 3: Edit the Layout file

Edit the application.liquid layout file.

See a sample layout file with explanations below:


<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page title</title>
</head>

<body>
  <h1>Layout</h1>
  {{ content_for_layout }}
</body>
</html>

The special variable {{ content_for_layout }} renders the page content at the exact place where it has been included.

Save your layout file.

Next steps

Congratulations! You have created a layout file. Now you can create a page that uses this layout.

Questions?

We are always happy to help with any questions you may have. Check out our Help page, or contact us.