Skip to main content

Overview

You can use layouts to design the structure of your pages. Layouts determine how information, visuals, and components are organized to guide visitors through your content toward specific goals, such as making a purchase or signing up for an offer. By streamlining the page development process, layouts save time and enhance the overall user experience of your pages.

Below is an overview of the steps to follow to use layouts:

  1. If required, create your own custom components, including banners, headers, footers, layouts or sections. See Custom Components.
  2. In the Layouts editor, create your new layout. You can use a default layout or use a custom layout that you have created.
  3. Add your headers and footers.
  4. Depending on your requirements, format your headers and footers.
  5. Once you have saved and published your layout, when you create a new page, the new page automatically uses the new layout. Alternatively, you can manually change the layout for individual pages by going to the Settings for a page and selecting a different layout.
  6. You can see a list of all your current layouts and the number of pages using each one. In addition, you can see the layouts used on your default pages, and change them if you wish.

Default Layouts​

There are three default layouts.

Default LayoutDescription
Full header - Full FooterThe full header and footer provides an example of the typical elements commonly included in an online storefront. The header has key components such as company logo, navigation menu, and a call to actcion, while the footer includes essential information like contact details, link to policies, social media icons, and site navigation. The full header and footer offers a useful starting point when designing or developing your online storefront.
Minimal header - Minimal footerA minimal header consists of a company name and the footer contains a copyright notice. By starting with a minimal header and footer, you can take an iterative approach to adding elements to your header and footer.
Single Column LayoutContent is stacked in a vertical column. Single-column layouts enhance readability, usability, and mobile compatibility while helping focus the user's attention on important actions or content. The layout consists of Header, Main, and Footer sections.