Create custom layouts in the PrestaShop theme

In this blog, we will learn how to add custom layouts to an existing PrestaShop theme. PrestaShop already has some predefined layouts, such as full width, two columns, three columns, and so on. However, if you need to add a new layout, you can create custom layouts.

To add a custom layout, we need to create a file under the templates/layouts folder of the theme and modify the config/theme.yml file. Modifying files in existing themes is not a recommended approach because when you update the theme, changes will be lost. Therefore, we will create a child theme. PrestaShop supports child theme functionality, which means you can extend the parent theme’s behavior.

To create a child theme in PrestaShop, we create a folder under the themes folder and name it according to your wish in small letters (for example, “mytheme”). Create another folder under “mytheme” and name it “config.” Under the “config” folder, create a new file called “theme.yml” and put the following content in this file:

parent: classic
name: mytheme
display_name: My theme for layout
version: 1.0.0
assets:
  use_parent_assets: true

meta:
  compatibility:
    from: 8.1.0
    to: ~

  available_layouts:
    custom-layout:
      name: Custom layout
      description: This is custom layout
    layout-full-width:
      name: Full Width
      description: No side columns, ideal for distraction-free pages such as product pages.
    layout-both-columns:
      name: Three Columns
      description: One large central column and 2 side columns.
    layout-left-column:
      name: Two Columns, small left column
      description: Two columns with a small left column
    layout-right-column:
      name: Two Columns, small right column
      description: Two columns with a small right column

Here, we have extended the default PrestaShop “classic” theme. You can also visit the below link to understand the theme.yml file parameters in detail:

https://devdocs.prestashop-project.org/8/themes/getting-started/theme-yml

In the available_layouts params, we have defined our custom layout name and description:

custom-layout:
      name: Custom layout
      description: This is custom layout

Now, we have to create this layout file under the templates/layouts folder so create this folder and create a file called custom-layout.tpl inside the templates/layouts folder and put the below content:

{extends file='layouts/layout-both-columns.tpl'}

{block name='content_wrapper'}
  <div id="content-wrapper" class="js-content-wrapper col-xs-12 col-md-8 col-lg-9">
    {hook h="displayContentWrapperTop"}
    {block name='content'}
      <p>Hello world! This is HTML5 Boilerplate.</p>
    {/block}
    {hook h="displayContentWrapperBottom"}
  </div>
{/block}

Note: The layout file name must be the same as defined in the theme.yml file. In the custom-layout.tpl file, we have extended the parent theme (classic) layout-both-columns.tpl layout.

You can see the newly added child theme in the theme list (Design > Theme & Logo > Theme), activate the child theme and click on “Choose layouts”: