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

Store Design
,

Topic summary

A user is trying to limit collection lists to display only 6 items in a single row on their homepage, with remaining items accessible via a “View All” button.

Initial Problem:

  • Collections with more than 6 items display in multiple rows (e.g., 12 items show as 2 rows of 6)
  • User wants all collection lists limited to 1 row maximum

Solutions Proposed:

  1. Liquid code method: Modify featured-collection.liquid or collection-list.liquid by adding limit: 6 to the product loop, then add a “View All” button linking to the full collection
  2. CSS method: Hide items after the 6th using .collection-list .grid__item:nth-child(n+7) { display: none; }

Current Issue:
The CSS method successfully hides extra products, but the “View All” button shows all collections (Rooms and Materials) instead of just the remaining items from the specific collection being viewed.

Context:
The store uses metafields to organize products by “Room” (Kitchen, Bathroom, Living) and “Material” (plastic, etc.), with separate collection lists for each category.

Status: Awaiting further assistance to properly link the “View All” button to individual collections.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

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 !

2
  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:

View All

:wrench: 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

3

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 !

4

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