Increase number of columns in mobile collection/product list

Store Design
, , ,

Topic summary

A user wants to display 3 products per row on mobile instead of the default 1 product layout in their Shopify store’s collection page.

Solutions Provided:

  • First approach: Add custom CSS code to the theme.liquid file (before the closing tag) to enable a 2-product-per-row layout on mobile. The contributor noted that 3 products per row doesn’t look good on mobile screens.

  • Second approach: Navigate to Online Store → Themes → Edit Code → Assets → styles.css (around line 6390). Modify the existing CSS media query by changing width: 100% !important; to width: 50% !important; for .collection-listing .product-list .product-block elements on screens under 767px width.

Follow-up:
The original poster successfully implemented the solution and asked about adjusting font sizes for product titles and vendor names to accommodate the new layout. An updated code snippet was offered in response.

Status: The issue appears resolved with the 2-column mobile layout implemented.

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

Hi there,

I’d like to display 3 products next to each other on the mobile version of my webshop.
Right now, only 1 is displayed. I’m not too sure which code to add/change in order for me to fix this.

Link to store: https://utrecht-winkel.nl/

Example pic:

WVU_0-1726734381047.png
WVU_0-1726734381047.png353×1185 150 KB

Thanks a lot! :slightly_smiling_face:

Kind regards,

Teun

2

Hey @WVU

Displaying 3 products in one row on mobile wasn’t looking good so if you wanna display 2 then,

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1726734881202.png
Moeed_0-1726734881202.png300×569 99.8 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hello @WVU

Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> styles.css —>line number 6390
search this code.

@media (max-width: 767px) {
.collection-listing .product-list .product-block {
width: 100% !important;
}
}

and replace with this code.

@media (max-width: 767px) {
.collection-listing .product-list .product-block {
width: 50% !important;
}
}

result

7.png
7.png369×602 77.2 KB

If this was helpful, hit the like button and accept the solution.
Thanks

4

Thanks a lot Moeed, this is awesome!

One more question; which code should I adjust to smaller the font size of product title and product vendor a bit?

1 Like
5

Hey @WVU

Remove the previous code and try this updated code.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed