Reduce collection images from 4 to 3 across on desktop

Highlighted
New Member
6 0 0

Hi everyone!

 

At present when viewing on a desktop I have 4 products per row on a collection page. Is there a way just having 3 across?

I've seen other sites doing it but can't find an option in the theme settings.

 

Page example:

https://www.wastedheroes-shop.com/collections/t-shirts

 

Thanks,

 

Russell

 

0 Likes
Highlighted
Shopify Partner
297 56 71

Hello @Russell_Reid,  which shopify theme you are using...? 

0 Likes
Highlighted
Shopify Partner
685 101 215

Because you are using a paid theme I can't check it's the same, but most themes have the ability to do this via the customiser. Have a look at this post where I just talked someone through same thing https://community.shopify.com/c/Technical-Q-A/Collection-lists-on-Minimal-theme-change-from-4-to-5-i...

 

Does District not have this?

If helpful then please Like and Accept Solution
0 Likes
Highlighted
Globetrotter
627 60 68

@Russell_Reid wrote:

Hi everyone!

 

At present when viewing on a desktop I have 4 products per row on a collection page. Is there a way just having 3 across?

I've seen other sites doing it but can't find an option in the theme settings.

 

Page example:

https://www.wastedheroes-shop.com/collections/t-shirts

 

Thanks,

 

Russell

 


open your page in customizr and check if it has option, otherwise we will need to do it via css

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Highlighted
New Member
6 0 0

I'm using district and doesn't seem to be an option on there unfortunately

0 Likes
Highlighted
New Member
6 0 0

It looks like it might have to be CSS

 

0 Likes
Highlighted
New Member
6 0 0

It doesn't seem to be an option. The collection page is 3 across but then the products within that are a standard 4. This is the bit I would like to change. Thanks for looking into it!

 

Screenshot 2020-04-05 at 18.53.20.png

0 Likes
Highlighted
Shopify Partner
685 101 215
Take a look at this https://community.shopify.com/c/Shopify-Design/How-do-I-change-the-number-of-products-displayed-per-...

Shows you how to do it for that theme.
If helpful then please Like and Accept Solution
0 Likes
Highlighted
Globetrotter
627 60 68

@Russell_Reid wrote:

It looks like it might have to be CSS

 


add this css to the end of your theme.scss file

 

.collection .products-grid .product{width: 33%;}

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes