How to display 4 products per row, not 5?

Tourist
16 0 3

Using the Venture theme, how can you display 4 products per row. Instead of 5 items per row.

Thank you for any help.

0 Likes
Shopify Staff
Shopify Staff
166 0 25

Hey there!

This one is actually a quick fix! You'll need to jump into your collection.liquid file. Go to Online Store > Themes > click the three dots at the top right and choose 'Edit HTML/CSS'. Open up your collection.liquid file. Falls around on line 57 for me. 

Find the line of code that looks like this:

<div class="grid__item small--one-half medium-up--one-fifth">
    {% include 'product-card', product: product %}
</div>

Simply change the one-fifth to one-quarter as seen in this screenshot and you're done!

https://screenshot.click/12-13-svvk4-u5c4b.jpg

Thanks

Phil K
Customer Success Guru

2 Likes
Tourist
16 0 3

Than you Phil!

0 Likes
New Member
1 0 0

Don´t forget to change the percentage in the first line of collection.liquid to increase product images accordingly. For 5 products in a row 20%, for 4 products 25%.

{% paginate collection.products by 25 %}

0 Likes
Tourist
5 0 3

Hey Phil,

I need a help regarding this, How to make two collections per row in venture theme mobile version. Please help me with this. 

Thanks!!

0 Likes
Tourist
5 0 3

Hey Phil,

I need a help regarding this, How to make two collections per row in venture theme mobile version. Please help me with this. 

Thanks!!

0 Likes
New Member
1 0 0

Hi i just tried to implement this to show 4 products per row and its not working for me. Has much changed since this last was commented on?

0 Likes
Shopify Staff
Shopify Staff
166 0 25

@vera

There's a good change it may have changed since then, it's been quite a while. For most up to date information we recommend reaching out to our support team.

0 Likes
Tourist
8 0 1

you are a legend mate!! Can you pls explain me how to decrease it to 3 items. With quarter thing its 4

0 Likes
New Member
8 0 0

@Philip_K wrote:

Hey there!

This one is actually a quick fix! You'll need to jump into your collection.liquid file. Go to Online Store > Themes > click the three dots at the top right and choose 'Edit HTML/CSS'. Open up your collection.liquid file. Falls around on line 57 for me. 

Find the line of code that looks like this:

<div class="grid__item small--one-half medium-up--one-fifth">
    {% include 'product-card', product: product %}
</div>

Simply change the one-fifth to one-quarter as seen in this screenshot and you're done!

https://screenshot.click/12-13-svvk4-u5c4b.jpg

Thanks

Phil K
Customer Success Guru


Hi Phil, 

 

Do you know how to do this with the narrative theme?

 

Thank you!

0 Likes