Collection theme as 2 rows on prestige theme

Shopify Discussion

Topic summary

Goal: show collection items in two columns on mobile for the Prestige theme (default options are single-column stack or horizontal scroll).

What was tried/solution:

  • A Custom CSS override was suggested for the Collection list section to make two items per row on small screens (media query at max-width: 768px). Key change: setting each .collection-card’s flex-basis to 50% minus gap via calc().
  • After initially not seeing changes, the OP switched the section layout to “stacked,” and the CSS took effect. Two-per-row now works.

Follow-up (open):

  • OP asked how to make collection images square instead of rectangular. Awaiting guidance; needs store URL/context.

Related request/resolution:

  • Another user wanted two products visible on mobile in the “featured collections” slider while keeping swipe. They shared their URL and screenshot; later confirmed it’s fixed (they solved it via ChatGPT).

Notes:

  • The CSS media query and flex-basis tweak are central to the fix. Screenshots were shared but are not essential to understand the solution.

Status:

  • Two-per-row on mobile: resolved for OP.
  • Square image aspect ratio: unresolved pending details.
Summarized with AI on December 23. AI used: gpt-5.
1

I am trying to add a collection list to my store and have it showing as two rows on mobile. I use prestige theme but the only options are for it to be stacked with 1 collection per row or for it to be scrollable collection.

Is it possible to have collections showing in 2 rows on prestige theme for mobile

If anyone can help it would be greatly appreciated.

Thanks,

George

2

Hey @wattsga , Yes this is possible and requires some knowledge about HTML and CSS. Please let me know if you’re comfortable doing this then I’ll share ht code. Please share the store URL. So, I can look further into your request.

Regards,
Osama Farooqi

3

Hi Osama,

Thanks for getting back to me. I am ok at adjusting the shopify code with instruction but that is as far as my capabilities go really. my url is www.stashyscrunchie.com

Please note if you are in the UK or Aus it will redirect you to the local sites and it is only the US site I need help with so you may need to put on a US VPN.

Thanks,

George

4

Hi @wattsga
Try adding below code to Customize >> Collection list section >> Custom CSS

@media screen and (max-width:768px){
.collection-list .collection-card {
    flex-basis: var(--collection-list-item-size, calc(100% / 2 - var(--collection-list-gap, 0px) * (2 - 1) / 2));
}
}

JasmeetVT14313_0-1711458471423.png
JasmeetVT14313_0-1711458471423.png3698Ă—1635 388 KB

Please hit LIke and mark as solution if it helps

1 Like
5

Hi,

I have added the code and saved but nothing seems to have happened

Collection list code.JPG
Collection list code.JPG1920Ă—953 140 KB

6

Apologies I have now stacked them and it appears to work.

Is there any way to make the collections appear as a square image rather than rectangular?

7

Hi @wattsga
Glad it worked!
Please hit LIke and mark as solution as it has helped.

Regarding making the collections appear as a square image rather than rectangular please provide URL so that I can guide you accordingly.

1 Like
8

Hello, I have the same problem but with the “featured collections” section. I want there to be two products seen on mobile and I still want to be able to slide. Could you provide the CSS please? Thanks Linus

9

Hi @LQ10

Please share the store URL and screenshot of the section so that I can guide you

10

hello,

https://1fb439-5.myshopify.com/

Bildschirmfoto 2024-07-31 um 10.16.07.png
Bildschirmfoto 2024-07-31 um 10.16.07.png762Ă—1296 109 KB

11

@LQ10
I believe this has already been fixed

JasmeetVT14313_0-1722417662308.png
JasmeetVT14313_0-1722417662308.png842Ă—1564 154 KB

Let me know for any concerns

12

Yes ChatGPT just figured it out for me. Thanks anyway