Venue Theme - Show Products in a Collection as a List Instead of Grid

Store Design
1

I have a large number of products in various collections some without images and I would like to be able to display the products in those collections as a list rather than a grid. I have seen this in other themes but I am unable to do it in the purchased Venue theme. Any advice appreciated.

2

@Graft - can you please share this page link? it will need CSS

3

This is an example…

https://safety-monitors.myshopify.com/collections/control-panels this is not fully published so login password to site is drigeu

4

@Graft - you have images in this collection, if we make any change then every collection will be changed, check by adding this css

@media screen and (min-width:750px){
.collection-products .o-layout__item{width: 100%;}
.collection-products .o-layout__item .product-card__img{height: 30%;width: 30%; margin: 0 auto;}

}
5

Where would you want me to drop this code on the main header?

6

@Graft - please add to the very end of - theme-critical.css

7

This kind of works but add a lot of blank space and I would like the images smaller and to the left of the description kind of like in this theme

Screenshot 2022-02-02 at 15.49.11.png
Screenshot 2022-02-02 at 15.49.11.png780×613 51.6 KB

8

@Graft - add this and check, if this does not work as per your choice then you can remove everything

@media screen and (min-width:750px){
.collection-products .product-card__media {display: none;}
.collection-products .product-card{display: flex;    flex-wrap: wrap;}
.collection-products a.product-link {width: 75%;}
.collection-products .product-card-top{width: 25%; align-items: center;
    justify-content: center;   display: flex;}
}
9

Hi @suyash1 - I’m looking to do the same thing (list view for products in a collection instead of grid view) but am hoping to apply it only to specific collections. Is there a way to do that? I was hoping someone could assist in creating a new collection template that I could just assign to each collection in Shopify. Thanks in advance!

10

@joshjacobsen - good morning, can you please share your collection page link?

11

Hi @suyash1 - yes, it’s https://raevino.com/collections/all.

We would actually make a duplicate of the above collection and apply it accordingly. Given that we only want to assign this to a specific collection (and not all of ours), would the best approach be to duplicate and modify our collection template so that we can assign it at the collection level in Shopify? Thanks!

12

@joshjacobsen - yes separate template can be created, can you please send link of the collection where you want the list?

13

Hi @suyash1 The collection isn’t yet published, can you send a collaborator request to https://rae-vino.myshopify.com/

I will email you to discuss details. Thanks!

14

Hi @joshjacobsen ,

Would like to help if your request still pending.