Venture Theme: How to change collection page to have 4 products per row instead of 5?

Solved
sfairley
New Member
2 0 1

I'd like to change my collection pages on my store with the 'Venture' theme to have 4 products on each row instead of the 5, as the products seem quite hard to see with rows of 5 products. 

 

Any advice would be appreciated! Thanks.

Accepted Solution (1)

Accepted Solutions
garrenkeith
Excursionist
31 6 15

This is an accepted solution.

1. Open collection.liquid

2. Find this line of code

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

3. Replace one-fifth with one-quarter like this...

{% for product in collection.products %}
      <div class="grid__item small--one-half medium-up--one-quarter">
        {% include 'product-card', product: product %}
      </div>

View solution in original post

Replies 4 (4)
garrenkeith
Excursionist
31 6 15

This is an accepted solution.

1. Open collection.liquid

2. Find this line of code

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

3. Replace one-fifth with one-quarter like this...

{% for product in collection.products %}
      <div class="grid__item small--one-half medium-up--one-quarter">
        {% include 'product-card', product: product %}
      </div>
JS777
Excursionist
40 0 20

I tried this change on the VENTURE THEME and it did not work. I also tried changing the "one-fifth" to "one-quarter" on the collection-list-item.liquid page as well as the collection.liquid page and it is still displaying 5 products a row. Can you help?

 

https://laface-skin-care.myshopify.com/?_ab=0&_fd=0&_sc=1&key=a2a35434a549b03ad233264794405b77106e71... 

garrenkeith
Excursionist
31 6 15

Hey JS,

It has been over 2 years since I have been on here, and honestly I have forgotten a lot about how Shopify works. It looks like your home page does in fact show 5 products per row. However, if you go to your product page, it appears that the code is working. You may have to change the code for whatever element is added to your home screen if that is what you're talking about. Good luck.