Simple Theme - How to increase columns on collections

Solved
khowe
Excursionist
14 0 6

How do I increase the number of columns on product collections? There are currently three columns of products shown. I would like to try four or five. Thank you!

Accepted Solutions (2)

Accepted Solutions
dmwwebartisan
Shopify Partner
9731 2224 3053

This is an accepted solution.

@khowe 

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.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

dmwwebartisan
Shopify Partner
9731 2224 3053

This is an accepted solution.

@khowe 

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.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

Replies 4 (4)
dmwwebartisan
Shopify Partner
9731 2224 3053

This is an accepted solution.

@khowe 

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.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

khowe
Excursionist
14 0 6

@dmwwebartisan Fantastic!! It worked. Thank you so much for making it so clear! How would I do this for featured collections?

dmwwebartisan
Shopify Partner
9731 2224 3053

This is an accepted solution.

@khowe 

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.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

khowe
Excursionist
14 0 6

@dmwwebartisan Thank you so much! It worked beautifully.