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

[Rob43]

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

[KarlOffenberger]

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!

[MondrianFlorist]

That's very useful and solved my issue. Thanks!

[doloreskeating]

Hey Karl. I use the Flow theme. Is it possible to vary the number of products in a row? For example in my blanket collection - I would like to show 4 blankets in each row. But my firepit section has only 5 products and it looks weird that one product is on a row by itself. Do you know what I mean? I would like to be able to vary the number of products in a row - depending on the collection. That possible?  

[Rob43]

Its not giving me the option for some reason

[KarlOffenberger]

What theme are you using?

[Rob43]

Venture

[KarlOffenberger]

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!

[workoutsbysteph]

thank you so much!!

[LimiterBash]

Hmm did this and nothing changed 

[Vicbr]

Sir,

I use the district theme and I met the same problem.

I want to show three products per row on colletion.

Can you help to check my post below, thanks a lot.

https://community.shopify.com/c/Shopify-Design/How-do-I-change-the-number-of-products-displayed-per-...

[smh3]

Also looking to change the number of items in the row (minimal theme) and the settings in the collections pages don't have the options listed in the directions... I think the instructions are outdated. Can anyone advise?

Thanks!

[gabigarcia]

Hi there, 

I am having trouble with this for "Minimal Theme' was wondering if you could advise? I wanted to change it from 5 products per row to 4. 

Thank you so much in advance. 

[Lucelly]

Im having the same problem and would rather find a solution that doesn't involve changing the code. I don't want to mess things up as tried changing code before and it wasn't pretty!

[KetanKumar]

@Lucelly 

Thank for post.

Please share your site URL,
So I will check and provide a solution here.

[AbbeyEdmonds]

Hello there! I'm having the same issue with the Minimal theme. My site URL is abbeyedmonds.shop

Any help would be wonderful!

Thank you,

Abbey

[KetanKumar]

@AbbeyEdmonds 

Thanks for it 

sorry but your store is password protect

[AbbeyEdmonds]

Hello there, I've changed the settings so it is not protected anymore.

Thank you!

Abbey

[ivyrunwaystore]

Hi Ketan,

Could I please get some assistance with this too please?

Brooklyn theme, I can only see one product per row on mobile view.

Thank you,

[KetanKumar]

@ivyrunwaystore 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[ivyrunwaystore]

Thank you, you assistance would be much appreciated.

The is the url:
https://ivyrunwaystore.com/

[KetanKumar]

@ivyrunwaystore 

thanks for detail, please add code 

1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.

@media screen and (max-width: 590px) {
#CollectionSection .grid-uniform {
    display: flex;
    flex-wrap: wrap;
}
#CollectionSection .grid-uniform .grid__item {
    width: 50%;
}
}

[ivyrunwaystore]

Thank you very much Ketan, that worked!

[KetanKumar]

@ivyrunwaystore 

it's my pleasure to help us

[Nattt]

I need help to do the same with theme "colors", can anyone help me?

[KetanKumar]

@Nattt 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[TBTAsha]

I made the change to quarter at row 28 & 53 in collection.liquid. However, this resulted in one column per row. When I change from one-fifth to one-third, it displayed 3 columns per row.

Appreciate your assistance

[JerrySedra]

Hi Ketan,

I am using Foodie theme, how can i solve it?

[IreneSNB]

Hello,

In minimal theme, how do I change the code to four per row?

This is the code I can read

Hi,

In minimal how would I change it to four per row?

This is the code bit I see

<div class="grid-uniform grid-link__container">
{% assign grid_item_width = 'wide--one-fifth large--one-quarter medium-down--one-half' %}
{%- assign product_width = 335 -%}

Many thanks!

[IreneSNB]

Hi,

In minimal how would I change it to four per row?

This is the code bit I see

<div class="grid-uniform grid-link__container">
{% assign grid_item_width = 'wide--one-fifth large--one-quarter medium-down--one-half' %}
{%- assign product_width = 335 -%}

Many thanks!

[Rob43]

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

[Oxymoron25]

Hi, I have the same problem with Brooklyn Theme.

Can you please help me?