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

Solved

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

karinorage
Shopify Partner
17 0 3

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

Accepted Solution (1)
Litos
Globetrotter
688 169 146

This is an 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!

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.

View solution in original post

Replies 13 (13)

Litos
Globetrotter
688 169 146

Hi @karinorage,

Are you looking to display something like this?

Screenshot.png

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
karinorage
Shopify Partner
17 0 3

hi Litos,

 

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

Schermafbeelding 2022-10-19 114827.png

 

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

Schermafbeelding 2022-10-19 115637.png

 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
Globetrotter
688 169 146

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!

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
karinorage
Shopify Partner
17 0 3

hi Litos,

 

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

regards,

Karin

Litos
Globetrotter
688 169 146

Hi @karinorage,

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

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
karinorage
Shopify Partner
17 0 3

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
Globetrotter
688 169 146

This is an 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!

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
karinorage
Shopify Partner
17 0 3

Hi Litos,

That sure did the trick!
Thank you so much!

CT52
Visitor
1 0 0

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
Shopify Partner
17 0 3

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.

Schermafbeelding 2023-02-08-112052.png

 

Schermafbeelding-2023-02-08-111918.png

daviddhzn
Visitor
2 0 0

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

lwoody
Visitor
1 0 0

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
Shopify Partner
17 0 3

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