Increase Subcollections per row in Pipeline theme

Store Design
1

I’m updating my theme to Pipeline 8.1. I have the ability to make up to 6 subcollections visible on the collections page, but after 4 they break onto a second row. How do I modify the code to display all 6 on the same row? I understand that I’ll need to make some style changes accordingly.

Screenshot 2025-11-17 at 2.47.03 PM
Screenshot 2025-11-17 at 2.47.03 PM2078×700 108 KB

2

Hi @kate_zmc I’m @PaulNewton shopify partner and theme customizer
Reach out to me for services to have this customized.
:speaking_head: :postbox: Click profile-pic on forums for options to connect.

Though think through the UI/UX first.
Your trying to cram more into less while using LOOOONG-COLLECTION-TITLES.
So either font sizes will need to change to, or the heights will change to allow line wrapping.

3

You may try this code in “Subcollections” section “Custom CSS” setting.
It will force your sub-collections to be on the same line, but yes, as Paul mentioned, long collection titles would not fit and will wrap into multiple lines themselves…

You may though play with “Section width” under “Section spacing” to compensate…

.subcollections__inner { display: flex; }
p { line-height:1; } /* for wrapped titles */

Screenshot 2025-11-18 at 2.22.57 PM
Screenshot 2025-11-18 at 2.22.57 PM1759×476 157 KB

4

Hi @kate_zmc ,
You can show all 6 subcollections in a single row, but Pipeline limits them to 4 per row by default. To force all 6 onto one row, you’ll need to update the CSS grid styles in the subcollections section.

How to fix it

  1. Go to Online Store → Themes → Edit code
  2. Open the file:
    sections/subcollections.liquid*
    (or in Pipeline: snippets/subcollections-grid.liquid depending on your version)*
  3. Look for the grid wrapper — usually something like:
<div class="subcollections-grid">
  1. Add this CSS in Assets → theme.css (or custom CSS):
.subcollections-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 20px; /* adjust spacing as needed */
}

@media screen and (max-width: 768px) {
  .subcollections-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
6

@oscprofessional Thanks so much for this! It seems that steps 4 and 5 are missing here?

Really appreciate your help.

7

Thanks so much @tim_1 ! This was really helpful.

8

@kate_zmc you can mark that post as the solution for reference and future merchants

9

Pipeline 8.1 is set up so the subcollections grid only shows 4 items in one row.
So even if you add 6 subcollections, the theme code tells the grid:

“Only make 4 columns. Anything extra goes to the next row.”

You just need to change one small piece of CSS.

Step 1: Go to Online Store → Themes → Edit Code → Assets → theme.css (or component-collection.css)

Step 2: Look for the grid styling. It usually looks something like this:

.subcollections-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

Step 3: Change “4” to “6”

.subcollections-grid {
grid-template-columns: repeat(6, 1fr);
}

Hope this helps simplify everything! If you want, I can look at your exact theme code and tell you the exact line to update. Just let me know! :blush: