Populating tabbed slots in layout templates

Some layout templates contain slots that display the page content in tabs. We can add a title to each of the tabs and then add widgets to populate the tabs. It is not necessary to use all the tabs included in the template. For example, if the template has three tabs, we can leave the third tab empty so that the tab is not rendered on the page.

The following are examples of templates that contain tabbed slots:


Procedure

  1. Open the Commerce Composer tool.

  2. Start a layout that is based on a template that contains tabs.

  3. Click the Design Layout tab so that we can see the wireframe that represents the layout.

  4. To add a title to the tab:

    1. In the wireframe, click the area that is labeled Title [slot number]. Example: Title 6

      The Add Widgets to Slots window opens and lists only the Text Editor widget.

    2. Click the Text Editor widget, and then click OK. The properties for the Text Editor widget are displayed.

    3. In the Display text field for the Text Editor widget, type the title to use for the tab. To override the default style for the tab title, we can format the text in the editor or enter HTML.

  5. Add a widget to populate the tab:

    1. In the wireframe, click the corresponding area that is labeled Tab [slot number]. Example: Title 6

      The Add Widgets to Slots window opens.

    2. Click a widget, and then click OK.

    3. Complete the widget properties and content.

    4. We can add more widgets to the tab slot.

  6. For each additional tab to populate, repeat steps 4 and 5.

  7. Preview the results in store preview.


Related concepts
Layouts, layout templates, and default layouts
Layout assignments for category pages
Layout assignments for catalog entry pages
Layout assignments for search terms


Related tasks
Creating a layout for a page
Creating a layout for a search term
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