Enlarge main Product image on Product page

Store Design
, , , ,

Topic summary

A user seeks help enlarging the main product image and reducing thumbnail sizes on their Shopify store using the Dawn theme, as they lack coding expertise.

Initial Solution Provided:

  • Custom CSS code offered to modify product image container width and thumbnail dimensions
  • Code targets media queries for screens wider than 990px

Issues Encountered:

  1. Stretched Images: Main photo appears horizontally distorted with unnatural aspect ratio after applying first CSS solution
  2. Thumbnail Layout: User wants thumbnails in a single row instead of two rows
  3. Image Cropping: Updated code causes top and bottom portions of original photos to be cut off

Iterative Fixes:

  • Developer provides revised CSS code to address stretching issue
  • Additional CSS snippet offered to resolve cropping problem using padding adjustments

Current Status:
The discussion remains ongoing as the user works through implementation challenges. Multiple code revisions have been provided, with the latest attempting to display full photos without cropping using padding modifications to the .product-media-container class.

Note: Some code snippets in the conversation appear reversed/encoded, suggesting potential formatting issues in the original thread.

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

Hi, I have been trying to enlarge the main product image size on the product page and decrease the size of the thumbnails below but to no avail. I am not good with codes. I am using Dawn theme. Anyone can help to take a look? Please help me out, thank you.

questxun.com

password: bewhew

LeoQX_1-1713002023115.png
LeoQX_1-1713002023115.png1056×806 275 KB

LeoQX_0-1713001889245.png
LeoQX_0-1713001889245.png1069×697 291 KB

2 
@media screen and (min-width:990px){
    .product .product-media-container.constrain-height.media-fit-contain {
        --contained-width: calc(var(--constrained-height)* var(--aspect-ratio));
        width: min(var(--contained-width), 100%);
        min-width: 100%;
    }
    .product .product-media-container.constrain-height {
        --viewport-offset: 100% !important;
        --constrained-min-height: 100% !important;
    }
    .product .media>img {
        object-fit: fill !important;
    }
}
@media screen and (min-width:768px){
    .product--medium .thumbnail-list {
        max-width: 60%;
    }   
}

Add this Css in your base.css File

3

Hi, thanks for helping out.

  1. The main photo looks too stretched horizontally now, it’s like the aspect ratio changed? The photo does not look natural now. Priority is for the photo to look natural over being enlarged to the maximum. Is there anyway to let the main photo look more natural instead of overstretched horizontally?

  2. Can I get the thumbnails to be a single line? Instead of 2 lines.

LeoQX_0-1713007422094.png
LeoQX_0-1713007422094.png1156×466 188 KB

4

Replace My Old code With This New Code

@media screen and (min-width:990px){
    .product .product-media-container.constrain-height.media-fit-contain {
        --contained-width: calc(var(--constrained-height)* var(--aspect-ratio));
        width: min(var(--contained-width), 100%);
        min-width: 100%;
    }
    .product .product-media-container.constrain-height {
        --viewport-offset: 100% !important;
        --constrained-min-height: 100% !important;
    }
    .product--medium .thumbnail-list {
        grid-template-columns: repeat(10, 1fr) !important;
    }   
}
@media screen and (min-width:768px){
    .product--medium .thumbnail-list {
        max-width: 100%;
    }   
}
5

Hi, the top and bottom part of the original photos are cut off now. Can we have the full photo displayed?

full photo:

LeoQX_0-1713013661965.png
LeoQX_0-1713013661965.png1689×669 162 KB

photo displayed now:

LeoQX_1-1713013683677.png
LeoQX_1-1713013683677.png1019×391 144 KB

6

Add Extra Css In Your base.css File

.product .product-media-container.constrain-height .media {
    padding-top: 130% !important;
}