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

0 Likes
suyash1
Shopify Partner
3532 393 573

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

Need training? I can train you to learn shopify.

You are welcome to contact me, my email - suyash.patankar@gmail.com
0 Likes
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

0 Likes
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

0 Likes
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!

0 Likes
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

0 Likes
sndev
Tourist
5 0 1

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

0 Likes
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

0 Likes
made4Uo
Trailblazer
162 11 42

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.
0 Likes

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 section not looking good or cutting off? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets. Examples here.
◦ In need of coding help? I'm available for hire! ezfycode@gmail.com