Change Number of Products per Row - Minimal Theme

Highlighted
Tourist
11 0 3

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!

Highlighted
Shopify Staff
Shopify Staff
108 0 19

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. 

0 Likes
Highlighted
Tourist
11 0 3

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.

0 Likes
Highlighted
Tourist
11 0 3

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.

Highlighted
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!

0 Likes
Highlighted
New Member
9 0 0

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

0 Likes
Highlighted
Shopify Expert
2684 67 841

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!
I am away till Feb-15.
Highlighted
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?

0 Likes
Highlighted
Shopify Expert
2684 67 841

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!
I am away till Feb-15.
Highlighted
New Member
9 0 0

Perfect. Thank you very much. It worked :)

0 Likes