How do I change the number of products displayed per row?

New Member
10 0 0

Hi there,

I have recently launched my website and I realised I wanted to change how many products are displayed per row to three. However I'm unable to find how to change it, i'm using venture as my theme by the way.

Thanks in advance

0 Likes
Shopify Partner
1838 173 601

Hi Rob,

Head over to your Shopify admin and navigate through to your Online Store > Themes. Your current theme will have a blue Customize button so go on and customize it.

Once in the theme editor you will notice that in the top bar to the right of the Shopify logo, there's a dropdown to select the template you wish to customize - pick Collection pages

Now you will find that in the left options drawer you have sections that can be customized within that template. Choose Collection pages

And finally you arrive at the collection section settings where you can change the items per row etc.

Make sure Layout is set to Grid and then change the Products per row to whatever suits you best.

Hope this helps!

 

I turn coffee in to code - since 1998
0 Likes
New Member
10 0 0

Its not giving me the option for some reason

0 Likes
Shopify Partner
1838 173 601

What theme are you using?

I turn coffee in to code - since 1998
0 Likes
New Member
10 0 0

Venture

 

0 Likes
Shopify Partner
1838 173 601

Ha! So they didn't add those schema options for venture theme. Awesome (not)!

That means you have 2 options

  1. Modify Venture theme
  2. Choose a different theme

Just looking at the code of Venture theme now, it is quite basic - other free themes seem to offer a lot more. But if you still want to embark on this venture (pun intended) then you need to open up admin and navigate over to Themes > from the Actions drop down select Edit code and then in the theme file browser open up Templates / collection.liquid. Look for these lines of code

<div class="grid__item small--one-half medium-up--one-fifth">
  {% include 'product-card', product: product %}
</div>

You will want to change that to

<div class="grid__item small--one-half medium-up--one-third">
  {% include 'product-card', product: product %}
</div>

Notice how we changed to medium-up--one-third which is a class denoting that on medium size displays and upwards, use 1/3 of the grid columns per grid item. Of course you can have quarter, the original fifth etc. Up to you.

What you won't be able to do is change this using the UI since the they didn't add the settings schema and it's a template, not a section. Well, you could, but that would be another question and thread ;-)

Hope this helps!

I turn coffee in to code - since 1998
2 Likes
New Member
10 0 0

Thank you soooo much. This has been bothering me for a while.

0 Likes
New Member
1 0 0

Hi, I have the same problem with Brooklyn Theme.

Can you please help me?

0 Likes
New Member
1 0 0

thank you so much!!

0 Likes
New Member
1 0 0

Hmm did this and nothing changed 

0 Likes