After July 2021, the 2.3.x release line no longer received quality updates or user guide updates. PHP 7.3 reached end of support in December 2021, and Adobe Commerce 2.3.x reached end of support in September 2022. We strongly recommend upgrading to Adobe Commerce 2.4.x to help maintain PCI compliance.

Page Layout

This site contains archived merchant documentation for a version of Adobe Commerce and Magento Open Source that has reached end-of-support. The documentation available here is intended for historical reference only and is not maintained. The Adobe Commerce Merchant Documentation for current releases is published on the Adobe Experience League.

The layout of each page in your store consists of distinct sections, or containers, that define the header, footer, and content areas of the page. Depending on the layout, each page might have one, two, three columns, or more. You can think of the layout as the floor plan of the page, and assign a specific layout to be used as the default for CMS, product, and category pages.

On the page, content blocks float to fill the available space, according to the section of the page layout where they are assigned to appear. You will discover that if you change the layout from a three-column to a two-column layout, the content of the main area expands to fill the available space, and any blocks that are associated with the unused side bar seem to disappear. However, if you restore the three-column layout, the blocks reappear. This fluid approach, or liquid layout, makes it possible to change the page layout without having to rework the content. If you are used to working with individual HTML pages, you will discover that this modular, building block approach requires a different way of thinking.

Standard two-column with left bar page layout

Configure default layouts

  1. On the Admin sidebar, go to Stores > Settings > Configuration.

  2. In the left panel under General, choose Web.

  3. Expand the Default Layouts section.

    Default Layouts

  4. Choose the Default Product Layout that you want to use for product pages.

    This determines the layout that is used by default for product pages.

    No layout updates Layout updates are not available for product pages.
    Empty Uses a blank layout for product pages.
    1 column Uses a single column layout for product pages.
    2 columns with left bar Uses a two-column layout with the sidebar on the left for product pages.
    2 columns with right bar Uses a two-column layout with the sidebar on the right for product pages.
    3 columns Uses a three-column layout with sidebars on the left and right for product pages.

    When Page Builder is enabled, there are additional full width options available. You can then use the Page Builder content tools to design the layout for your product pages.

    Page – Full Width Uses the Page - Full Width layout for product pages.
    Category – Full Width Uses the Category - Full Width layout for product pages.
    Product – Full Width (Recommended) Uses the Product - Full Width layout for product pages.

  5. Choose the Default Category Layout that you want to use for category pages.

    This determines the layout that is used by default for category pages.

    No layout updates Layout updates are not available for category pages.
    Empty Uses a blank layout for category pages.
    1 column Uses a single column layout for category pages.
    2 columns with left bar Uses a two-column layout with the sidebar on the left for category pages.
    2 columns with right bar Uses a two-column layout with the sidebar on the right for category pages.
    3 columns Uses a three-column layout with sidebars on the left and right for category pages.

    When Page Builder is enabled, there are additional full width options available. You can then use the Page Builder content tools to design the layout for your category pages.

    Page – Full Width Uses the Page - Full Width layout for category pages.
    Category – Full Width (Recommended) Uses the Category - Full Width layout for category pages.
    Product – Full Width Uses the Product - Full Width layout for category pages.

  6. Choose the Default Page Layout that you want to use for CMS pages.

    This determines the layout that is used by default for CMS pages.

    No layout updates Layout updates are not available for CMS pages.
    Empty Uses a blank layout for CMS pages.
    1 column Uses a single column layout for CMS pages.
    2 columns with left bar Uses a two-column layout with the sidebar on the left for CMS pages.
    2 columns with right bar Uses a two-column layout with the sidebar on the right for CMS pages.
    3 columns Uses a three-column layout with sidebars on the left and right for CMS pages.

    When Page Builder is enabled, there are additional full width options available. You can then use the Page Builder content tools to design the layout for your CMS pages.

    Page – Full Width (Recommended) Uses the Page - Full Width layout for CMS pages.
    Category - Full Width Uses the Category - Full Width layout for CMS pages.
    Product - Full Width Uses the Product - Full Width layout for CMS pages.

  7. When complete, click Save Config.

© 2024 Adobe. All rights reserved.