Creating a collection list that shows three products in a line in mobile view

Store Design
, ,
1

I am trying to create a page so that when viewed in Mobile the viewer will see three products. So I have created a collection list with three products but in mobile view it shows 2 1/2 products not three. My other thought was to try and code so that if I used the collection page showing all products I would see three columns but all attempts on this front have failed. Anyone have any ideas how to solve this. We are preparing to launch an app and that is why this is important. I am restricted as to what app builder to use as we cannot use Google or Apple as our store sells vapes. TIA.

Mobile image .jpg
Mobile image .jpg1836Ă—4080 1.39 MB

2

Hey @B1kerdel ,

on your store customization, create a new collection template and disable the scroll on mobile option, then assign the template to the desired collection and you should be good to go!

If you are getting stuck and need further assistance let me know and I would love to help.

Sincerely,
Lior from Studio Enchant

3

I played around witj some code and this has worked

@media only screen and (max-width: 767px) {
.collection-list__item.grid__item { width: 1% !important; }
.full-unstyled-link{ font-size: 10px !important;}

I don’t understand it but I have 5 products showing in Mobile view per collection list and I am a happy bunny.
}

4

Hi @B1kerdel ,

Please follow these steps:

  • Step 1: Disable Carousel layout on mobile.

Screenshot.png
Screenshot.png860Ă—1416 55.9 KB

  • Step 2: Please go to Actions > Edit code > Assets > section-collection-list.css file and paste this at the bottom of the file:
@media screen and (max-width: 749px) {
    .section-collection-list .collection-list:not(.slider) .grid__item {
        width: calc(33.33% - var(--grid-mobile-horizontal-spacing)* 2 / 3);
        max-width: calc(33.33% - var(--grid-mobile-horizontal-spacing)* 2 / 3);
    }
}
5

Hello @B1kerdel ,

I hope you are doing well. As per your requirement, you want to show three products in one row on the collection page. As you didn’t share the product URL, in that case I can suggest you use my Shopify Dawn theme as an example.
You can solve this issue by adding custom CSS under the assets folder, open base.css or component-card.css or any main CSS file used in your theme. Here is the following CSS:

@media screen and (max-width: 767px) {
  .collection .grid {
    display: flex;
    flex-wrap: wrap;
  }
  .collection .grid__item {
    width: 33.33% !important;
    flex: 0 0 33.33% !important;
    padding: 5px; /* Adjust spacing between products */
    box-sizing: border-box;
  }
}
.collection .grid__item .card {
  padding: 10px;
}

Thank you.

6

Will have a look and give it a go. Thanks.

7

This will work. However on reflection it would be good to 4 products in a line in mobile.

8

I am having problem with the app. I have installed it and created a collection and set column items in desktop to 5 but only 4 are showing. What am I doing wrong.

9

I am using your app in a test site at the moment before I do the work on our main site. Hope this makes sense. I do not understand why the icons for the products are so large and why for are showing when it should be 5.

2025-04-22.png
2025-04-22.png1920Ă—1080 449 KB

10

Thanks for the heads up, I wasn’t aware about the tablet view issue. How do I show the product description below the icon.

TIA. Derek

11

I have installed colection 2# but I cannot see any way of configuring it like the page in the demo link that you sent me.

12

Sorry installed wrong section

13

I have installed collection list 4 and this is perfect for what we want. is there a way to slightly reduce the font for product description