Code to remove grey product boxes on collection page. Dawn theme. No product images.

[LukeMeadows]

Hello, how are you?

Question for you...
Is there some code please that I can use to remove the grey boxes that appear for products on collection pages - when the products do not have an image?

None of our products have images. Bit weird I know. (We sell tests for detecting groups of species in the environment.)

So simply want to list out all the products on collection pages - just list them showing only name and the price (no product image). Which Dawn theme does nicely - except that there's a grey box around each product name + price.

I'd like to remove the grey boxes please.

And also tidy up the product name - so the font is a little smaller and cleaner / crisper - if possible.

So demanding! Sorry.

Screenshot attached.

Any ideas?

Thanks in advance.
Luke :  )

[Made4uo-Ribe]

Hi @LukeMeadows 

Would you mind sharing your store URL? Thanks!

[beauxbreaux]

Go to your editor (Customize) and navigate to that section. In the left hand menu (after clicking the section) scroll down to Custom Css and enter this code:

.card__inner {
  background-color: transparent;
  max-height: 150px;
}

You can do this globally in your base.css file to make changes to all your cards. If you do not do it globally it will still show the same gray boxes in other areas of your site. This will only affect the page you mentioned. Alternatively, you could do this same code in every area you find these cards by doing the same exact thing as we did for your main collections page.

[LukeMeadows]

No joy I'm afraid. Do you mean the this section here...

[LukeMeadows]

Oh - that has removed the grey background from 'collection' cards... the cards that are displayed as a button to click on to get to the right collection... but not the product cards that show up as products listed on the collections page.

So the grey boxes in original screenshot are still there.

These ones were removed by the code you suggested.
Feels like we're maybe close to finding the solution?

[LukeMeadows]

No joy here either I'm afraid.

[beauxbreaux]

You must have a different class name for the box for it to not work. The card__inner should be the name used for all your cards. Do you have an updated Dawn theme? If not the URL would be needed so one of us could see what class is being used to style that component. 

When applying it to the product cards it removed the gray there as well with my version:

[LukeMeadows]

All good. I managed to sort it. It's simply a colour choice on the schema!! I knew it was there somewhere. It's in the standard settings.