How to enable product list view on Dawn theme for B2B shop?

[karinorage]

Hi,

I am looking into upgrading a webshop to 2.0. The current theme is Debut, but I want to use the  Dawn theme. However I noticed there is only a product grid view on a collection page, no list view.

As it is for a b2b shop, the use of a list view is preferred.

Does anybody know a solution?

Thanks,

Karin

[Litos]

Hi @karinorage,

Are you looking to display something like this?

[karinorage]

hi Litos,

No, I am looking for a list view, like this

And frankly, what I am really looking for is this:

 but if someone can point me to a list view instead of a grid view in the Dawn theme, that would be great.

Regards,

Karin

[Litos]

Hi @karinorage,

I can only help you to display according to the first option, for the second it is a complicated requirement so you need to hire an expert for it.

Go to Assets > base.css and paste this at the bottom of the file:

#main-collection-product-grid .grid__item {
  width: 100% !important;
  max-width: 100% !important;
}
#main-collection-product-grid .full-unstyled-link {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}
#main-collection-product-grid .card--product {
    width: 15%;
}
#main-collection-product-grid .card-information {
    width: 85% !important;
    margin-top: 0 !important;
}
#main-collection-product-grid .card-information__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Hope it helps!

[karinorage]

hi Litos,

Thanks for your input, unfortunately this doesn't work in the Dawn theme.

regards,

Karin

[Litos]

Hi @karinorage,

Please send your site and if your site is password protected, please send me the password. I will check it.

[karinorage]

Hi Litos,

This is it: https://kunstverkennen.myshopify.com

the collectionspage: https://kunstverkennen.myshopify.com/collections/all 

Password: Wacht@

Current theme is Dawn

Thanks for looking into is.

Regards

[Litos · Accepted solution]

Hi @karinorage,

Go to Assets > base.css and paste this at the bottom of the file:

.collection .grid__item {
  width: 100% !important;
  max-width: 100% !important;
}
.collection .card {
    justify-content: space-between !important;
    align-items: center !important;
    gap: 2rem;
    flex-direction: initial !important;
}
.collection .card__inner {
    width: 15%;
}
.collection .card__content {
    width: 85% !important;
}
.collection .card__information {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.collection .card__heading {
    width: 50%;
}
.collection .card-information {
    width: 50%;
	text-align: right;
}

Hope it helps!

[karinorage]

Hi Litos,

That sure did the trick!
Thank you so much!

[CT52]

Does your "Featured Products" section show up as a "Featured Collections" section by default? I also want to add a product section to my home page, but it's only letting me add a collection section.

[karinorage]

Yes, "Featured Collections" is a section that shows up by default on the homepage. I am not sure what exactly your question is about. Are you using the Dawn theme?
In the Dawn theme you can both add a "Featured collection" (and in the right column select the collection you want to be featured) and a "Featured Product".

See screencaptures.

[daviddhzn]

you have answer for dawn theme? I added solution but didnt work

[lwoody]

Hey Karin,

Did you manage to work out how to display products in a list with the price and [Add to Cart] button?  I've just started with Shopify but am about to give up as I can't do this one simple thing!

[karinorage]

Hi,

Unfortunately it isn't possible in the Dawn theme without the help of a specialist developer. 
You might want to try this App https://apps.shopify.com/single-page-order-form they offer an 8 day free trial