Metafield image blurry on the product page - Dawn Theme

Store Design
,

Topic summary

A user added a metafield image below product details on their Dawn theme product page, but the image appears blurry and improperly sized.

Initial Solutions Proposed:

  • One suggestion involved adding CSS to base.css to adjust image width properties
  • Another recommended switching from the “Image with text” section to the “Collage” section, removing all blocks except the image block for better visual alignment

Follow-up Issues:

  • After implementing the Collage section, the image displays with an unwanted background color (despite the uploaded image having no background)
  • The image size remains too large and doesn’t align properly with the product images

Current Fix:
Background color resolved by adding custom CSS to the Collage section settings:

.collage-card { background: none; }

Remaining Challenge:
Matching the metafield image width to product images cannot be achieved through simple CSS due to section limitations. A complete theme modification would be required to fully resolve the sizing and alignment issue.

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

Hi, Hope you are doing well.

I can added an metafield image below the product in product page. But the image is coming blurry. Please help with the same. Thanks in advance.

https://aikyforyou.com/

IndujaAIKY_0-1679623912236.png
IndujaAIKY_0-1679623912236.png1159×532 102 KB

2

@IndujaAIKY

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom
.image-with-text__media-item.image-with-text__media-item--large.image-with-text__media-item--top.grid__item {
    width: 100%;
    max-width: 50%;
}
3

You’re using wrong section for this.

You should remove “Image with text” section because it is designed to have image and text side-by-side.

I recommend to use a “Collage” section instead – remove all section blocks other than “Image”, empty the section heading and this will look much better. Plus width of the image will match the width of the Product information section (currently it does not).

4

Hi..

Thanks a lot..i had used the collage and it looks good but there is a background color shown in the image. but i had uploaded one without background. and also the size is really big..i want it to fit exactly in line with the product images..is there a way.

IndujaAIKY_0-1679655611259.png
IndujaAIKY_0-1679655611259.png1226×570 176 KB

5

Background can be easily fixed by entering this into ‘Custom CSS’ at the bottom of the section settings:

.collage-card {
  background: none;
}

Unfortunately, matching widths can’t be done this way due to limitations of this tool. It will require theme modification.

If you feel that image is too big, you may try adding this code – it will limit it’s width and second line will center the image.

.collage-card {
  max-width: 60rem;
  margin: 0 auto;
}