Why are my Dawn Theme product images not loading?

Store Design
,

Topic summary

A user encountered an issue where product images on collection pages stopped loading in the Dawn theme.

Multiple community members provided a CSS solution to fix the problem by adding specific code to the base.css file:

.card .media { position: relative !important; }
.media img { position: relative !important; }
.card-wrapper:hover .media.media--hover-effect > img + img {
  position: absolute !important;
  top: 0;
  left: 0;
}

The CSS should be added at the bottom of the base.css file via: Online Store > Themes > Edit Code > Assets > base.css.liquid

After applying the fix, images began loading again. However, a secondary issue emerged where images aren’t filling the grid properly as they do in the Dawn theme demo. This spacing/sizing problem remains unresolved and is the current focus of the discussion.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

I can’t figure out why the product images on my collection pages are no longer loading. Can anyone help out? Thanks! Here’s the link: https://evil-bikes-2-0-dev.myshopify.com/collections/gear?page=1

Password: aoflao

2

@incorpmedia - please add this css to the very end of your base.css file and check

.card .media{position: relative !important;}
.card__media .media img {position: relative !important;}

suyash1_0-1674271851282.png
suyash1_0-1674271851282.png1366×768 168 KB

1 Like
3

@incorpmedia

Hello,

.card .media {
	position: relative !important;
}
.media img {
	position: relative !important;
}
.card-wrapper:hover .media.media--hover-effect > img + img {
	position: absolute !important;
	top: 0;
	left: 0;
}

Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

Like this

oscprofessional_0-1674281446540.png
oscprofessional_0-1674281446540.png1295×764 137 KB

Hover Effect

oscprofessional_1-1674281486011.png
oscprofessional_1-1674281486011.png1330×596 181 KB

Like This

1 Like
4

Thanks!

5

Thanks! Now I need to figure out why the image is not filling up the grid like it should. Here’s what it should look like as the Dawn theme demo: https://themes.shopify.com/themes/dawn/styles/default/preview?price%5B%5D=free&surface_inter_position=1&surface_intra_position=1&surface_type=all

6

Thank you