Change Number of Products per Row - Minimal Theme

Highlighted
New Member
10 0 0

Hi,

This post seems to be outdated - However, I am still facing this issue so would appreciate any help.

I am unable to apply above solutions to adjust no of products per row in the Minimal theme. Unable to find grid_item_width in the product-grid-item.liquid.

Can someone please help me? 

Thanks!

0 Likes
Highlighted
Shopify Expert
2684 67 775

Hi ariasparkles,

have you tried my suggestion -- to edit 

collection-template.liquid Section, find (around line 30)

?

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

Opps, looks like I didnt try it...

And it worked! Thank you very much. Much appreciated.

Just one thing: looks like the product names are now left centered...Seems like I need to do some more tweaking to move those..<pic attached> Any ideas?

0 Likes
Highlighted
New Member
4 0 0

HI there Tim,

I tried the suggestions you provided, but it seems the code has changed recently. There is no "grid_item_width" on the collection page.

I like to limit the number of products to 3 per row. 

Thank you in advance for your response. 

0 Likes
Highlighted
New Member
4 0 0

Hello,

Has anyone tried to resolve this problem recently. The instructions provided earlier in this thread has not worked. The code must have been changed in the last month.

Thanks!

0 Likes
Highlighted
New Member
4 0 0

I found my error. Apparently "Bob O" response worked perfectly.

I missed the part about the file in the snippet folder. 

 

0 Likes
Highlighted
New Member
2 0 1

It seems that the code for the "minimal" theme must have changed recently.

I cannot Find the code which reads... 

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

Perhaps i am looking in the wrong place:}

under "snippet".      product-grid-item.liquid 

{% include 'image-style' with image: featured.featured_image, width: product_width, height: 480, wrapper_id: wrapper_id, img_id: img_id %}
            <div id="{{ wrapper_id }}" class="product__img-wrapper supports-js">
              <div style="padding-top:{{ 1 | divided_by: featured.featured_image.aspect_ratio | times: 100}}%;">
                <img id="{{ img_id }}"
                     class="product__img lazyload"
                     src="{{ featured.featured_image | img_url: '300x300' }}"
                     data-src="{{ img_url }}"
                     data-widths="[150, 220, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
                     data-aspectratio="{{ featured.featured_image.aspect_ratio }}"
                     data-sizes="auto"
                     alt="{{ featured.featured_image.alt | escape }}">

 

I currently have 5 items per row, i would like to have only 3 items per row.

Any advice would be greatly appreciated.

Scott

 

0 Likes
Highlighted
Shopify Expert
2684 67 775

Scott,

check the my first post in this theme

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.
0 Likes
Highlighted
New Member
1 0 0

hello, someone have an answer for this? 

it doesnt work because it seems to change.

 

5 PER ROW to change it to 4 per row. Someone can help me?

Thank you

0 Likes
Highlighted
New Member
1 0 0

This code doesn'


@Bob_O_ wrote:

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. 



This code doesn't seem to exist anymore. Do you have another solution this problem?

0 Likes