Trade theme - how to have the first 6 items show in 1 row of a collection list, rest on "View All"

[VV21]

Hi

Some of my collection lists have more than 6 items, which is the maximum number of columns. So if there are 12 items, the collection is showing all 12 in 2 rows.

Is there a way to limit all the collection lists to 1 row only? The customer can see the remaining rows when they click "View All".

I would like this to apply to all collection lists.

Thanks in advance !

[dhaval_chavda1]

 1. Edit the Section Code

Go to your Shopify Admin:
Online Store > Themes > Actions > Edit Code

Look for the file:
sections/featured-collection.liquid
or something like collection-list.liquid, depending on where the collections appear.

Find this line inside the loop:

{% for product in collection.products %}

Change it to:

{% for product in collection.products limit: 6 %}

This will cap the visible products to 6 items, even if the collection has more.

 2. Add a "View All" Button

Right below the loop (after the grid or list), you can add:

<a href="{{ collection.url }}" class="btn">View All</a>

🔧 The button class might differ depending on Trade’s styling system. Try class="button" or class="btn btn--secondary" to match Trade’s theme.
 3. Optional CSS Method (If You Don’t Want to Edit Liquid)

If you'd rather not touch Liquid code, you can just hide extra products using CSS:

1. Go to Assets > base.css, theme.css, or custom.css

2. Add this code at the bottom:

.collection-list .grid__item:nth-child(n+7) {
  display: none;
}

This hides everything after the 6th product in the collection.

if you need any help feel free to ask

[VV21]

Thank you for your response! I used the CSS Method and it worked in terms of hiding everything after the 6th product. But the View All button under each collection then shows every collection - not just the remaining items of that specific collection. 

What I mean is that I have a homewares product store with hundreds of products. I have added 2 x Meta Fields called "Room" and "Material" so that customers can search for products related either to a room, eg. Kitchen, Bathroom, Living. Or by the material it is made from, eg plastic.

I have created collection lists for each Room and each Material, and these are what I wanted to display in single rows of 6 columns. 

However the View All button shows all the lists, instead of just the remaining Rooms or remaining Materials. 

Hope that makes sense. 

If there is a better or easier way for me to achieve this result with minimal coding, please let me know.

Thanks again !

[VV21]

Hi, can you please help me get this working? Thanks so much