Layouts, layout templates, and default layouts

A layout is an arrangement of widgets that contain or retrieve store content. A layout is used to render a store page. We can create layouts in the Commerce Composer tool. To use a layout on the storefront, we can assign the layout to a single page, multiple pages, or a search term. For example:

• Assign a layout to your home page that showcases your Boxing Week Sale.

• Assign a layout to all the subcategory pages in the Furniture category to ensure that the pages use a consistent design.

• Create a layout to use as a search results page for our Hermitage brand and assign it to the search term Hermitage. When shoppers search the site using the term Hermitage, your layout is displayed instead of the regular search results page.

Layouts can be:

• Scheduled; for example, for the Apparel department page, we can schedule a different layout for each week of the year.

• Prioritized; we can assign a priority number to each layout. This number determines which layout assignment to use on the storefront when conflicts arise, such as when the schedules overlap for two different layout assignments. The layout assignment with the highest priority is used on the storefront.

Note: We cannot assign a layout to a specific customer segment. However, we can personalize the content of certain widgets in the layout by running web activities that contain targets.

Layout templates

A layout template is a reusable starting point for creating a layout. In the Commerce Composer tool, we can choose from a number of layout templates on which to base your page layouts. Each layout template is a wireframe that contains a specific arrangement of slots. To create a layout, you pick a template, assign layout widgets to the slots, and then populate the widgets. Depending on your company's needs, the slots in the layout template can be either empty or prefilled with a widget.

The Commerce Composer tool provides a set of sample layout templates that are designed for use with WebSphere Commerce starter stores. Store developers can customize these templates for the store, or create new templates by building special JSP pages and making them available in the Commerce Composer tool. The following are examples of layout templates; the numbers represent the slots in the templates to which we can add widgets:

In the Commerce Composer tool, layout templates can be any of the following types:

Desktop layout templates

Used to build pages that are viewed on desktop, notebook, and tablet computers.

Mobile layout templates

Used to build pages that are viewed on mobile devices.

Responsive layout templates

Used to build pages that can be viewed on any device. Pages that are based on these templates adapt to a range of screen sizes by using flexible grids and images, and other responsive design techniques. These templates are intended for use with responsive widgets.

The sample layout templates included with the Commerce Composer tool are all responsive layout templates. These sample templates have specific characteristics:

• We can add multiple widgets to the same slot. Widgets that share a slot can be the same type or a different type. If you add more than one widget to a slot, the widgets always stack vertically within the slot. We can control the sequence in which the widgets are stacked within the slot. To place two widgets side by side, we must put the widgets in two different slots. This arrangement requires a layout template that has at least two columns.

• We can leave slots empty if you do not need them for our layout. When the store page is rendered, the area that represents the slot will not take up vertical space in the rendered page.

Default layouts

The purpose of a default layout is to render the page in the storefront when no layout is assigned to the page. Typically, each type of page that is managed in the Commerce Composer tool has a default layout. For example, the Aurora starter store has a default layout that is defined for each of the following page groups:

• Content pages

• Search results pages

• Category pages

• Product pages

• Bundle pages

• Kit pages

• Dynamic kit pages

• Predefined dynamic kit pages

• SKU pages

  Note:

  • If you publish the Aurora starter store as a B2C store, the SKU page uses the default layout for product pages.

  • If you publish the store as a B2B store, the SKU page uses the default layout for SKU pages.

Each default layout contains predefined slots and widgets that are set up by IT developers.

When creating a new content page, or add a category or catalog entry to the catalog, the default layout is initially used to render the new page. When you view the new content or category page in store preview, we can see the default layout and its contents. The default layout might contain one or more e-Marketing Spots that we can populate with either default content or web activities. Use the Marketing tool to manage the e-Marketing Spots in the default layout, as you would with pages that are not managed in the Commerce Composer tool. If you do not want to use the default layout for the new page, we can override the default layout by assigning a new layout to the page. Tip: To find out whether a page is using the default layout, view the page in store preview and click the Show Layout Information button. The Page and Layout Information window identifies the layout that is applied to the page, as shown here:

IT developers can manage default layouts using the Data Load utility. For more information, IT developers can refer to layout input file.

Related concepts
Layout assignments for category pages
Layout assignments for catalog entry pages
Layout assignments for search terms
Widgets for Commerce Composer
Pages and page creation
Web activities

Related tasks
Creating a layout for a page
Creating a layout for a search term
Populating tabbed slots in layout templates
Viewing the list of layouts assigned to a page
Copying a layout
Viewing information about widgets in store preview
Viewing information about pages and layouts in store preview