DAWN THEME : product image is way to big

Solved
Hai_Nguyen2
Excursionist
25 0 5

hello,

just installed the dawn theme but the product image is super big.

wondering if anyone has any solution to this problem?

a couple of members here has asked this question before but received no answer.

would you share your solution if you have one with us?

thanks

hai

Accepted Solution (1)

Accepted Solutions
diego_ezfy
Shopify Partner
2299 413 539

This is an accepted solution.

@Hai_Nguyen2,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>
@media (min-width: 749px){
    .product.grid{
    justify-content: center !important;
}
.product:not(.product--no-media):not(.featured-product) .product__media-wrapper{
    max-width: 300px !important;
}

}


</style>


You can change the width, 300px, to any width you wish. The height will be calculated automatically. 

Kind regards,
Diego

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

Replies 19 (19)
suyash1
Shopify Partner
3700 407 609

@Hai_Nguyen2 - can you please share your product page link, where it as big image? using css we can reduce the image size. 

You are welcome to contact me, my email - suyash.patankar@gmail.com ,My timezone is GMT+5:30
Hai_Nguyen2
Excursionist
25 0 5

hi suyash,

thanks for taking the time in helping me out on this.

here's my product link that has the product image being way to big.

https://culturalheritagebooks.com/products/fritz-kahn-infographics-pioneer-english-italian-and-spani...

i tried to edited the file in the featured-product-liquid page under section but couldnt find how it work.

thanks

hai

Hai_Nguyen2
Excursionist
25 0 5

let me try asking this question another way.

does anyone know where is the file folder for the feature-product-image would be located in the dawn theme so that I can adjust the size of the image in the product page?

any help would be appreciated.

thanks

sndev
Tourist
5 0 1

Seems like it was answered here: https://community.shopify.com/c/shopify-design/dawn-theme-large-image-on-pdp/m-p/1267709

I could not get it to work though. Please let me know if you have any success!

Hai_Nguyen2
Excursionist
25 0 5

sndev-

yeah, i took a look at the solution that the shopify partner  described but it seem that that file is for VIDEO and not Images.

it's the wrong file.

the direction is correct but the image is in another file.

This blog post that marcoswatanabe posted in his reply has the correct answer to our problem but the writer didn't mention where on earth the file folder that the image would be located.

if he could have pointed that out. it would have been a life saver.

here the blog post that I am referring too.

https://www.shopify.com.ph/partners/blog/img-url-filter

sndev
Tourist
5 0 1

We ended up having to add custom css to resize everything. Such a pain

Hai_Nguyen2
Excursionist
25 0 5

That is a pain. Dawn 2.0 is really good but shopify still need to improve a bit more on it. these are low hanging fruit as well. They arent anything difficult and many user use this setting a lot as well. if you dont mind me asking, can you give me an example of your shop so that I can see if it worth it for me to get a developer to do the same? thanks hai

made4Uo
Navigator
210 11 77

You can edit the images and the product info sizes easily. Just a few edits here. 

 

 

  1. Go to your Online store > Themes > Actions > Edit code
  2. Go to Asset folder and open the section-main-product.css file. 
  3. Find the code below
 @media screen and (min-width: 990px) {
.product:not(.product--no-media):not(.featured-product) .product__media-wrapper {
max-width: 64%;
width: calc(64% - 1rem / 2);
}

 

    4. Change the max-width to 50%

    5. Next, find the other code for the product info, see below

  .product:not(.product--no-media):not(.featured-product) .product__info-wrapper {
padding-left: 4rem;
max-width: 36%;
width: calc(36% - 1rem / 2);
}

    6. Change the padding to 5rem, max-width to 50%, then click SAVE

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
diego_ezfy
Shopify Partner
2299 413 539

This is an accepted solution.

@Hai_Nguyen2,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>
@media (min-width: 749px){
    .product.grid{
    justify-content: center !important;
}
.product:not(.product--no-media):not(.featured-product) .product__media-wrapper{
    max-width: 300px !important;
}

}


</style>


You can change the width, 300px, to any width you wish. The height will be calculated automatically. 

Kind regards,
Diego

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post