Pages are made of three types of layered elements–sections, columns, and components.

  • Sections are always full-width and are the bottom layer of the page. Multiple sections can be added to a page.
  • Columns are the next layer and go inside a section to create the layout structure for the page. Choose from a single full-width layout or options that divide the section into up to four side-by-side columns.
  • Components go inside the columns and are the individual content elements that make up the page, such as text boxes, images, or checkout modules. Components are the top layer of the page.

You can customize any of the layers to create the design you want.

Hands-on learning: Create a page from scratch

To learn about page structure, complete this exercise to create a blank page:

  1. Go to Pages in your account
  2. Click the blue + Page button
  3. Click the blue Blank page button in the top right corner of the template catalog

In the Page Builder:

  1. Click + Add section
  2. In the menu, select Empty Sectionin the sidebar, then click the empty section block. 
    • You now have the bottom layer of your page layout.
    • Add as many sections to the canvas as you want. Adding multiple sections breaks your page into blocks that can each have a unique background color or image.

In the left menu, click Columns

  1. Select Columns
  2. Click and drag any column layout into the page canvas to add a second layer to the page.
    • Move your cursor to a “Drop Here” area in the canvas. When it turns green, drop the column element.
    • Add as many column layouts to the section as you want.

In the left menu, click Components

  1. Browse the component options and select a type that you want to add
  2. Click and drag the component into the page canvas
    • Move your cursor to the “Drop Here” indicator in the canvas. When it turns green, drop the component element.
    • Add as many components to the columns as you want.
    • The maximum width of the component is restricted by the width of the column you place it inside

Watch these steps in action:

Pro tip

  • To change the type of object available for editing, toggle Edit columns on or off in the top builder menu.
    Edit columns on toggle
    1. Click the element you want to edit and a mini-menu will appear
    2. Edit columns ON: Column areas are outlined in blue and green
    3. Edit columns OFF: Components are outlined in orange
  • To edit the bottom section layer, click the gear icon on the right edge to open the section menu.
    • Warning: Deleting a section will delete everything inside it – all columns and components.
  • The maximum size of a component is controlled by the width of the column it is nested inside.
    • For example, the same image component placed in two columns with different widths will be different sizes.

Columns control the maximum size of a component