How do I change the number of products/row in the collection pages?

Solved
ghiawalker
Excursionist
15 0 7

How do I change the number of products per row in the collection pages? I'd like to change it from 5 to 4 or 3.
I'm using the Venture theme and think I have the latest version.

When I go the the editor "Collection pages" below is the only settings I see.

ghiawalker_0-1621609682918.png

 

Thanks

 

Accepted Solution (1)

Accepted Solutions
Michal17
Shopify Partner
835 74 155

This is an accepted solution.

Hi @ghiawalker 

Hope you're having a great day!

To change the number of products in a row on a collection page, you'll need to edit two lines (lines 28 and 53) of code within the collection.liquid template.

Head to Online store > Themes > Actions > Edit Code > Collection.liquid (under Templates). Follow the below steps to edit the code:

scrnli_22_05_2021_15-34-42.png

Search for lines 28 and 53 as specified below.

This is the line of code you will need to change:

<div class="grid__item small--one-half medium-up--one-fifth">

and specifically the word "fifth". If you want four products per line you would change the line above to:

<div class="grid__item small--one-half medium-up--one-quarter">

If you want three products per line you would change the line above to:

<div class="grid__item small--one-half medium-up--one-third">

 

See line 28 below:

scrnli_23_05_2021_18-38-01.png

See Line 53 below:

scrnli_23_05_2021_18-49-07.png

If you have any further questions, please do reach out either here on the forum, or via private message/email.

View solution in original post

Replies 3 (3)
Michal17
Shopify Partner
835 74 155

This is an accepted solution.

Hi @ghiawalker 

Hope you're having a great day!

To change the number of products in a row on a collection page, you'll need to edit two lines (lines 28 and 53) of code within the collection.liquid template.

Head to Online store > Themes > Actions > Edit Code > Collection.liquid (under Templates). Follow the below steps to edit the code:

scrnli_22_05_2021_15-34-42.png

Search for lines 28 and 53 as specified below.

This is the line of code you will need to change:

<div class="grid__item small--one-half medium-up--one-fifth">

and specifically the word "fifth". If you want four products per line you would change the line above to:

<div class="grid__item small--one-half medium-up--one-quarter">

If you want three products per line you would change the line above to:

<div class="grid__item small--one-half medium-up--one-third">

 

See line 28 below:

scrnli_23_05_2021_18-38-01.png

See Line 53 below:

scrnli_23_05_2021_18-49-07.png

If you have any further questions, please do reach out either here on the forum, or via private message/email.

Michal17
Shopify Partner
835 74 155

Hi @ghiawalker 

Hope you're having a great day!

If you have any further questions, please do reach out either here on the forum, or via private message/email.

thevista888
Explorer
65 0 21

FOR MINIMAL THEME

Go to Sections>collection-template.liquid

Find this code below (its on line 30 right now);

 {% assign grid_item_width = 'wide--one-fifth large--one-quarter medium-down--one-half' %}

 

Change it to this code if you want to see four products per row;

 {% assign grid_item_width = 'wide--one-quarter large--one-quarter medium-down--one-half' %}

 

Basically you're just changing the word "fifth" to "quarter", you don't need to change the whole code. 
If you want to see three products per row, change that word to "third".

(I'm not a programmer just trying my best around here, all credits and thanks to @Michal17.)

This comment was posted for people who couldn't find the right file in Minimal theme.