Why are my Dawn Theme product images not loading?

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.

@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

Hover Effect

Like This

1 Like