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

Rob43
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

Replies 30 (30)

KarlOffenberger
Shopify Partner
1873 184 900

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
Visitor
1 0 0

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

Rob43
New Member
10 0 0

Its not giving me the option for some reason

KarlOffenberger
Shopify Partner
1873 184 900

What theme are you using?

Rob43
New Member
10 0 0

Venture

 

KarlOffenberger
Shopify Partner
1873 184 900

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
Visitor
1 0 0

thank you so much!!

LimiterBash
Visitor
1 0 0

Hmm did this and nothing changed 

Vicbr
Tourist
13 0 0

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
New Member
7 0 0

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
Visitor
1 0 0

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
Tourist
9 0 2

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
Shopify Partner
36839 3635 11972

@Lucelly 

Thank for post.

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AbbeyEdmonds
Tourist
3 0 1

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
Shopify Partner
36839 3635 11972

@AbbeyEdmonds 

Thanks for it 

sorry but your store is password protect

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AbbeyEdmonds
Tourist
3 0 1

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

Thank you!

Abbey

ivyrunwaystore
Tourist
3 0 4

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
Shopify Partner
36839 3635 11972

@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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ivyrunwaystore
Tourist
3 0 4

Thank you, you assistance would be much appreciated.

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

KetanKumar
Shopify Partner
36839 3635 11972

@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%;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ivyrunwaystore
Tourist
3 0 4

Thank you very much Ketan, that worked!

KetanKumar
Shopify Partner
36839 3635 11972

@ivyrunwaystore 

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Nattt
Visitor
2 0 1

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

KetanKumar
Shopify Partner
36839 3635 11972

@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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
TBTAsha
Visitor
1 0 0

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
Excursionist
14 0 0

Hi Ketan,

 

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

IreneSNB
Visitor
2 0 1

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
Visitor
2 0 1

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
New Member
10 0 0

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

Oxymoron25
Visitor
1 0 1

Hi, I have the same problem with Brooklyn Theme.

Can you please help me?