Page Layout Selector

This topic applies to

Applies to

Site Management Tools

The Site Management Tools Layout selector requires SuiteCommerce or the 2019.1 release of SuiteCommerce Advanced or greater.

The layout of a page refers to the overall page design and the arrangement of content such as text and images on the page. A layout can be simple and consist of only one column which presents elements in a continuous vertical form. Pieces of content are placed one after the other.

Or, a layout can be more complex and include a combination of full page spans followed by columns of varying numbers and width.

The scope of each layout area is determined by the layout’s template file. The scope determines if content placed in that area displays only on the specified page, on every page, or on every page of that type. See Site Management Tools Areas for more information on areas and scope.

The SMT Layout Selector enables you to change the look of a page by choosing a different layout for the page. You can use the Layout Selector for landing pages and also for enhanced pages, provided additional layouts are available for those pages. Available layouts can be different for different page types. For example, the layouts available for a landing page are not necessarily the same layouts that are available for a product detail page, search page, or a page utilized by an extension.

Note

Currently only the default layouts are available for the core page types. The core page types are the home page, item detail page, and facet search page. If you want to use alternate layouts for core page types, you can create them as a custom extension and deploy it to your site. If you do not see any alternate layouts for a page, see Create Page Types for more information on creating page types and defining alternate layouts for page types.


Default Area When Changing Layouts

When you add content to a page, you specify the area where that content is displayed. However, when you change the layout of a page, the new layout may have fewer areas or areas that do not directly correspond to the areas available in the original layout. Consequently, some content needs a place to go. SMT places this content into the new layout’s default area. You can then move content from the default area and place it in a different location on the new layout.

Note

The default area is defined in the layout’s template file and is determined by the data-cms-default-area attribute in the CMS area <div>.


To change the layout of a landing page:

  1. Click the Overview Mode on the toolbar.

  2. Click the Pages tab.

  3. Click the More Actions menu, denoted by the ellipsis, for the page.

  4. Select Edit Page from the dropdown menu. This displays the page settings and page preview.

  5. Click the thumbnail for the layout you want to apply.

    When you select a layout, the page preview updates and shows how the page looks with the new layout. To preview a different layout, click the thumbnail for the layout.

  6. Click Set Layout to apply the layout.

    When you set the layout, the page preview updates and shows how the page looks with the new layout. Some content may be placed in the new layout’s default area. You can click Arrange Layout to rearrange the content on the preview.

  7. Click Save to save the changes or click Cancel to discard the changes and return the page to its original layout.

To change the layout of an enhanced page:

Use this procedure to change the layout of a SuiteCommerce core page site such as the home page, item detail page, or landing page.

  1. Go to the page for which you want to change the layout.

  2. Click the Edit Mode on the toolbar.

  3. Click the ellipsis on the right side of the page toolbar to display the settings menu.

  4. Select Edit Page Settings from the dropdown menu.

  5. Select the Layout tab.

  6. Click the thumbnail for the layout you want to apply.

  7. Click Set Layout.

    When you select a layout, the page preview updates and shows how the page looks with the new layout. Some content may be placed in the new layout’s default area. You can click Arrange Layout to rearrange the content on the preview.

  8. Click Save to change the new layout, or click Cancel to discard the changes and return the page to its original layout.