Troubleshoot number of product columns displayed on Collection Page

Store Design
, , ,

Topic summary

A user is experiencing a layout issue where their collection page displays 2 product columns instead of the configured 3 columns on desktop, and 1 column instead of 2 on mobile.

Root Cause Identified:

  • Another user diagnosed the problem as stemming from custom code that was added to the theme
  • Screenshots were shared showing the problematic code location

Proposed Solution:

  • Remove the custom code causing the conflict
  • Adjust column and row gaps through: Online Store > Themes > Customize > Theme settings > Layout

Current Status:

  • The original poster deleted the code but encountered a new issue: the fix also affected homepage spacing
  • They need a solution that applies the column settings to all pages except the homepage
  • The issue remains unresolved and awaits further guidance
Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I need help in fixing the number of product columns displayed on my collection page. I changed the setting to 3 columns but somehow it registers as 2 columns only. For mobile I wanted it 2 columns but it appears as 1 column only.

Any tips on how to fix this problem?

Screen Shot 2024-04-08 at 2.57.00 PM.png
Screen Shot 2024-04-08 at 2.57.00 PM.png1540×1186 118 KB

www.constructionlayers.com
PW: CollectionThree

2

Hi @clayinfo

This customized code you added somewhere caused the issue; please remove it to solve the problem with your collection page.

Screenshot 2024-04-08 at 14.13.40.png
Screenshot 2024-04-08 at 14.13.40.png1522×1004 294 KB

After that, you can change the column gap, and row gap from your Online Store > Themes > Customize > Theme settings > Layout

Screenshot 2024-04-08 at 14.16.39.png
Screenshot 2024-04-08 at 14.16.39.png1132×912 99.6 KB

3

I deleted the code already but it also affects my home page spacing. I would like for it to be applied on all pages except the home page