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
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
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
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));
}
}
Please hit LIke and mark as solution if it helps
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?
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.
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
Hi @LQ10
Please share the store URL and screenshot of the section so that I can guide you
Yes ChatGPT just figured it out for me. Thanks anyway
