Dawn theme default product image card to large

Store Design
1

I’m using the Dawn theme and when viewing the default product page the product card is too big for my liking. I can’t find a setting to change, and changing the image size only distorts the image. I have read several posts about modifying the code, but I am unable to find the proper code to modify.

www.astatemusic.com

pw: shista

2

Hi @firemt04

If you want to change the size of your main product image in the Dawn theme, please follow those steps:

1, Go to Themes > Edit code > Assets > Open section-main-product.css > Search for “product__media-wrapper” to find the settings for the product image width.

make main product smaller.png
make main product smaller.png1670×908 80.2 KB

  1. Reduce the percentages in this section in order to reduce your product image size.
    For example, if you want to reduce it from 65% to 50% to split the image and content evenly, it will be like this.
@media screen and (min-width: 990px) {
.product:not(.product–no-media) .product__media-wrapper {
max-width: 50%;
width: calc(50% – 1rem / 2);

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any questions!

3

Thank you for the help. Changing the values as described did not fix the issue I was having, however changing the values in lines 58 and 59 did fix my problem.

1 Like
4

Thanks for your response! Great to hear good news from you :slightly_smiling_face:

5

worked for me! can you also help with how to reduce the featured product image size on a product page?

I have the main product, which the image reduced lovely form your help. But i have a handful of featured products underneath the main product. How can i reduce the size of these images?

Many thanks