How to create a collection template that alters the products shown per row for one collection only

Highlighted
New Member
2 0 0

Hello!

 

I'm brand new to Shopify/coding. I am trying to create a custom collection template that alters the amount of products shown per row for 1 specific collection I have. So, I have 4 collections; 3 of those I want to have 3 products across, which I know how to change in the theme customization and they are all set. However for the 4th collection I would like it to show 5 products per row instead of 3.

 

I know I need to create a custom collection template that I then apply to this one collection. I know how to add a new blank collection template, however after that, I don't know what code to paste in and what code to change. Do I also need to create/alter any json files?? I have searched all the forums, youtube, etc. etc. and no one seems to have asked/answered this question before.

 

I would appreciate any and all help for solving this problem - I'm sure it is an easy solution, I just have no idea what to do. Thanks in advance!

0 Likes

sounds like you just need to make a collection template and include css to overwrite the default products per row.

 

CSS would look something like this:

<style>
    .grid-item{
        width: 20%;
    }
</style>

replace .grid-item with the class for each product container.

We work on Shopify stores to improve, maintain, and build functionality across all store types.
- Reach Out To Us! | hello@storemedics.com
- Visit Our Site! | https://www.storemedics.com

If we helped, leave a Like / Accept Solution
0 Likes
Highlighted
New Member
2 0 0

My coding-talented brother-in-law was able to help me find a solution. I am pasting what he said he did here, in case anyone else runs into this problem and wants to change the amount of products in rows/columns for a single collection:

 

1. Make a new collection file in Templates (pasting over the original collection-template.liquid code)

2. Add a new collection-template in Sections

3. Make your collection reference the collection-template

4. Copy the current collection-template

5. Edit the schema

 

Look for lines 364 and 393 and change the numbers found there to alter the amount of products found both horizontally and vertically on the page.

 

I hope that helps anyone else who runs into this!

0 Likes