how to have different number of products per row in a product grid with Craft theme

Store Design
1

Hi

My products are of various sizes and I do not want them all to be the same size or have the same aspect ratio. My question is, how can I vary the number of products per row in a product grid. Meaning:

Row 1: 3 products of my choice

Row 2: 4 products of my choice.

So I need to vary the number per row and control which products are on which row, so similar sized products are shown on the same row.

I am using the Craft theme.

Thanks

2

Hi @artsy_lady ,

Please send the website link, I will check it for you

3

Hi @artsy_lady ,

May I suggest to update code these steps:

  1. Create a metafield for product

namespace: custom, key: width, type: decimal

EBOOST_0-1732689749693.png
EBOOST_0-1732689749693.png1920×1390 159 KB

  1. Go to Products → Collections → Update sort by to “Manual” → You should remove sort by featured in customize theme.

EBOOST_1-1732689878511.png
EBOOST_1-1732689878511.png1430×719 108 KB

  1. Go to Products-> each product → add data for width metafield ( 33.3333 → 3 columns / row, 25 → 4 columns/row, 50 → 2 columns/ row …)

EBOOST_2-1732689982644.png
EBOOST_2-1732689982644.png1554×735 55.9 KB

  1. Go to Store Online-> theme → edit code ->sections/main-collection-product-grid.liquid.

  2. Find “{%- for product in collection.products -%}”. Update code for li tag likes the screenshot below.

- ```

![EBOOST_4-1732690296005.png|1857x683](upload://bmUYAcMHqxqXPAEhXXeE3miEiOZ.png)

Result is the same screenshot below:

![EBOOST_3-1732690010902.png|1936x3709](upload://qiNYpTNRC8dherhhDCay8GlndbP.jpeg)
4

Thank you that worked perfectly! I have a follow up question. How can I make only one column per row on mobile?

Thanks!

5

Hi,

You only need to add code below to top of sections/main-collection-product-grid.liquid file
6

Thank you … worked perfectly!