Create responsive layout templates

We can create responsive layout templates so that store pages and elements are optimized for web browsers on desktop, tablet, and mobile devices.

Procedure

• If we create store pages using the existing default layout templates in the Commerce Composer, the container is already responsive by default. That is, the default layout templates use a fluid grid system.

  For a complete list of responsive templates available in the Commerce Composer tool, see Responsive layout templates.

• If we are using our own container or template from scratch, consider reviewing the following guidelines.

  Before you begin, ensure that you have created your Commerce Composer template layout.

  If you choose to use a fluid grid system, the following guidelines help make the layout responsive:

  1. Ensure that your template is responsive. For example, by using a fluid grid system. That is, divide the container into rows and columns using the CSS classes provided by the fluid grid system. For more information about the fluid grid system, see Responsive Web Design (RWD) framework: Fluid layouts and grids.

  2. Once the rows and columns are created, tag some of the cells as slots using the Commerce Composer Tag Library (taglib).

  3. Add responsive behaviors to the slots using the CSS classes provided by the fluid grid system. For example, by enabling column stacking. For more information about column stacking, see Responsive Web Design (RWD) framework: Column stacking.

  4. Optional: If necessary, customize the responsive behaviors of the slots by using custom CSS rules with media queries.

  5. Test and debug your new responsive layout template to ensure that the layout template works on different screen widths and with different widgets.

Related concepts
Responsive Web Design (RWD)