Changing the numbers of products in a row

New Member
3 0 0

Hi,

I use minimal theme from Shopify and I need to change the numbers of products in a row.

RIghtn now I have 4 in a row, but would like to have only 3.. That would do it easier to view the products..
I know that I might have to go into some css or coding, and I do not have any experience in that, so it has to be very carefully explanied.. :-)

My website is bybram.dk and if u like to see what I mean, plz go to one of the collections. There is 4 in a row and I need 3..

Looking forward to hearing from u..

Best regards
Michael Mørck
bybram.dk

0 Likes
Astronaut
1890 0 373

Edit the theme's HTML/CSS files.  Open Snippets/product-grid-item.liquid.  Change the second line to:

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

 

Edit: Fixed file location

0 Likes
New Member
3 0 0

Hi Alex,

Thanks for your answer..

I have to find out how to get to "Open Assets/product-grid-item.liquid"
When I look under Assets I cant seem to find "product-grid-item.liquid"

I go to: onlinestore/themes/minimal..

Is this right.. :-)

Regards / Michael

0 Likes
Astronaut
1890 0 373

Sorry.  It's in the Snippets folder, not the Assets folder.  Snippets/product-grid-item.liquid

0 Likes
New Member
3 0 0

Hi Alex,

Thank so much, it´s working perfectly.

Thank you.

Best regards / Michael

0 Likes
New Member
5 0 0

Hi again Alex! I'm looking to do something similar with my page here with the Brooklyn theme.

I'm in Snippets/product-grid-item.liquid

Looking at the following:

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

I want to actually make my page show 4 items in a row when the screen is at its widest. At the moment it's just showing 3. What should I be changing the variable to in order to get that effect? I've tried 'large--one-quarter medium--one-half' with no luck.

Thanks:)
David

0 Likes
Highlighted
Astronaut
1890 0 373

@David Wong -- Try making the same change to grid_item_width in Snippets/collection-template.liquid.

Here's an explanation of what's going on.  If grid_item_width is defined in collection-template.liquid, that's what it will use.  Otherwise it will default to its assignment in product-grid-item.liquid.

Since grid_item_width is already defined in collection-template.liquid, making the change in product-grid-item.liquid won't produce any results in this particular case.

1 Like
New Member
5 0 0

Got it! Awesome! Thank you once again Alex

0 Likes