Products per row in collection incorrect

Shopify Discussion

Topic summary

A user encountered an issue where their Shopify store (using the Venue theme) displayed only 3 products per row in collection pages despite theme settings configured for 4 products per row.

Root Cause:
The setting was working correctly on desktop but defaulting to 3 products on tablet view and in the theme customizer.

Solution Provided:
A custom CSS code snippet was shared to force 4 products per row on tablet devices:

  • Navigate to Customize > Theme settings > Custom CSS
  • Add media query targeting .collection__cards .o-layout__item with width: 25%

Outcome:
The CSS fix successfully resolved the display issue. The discussion is now closed with the problem solved.

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

Hi,

I have the venue theme and my store is planb-apparel.com. In the theme setting I have set to show 4 products per row for all collections pages. Unfortunately it shows only 3 products per row no matter what I try. I cannot figure out what is the problem! Any help will be appreciated.

Thanks,
Zlati

planb-2
planb-2612×1220 66.1 KB

planb
planb2436×1310 282 KB

2

Hi @zlati84,

I checked and it shows 4 products for desktop, only 3 when you view it on tablet or in customize.
If you still want it to show 4 on tablet, please go to Customize > Theme settings > Custom CSS and add code:

@media (min-width: 47.9375em) {
    .collection__cards  .o-layout__item {
        width: 25% !important;
    }
}
3

thanks that worked like a charm :slight_smile:

1 Like
4

Hi @zlati84,

It’s my pleasure :blush: