Images not showing under 'All Products' page in Dawn Theme.

Store Design
, ,

Topic summary

A user encountered an issue where product images weren’t displaying on their ‘All Products’ page in the Dawn theme—only product names and prices appeared, with images showing only after clicking individual items.

Proposed Solutions:

  • One responder suggested the issue stemmed from CSS code causing the first image to remain hidden while showing hover/second images, and provided a CSS fix for the component-card.css file.
  • Another responder identified the actual root cause: a syntax error in the assets/base.css file where an extra closing brace } was accidentally added, breaking the stylesheet.

Resolution:
The issue was resolved by removing the errant closing brace from base.css, as identified in the second solution. The original poster confirmed this fix restored the product images successfully.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Does anyone know how to fix images not showing under ‘All Products’ page? I made a page that just says ‘All Products’ and linked all the products individually, since I didn’t make a collection page. But the issue I’m having is the product images don’t show unless you click on the item. Until then, it’s just a big empty space with only the product name and price underneath.

1 Like
2

Hey @TLPiggy I hope you are doing well.

I can understand the issue that you are facing. This issue maybe ovveride coding that insist the first image to remain not visible while the hover/Second one image show.

To fix this issue could you please share your Store URL and and password [if applicable] so that I take a look and provide you solution code.

Thanks

3

https://thislittlepiggytx.myshopify.com/

Password is 1234

4

Website is https://thislittlepiggytx.myshopify.com/

Password is 1234

5

Thank you for sharing the URL.

I just check the main issue that causing the first image not showing. Just follow these steps to fix the issue.

  1. Go to Shopify Admin.
  2. Click on Online Store.
  3. Select the theme and then click on three dots > Edit code.
  4. In the Edit code search for component-card.css file and paste the following code in the end of the this file.
.card__media .media{
position: static !important;
}

Results:

thescriptflow_0-1743915138345.png
thescriptflow_0-1743915138345.png1165×572 210 KB

6

Nah, it’s not like said above – you’ve accidentally broken you assets/base.css:

Screenshot 2025-04-06 at 2.42.21 PM.png
Screenshot 2025-04-06 at 2.42.21 PM.png741×398 55.7 KB

Highlighted line should not be there. When you remove it, your product card images will return (as a number of other things).

Original file for reference: https://github.com/Shopify/dawn/blob/release/15.2.0/assets/base.css

7

May I know why my solution not work for you? Did you try it?

8

THANK YOU!!! Oh my gosh I can’t believe that caused this whole headache. I truly appreciate your help!

1 Like
9

It was the issue Tim stated, but I appreciate your help and thank you for working with me!