Simple Theme: changing collection pages to 4 or 5 items per row

vanessa_magers
Tourist
7 0 2

hi everyone, I've seen many questions about this topic and tried several code changes but none have worked for this theme.  Can someone please let me know how I can change from 3 to 4 or 5 pics per row, using Simple theme.  Bonus points if you can tell me how to decrease the header height, it's about 1/3 of my page and even when I decrease my logo pic size, there's still a lot of white space. thanks so much.

0 Likes
Darian_West
Shopify Partner
61 0 5

As far as the header height goes, it looks like it's the margin around the logo.  You may try this:

.site-header__logo {
  margin: 10px 0;
}

For the number of pics in a row, you would have to change the number in the query part of the theme to 4 or 5 and then you would have to see if the theme has classes for that grid number.  It's a little trickier than it may first seem.

Freelance Developer - darian@optiqal.com
0 Likes
tim
Shopify Expert
2926 143 1021

Hi Vanessa, 

to change the number of products per row  open your collection-template.liquid  Section , locate this code around line 62:

{% assign grid_item_width = 'medium-up--one-third small--one-half' %}

and replace it with 

{% assign grid_item_width = 'medium-up--one-quarter small--one-half' %}

to have 4 per row, or 

{% assign grid_item_width = 'medium-up--one-fifth small--one-half' %}

to have five, while still keeping 2-per-row for smal screens.

You may wish to change the number of products per page at the top of the file to something other then 12:

{% paginate collection.products by 12 %}

Note that this change does not affect number of featured products on the homepage.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
vanessa_magers
Tourist
7 0 2

Thakns Tim - I had actually done this yesterday, checked the home page to see if it had chnged, but it hadn't.  so thanks for clarifying that!  I have changed the collection pages, is it difficult to change the home page, so that's why you've not mentioned it? thanks again.

0 Likes
vanessa_magers
Tourist
7 0 2

Hi Darian-thanks for your reply. before I mess anything up, I'm changing all this

    width: {{ section.settings.logo_max_width | default: '150' | remove: 'px' | append: 'px'}};


with just this: 

margin: 10px 0;

I don't know coding at all, obvi.

thanks!

0 Likes
Darian_West
Shopify Partner
61 0 5

Yeah don't do that.  You should not have to change the width.  You could just add the line I wrote underneath that line.  

Freelance Developer - darian@optiqal.com
0 Likes
tim
Shopify Expert
2926 143 1021

V,

it is just in the different place -- featured-products.liquid  Section.  The lines to change are:

{% assign products_per_row = 3 %}

and 

<div class="grid__item product medium-up--one-third small--one-half text-center">

You can leave the second one as is (it is for shops without products) but edit the number in the first one and add one of the respective {% assign grid_item_width = 'medium-up--one-quarter small--one-half' %} just below.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
Nedda
New Member
5 0 0

THANK YOU TIM!!!
I spend two days trying to figure this out, driving myself mad not finding any further unconverted "one-third" to "one-quarter" anywhere. I even found {% assign products_per_row = 3 %}, and had changed it 4, yet my homepage products still wouldn't budge from showing 3 products.
I never thought to ADD {% assign grid_item_width = 'medium-up--one-quarter small--one-half' %} under it.

Lifesaver.

0 Likes
Mirit
New Member
1 0 0

Thank You!!!

U made my day

0 Likes