Display no. of products in row

In this article

Introduction
Number of products per row on homepage
Number of products per row on collection page
2 product per row in product page ( For Mobile View )

⚠️ Kindly take note :
Above all code editing, you will need to re-edit the code again if you switch to a new theme template
We do not allow to change or edit the code for the checkout page (which include shipping & payment method) due to security reasons

1. Introduction

Different number of products in a row can create a different feeling to your online store. If you prefer your store to be less cluttered or you would like to show more variety of products that you have, you can now decide how many products to show in a row at your store.

Benefits:
To customize no. of products per row in order to create a look that fits your store's direction.
To have a more organized and tidy looking store

2. Number of products per row on homepage

Step 1: Go to EasyStore Admin > Channels > Online Store > Edit Source > product-grid-item.liquid.

Step 2: Insert {% comment %} at the top and {% endcomment %} at the bottom of the part as shown in screenshot below:



Step 3: Save.

Step 4: Next, go to folder featured-product.liquid

Step 5: Change the number beside 'products_per_row' to the number of products per row you wish > Save



📌 Note: You are only able to change the number to 2, 3, 4, 5.

3. Number of products per row on collection page

Step 1: Go to folder collection-grid-item.liquid.

Step 2: Insert {% comment %} at the top and {% endcomment %} at the bottom of the part as shown in screenshot below:



Step 3: Save.

Step 4: Next, go to folder collection.liquid.

Step 5: Change the number beside 'products_per_row' to the number of products per row you wish > Save



📌 Note: You are only able to change the number to 2, 3, 4, 5.

4. product per row in product page ( For Mobile View )

Step 1: Go to EasyStore Admin > Channels > Online Store > Edit Source > folder settings_data.json

Step 2: Find collection_products_list_per_row > Change 3 to 4



Step 3: Save and done

Updated on: 23/09/2022