Change Number of Products per Row - Minimal Theme

C_H
Tourist
11 0 4

I've spent the last few hours trying to do this and I'm completely stumped. I've searched the forums and every previous solution to this question does not work correctly for me. I am using minimal theme in wide layout, which defaults to 6 products per row on a Collection page. I want 4 products per row.

By tinkering with

<div class="product span3

 in product-loop.liquid, and

.span3.adaptive-grid {width: 188px;}
.span3.adaptive-grid:nth-child(4n+5) {clear: none;}
.span3.adaptive-grid:nth-child(6n+7) {clear: both;}

in styles.scss.liquid, I have been able to change the number of columns from 6 to 4, but the display of products has gaps. For instance, the first two columns in row two might be empty then continue normally in A-Z order until row five, where column four is empty.

Any help would be appreciated. Thanks!

Replies 25 (25)
Bob_O_
Shopify Staff
108 0 23

Hey there! 

I just did some snooping around since this request is not that uncommon and I came across some steps in this thread which I just tested in a fresh version of the Minimal theme and it worked like magic. 

All you need to do is open up the product-grid-item.liquid template in the Snippets folder and make the following change. 

Find the code which reads...

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

and change that to...

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

Give that a shot if you haven't tried that solution yet and you should see similar results that I did. :) 

Cheers,
Bob O. 

Bob | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

C_H
Tourist
11 0 4

Hi Bob! Thanks for the reply. I did see that thread before I posted my own. Unfortunately, I don't have product-grid-item.liquid in my theme, and I couldn't find anything that resembled that code elsewhere in my theme.

C_H
Tourist
11 0 4

This is still an issue for which I still don't have an answer. Bumping this up to see if anyone else might have a solution.

Jonny_Creative
New Member
1 0 0

Hi I need to do this as well and dont see the code above in my minimal theme. Quite urgent!

ANette
New Member
9 0 0

Did you ever find the solution? I'm trying to change mine it also.

tim
Shopify Expert
2925 143 1046

Hi ANette, 

your theme seems to be pretty new. Try this: open your collection-template.liquid Section, find (around line 30) this line

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

and replace it with this

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

This will give you 4 items per row on screens wider than 1250px, 3 on large screens and two for screens less wide than 768px.

How many do you want?

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
ANette
New Member
9 0 0

Hi Tim, thank you for responding. I would like 3 items on screens larger than 1250px. Do photos keep the size?

tim
Shopify Expert
2925 143 1046

No, the photos will be bigger. Generally the width will be one/third of the site width.

To have three products, use

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

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
ANette
New Member
9 0 0

Perfect. Thank you very much. It worked :)