Solved

How to make product image bigger on product page? I am using Dawn

CharlesCheng
New Member
4 0 0

Does anyone knows how to make product image bigger on product page? 

From this WhatsApp Image 2024-03-11 at 8.59.51 PM.jpeg

to this 螢幕截圖 2024-03-11 下午8.53.24.jpg

I find someone asked before but I can't find theme.css from assets.

My theme is Dawn and I don't know it is the problem or not.

 

Thank you for your help.

Accepted Solution (1)

tim
Shopify Expert
3315 247 1195

This is an accepted solution.

For narrow images theme restricts image width so that image does not grow too big and too tall.

This IMHO makes sense because otherwise thumbnails and product title may end up being below fold and you'd need to scroll to see them.

 

On the taller device you will see bigger image.

 

If you look into assets/section-main-product.css there is a code like this:

.product-media-container.constrain-height {
  /* arbitrary offset value based on average theme spacing and header height */
  --viewport-offset: 400px;
  --constrained-min-height: 300px;
  --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));
  margin-right: auto;
  margin-left: auto;
}

.product-media-container.constrain-height.media-fit-contain {
  --contained-width: calc(var(--constrained-height) * var(--aspect-ratio));
  width: min(var(--contained-width), 100%);
}

 

You may try reducing the viewport-offset value to make your images bigger.

 

Another option is to select "Fill" for your "Media Fit" setting of "Product information" section. The image will cover entire width of the screen (with some  padding) but will be slightly cropped vertically if it's too tall.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.

View solution in original post

Replies 2 (2)

tim
Shopify Expert
3315 247 1195

This is an accepted solution.

For narrow images theme restricts image width so that image does not grow too big and too tall.

This IMHO makes sense because otherwise thumbnails and product title may end up being below fold and you'd need to scroll to see them.

 

On the taller device you will see bigger image.

 

If you look into assets/section-main-product.css there is a code like this:

.product-media-container.constrain-height {
  /* arbitrary offset value based on average theme spacing and header height */
  --viewport-offset: 400px;
  --constrained-min-height: 300px;
  --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));
  margin-right: auto;
  margin-left: auto;
}

.product-media-container.constrain-height.media-fit-contain {
  --contained-width: calc(var(--constrained-height) * var(--aspect-ratio));
  width: min(var(--contained-width), 100%);
}

 

You may try reducing the viewport-offset value to make your images bigger.

 

Another option is to select "Fill" for your "Media Fit" setting of "Product information" section. The image will cover entire width of the screen (with some  padding) but will be slightly cropped vertically if it's too tall.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
CharlesCheng
New Member
4 0 0

Thank You!