By default, the product list displays products arranged in grid view format of 2 columns. In order to change the number of columns, you need to:
- Create a custom display template from the Storefront's Configuration > Display templates menu.
- Select the "Product list" module control and Add new.
- Give the new custom display template a name (e.g. CustomProductList)
- Always choose the latest Base display template with the highest version number.
- Look for the following line and change the GroupItemCount attribute value to the number of columns you wish to render:
<asp:ListView ID="ProductListListView" runat="server" GroupItemCount="2" OnPagePropertiesChanging="ProductListListView_PagePropertiesChanging"
OnItemDataBound="ProductListListView_ItemDataBound" DataKeyNames="ProductVariantID"
OnItemCommand="ProductListListView_ItemCommand">
- Save the display template.
- Under Configuration > Product list menu, set the Display template to your newly created custom display template.