Product Page Image Issue

Store Design

Topic summary

A store owner reports that the first product image on all product pages is displaying at an incorrect (smaller) size, while subsequent images appear normal. The issue occurred without any theme modifications, and re-uploading images did not resolve it.

Proposed Solutions:

Two community members provided similar CSS fixes:

  1. Navigate to Admin → Online Store → Themes → Edit Code
  2. Locate the base.css (or main.css/style.css) file under Assets
  3. Add CSS code at the bottom of the file:
    .productView-image-container img:not(.zoomImg).fit-unset {
    width: 500px;
    height: 500px !important;
}
  4. Save and reload the page

Current Status:

The original poster attempted the first solution but reported the main image still displays at a small size. The issue remains unresolved, with a second, more detailed solution provided that includes !important flags in the CSS, which may override conflicting styles.

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

I haven’t done any changes to theme. Today I checked my product page first image is out of dimension other images of product are fine only 1st image of all product showing small in size. I tired to reupload image but still same results.

Website : click here

Screenshot:

Screenshot 2024-06-28 213220.png
Screenshot 2024-06-28 213220.png1912×871 87.3 KB

1 Like
2

Hi @Testing120

check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
.productView-image.fit-unset .productView-img-container img:not(.zoomImg) {
    width: 500px;
    height: 500px;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

pasted code in base.css but still main image is showing small size other images are fine only first image of all products having issue

4

Hi @Testing120 ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

BSSCommerceB2B_0-1719599810858.png
BSSCommerceB2B_0-1719599810858.png400×195 26.3 KB

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

.productView-image.fit-unset .productView-img-container img:not(.zoomImg) {
    width: 500px !important; 
    height: 500px !important; 
}

Step 3: Save your code and reload this page.

=>> The result:

BSSCommerceB2B_1-1719600380061.png
BSSCommerceB2B_1-1719600380061.png1789×986 189 KB

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

1 Like