Image quality deteriorating on product page

Technical Q&A
, , ,

Topic summary

A Shopify store owner reports that product images appear high-quality on collection pages and homepage, but become noticeably blurred on individual product pages when viewed on desktop. Mobile devices are unaffected. The issue persists across different file formats (SVG, PNG, JPEG) and sizes.

Attempted Solution:
One community member suggested the problem stems from insufficient display space causing image compression. They recommended:

  • Navigating to theme.css (line 11942)
  • Removing grid: var(--product-grid); to allocate 50% width for product media

This solution increased image size but did not improve quality, and the changes were reverted.

Current Status:
The issue remains unresolved. Two helpers have offered to examine the store directly:

  • One requesting a 4-digit collaboration code via private message
  • Another asking for the complete code from the main-product.liquid file to provide specific guidance

The problem appears theme-specific and may require direct access to diagnose properly.

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

Having issues with product image quality worsening when a customer clicks into a product on my site https://ghosthunt.co/.

Product cards on all menus look great. High quality, clear images. Once a user clicks into the product page, the quality of the PNG drops dramatically. From there, the user can click on the product image to zoom in (which opens an even larger image of the product) and the product quality is once again enhanced. This also only seems to happy on desktop, mobile users don’t experience this issue.

for example, image quality on the home page here looks great: https://ghosthunt.co/
Once you click in to the product, it blurs: Paranormal Investigation Vintage Tee – Ghost Hunt

I’ve tried SVG, PNG, and JPEG files. It doesn’t matter the size of the image, the page automatically lowers quality regardless of file size or aspect ratio. I would love some help!

1 Like
3

Hey @studaines,
Thanks for bringing your query to Shopify commuity. I would be more than happy to help you with the resolution of the product media.
I just check ad found the main issue. No doubt product media images are high quality itself. But Due to less space on the desktop cause the issue of shrink media.
It means the media don’t have enough space to show in it’s original. And when we zoom in then it has come in it’s original state and looks HD.
So the solution is to make the product media width 50%. Please follow the below steps to ensure product media show in high Quality.
Go to Shopify Admin >> Online Store > Themes >> Edit Code >> theme.css.
In the theme.css file go to line number 11942 and find this coding
grid: var(--product-grid);
When you found it you just need to remove it.
After that you will get this result:

image
image1918×881 88 KB

You will notice that the product images show in High Quality.
If this was helpful please like it and let me know if you need more assistance.
thanks

4

Hey there, this did not work. It made the images large, but the quality did not improve even after ensuring the image quality was high.
Restored instance back to before this edit was made.

5

I am sorry that it doesn’t help.
But if you could share the 4 digits collab code in the p/m then I can take a look in your store and fix the issue with the image Quality.
Because every theme has it’s own structure.

6

Hi @studaines,

I have checked and the image shows fine, however, if you want to change it, please go to Actions > Edit code > Sections > main-product.liquid file and send me the whole code. I will check and guide you