DAWN theme - Image resize on product page

Solved
Superhaq
Excursionist
29 1 13

Hi, I have just switched to the dawn theme, however the images on the product pages are absolutely huge. Is there any way to resize them? Thanks

Replies 39 (39)
trkk
Tourist
11 0 3

I just tried this and it didn't work for me. Do you change both of the 64s?

Solandra
New Member
2 0 0

Does this change the image sizing for all product photos then?

I'm having the issue where the photo gets cropped in the viewing box until you roll over it... then you can see the full image. I'm having this issue in the "Products" photos and the "Categories" photos.

 

made4Uo
Navigator
210 11 77

@Solandra 

Hi, 

Check this video for tutorial on how to adjust the images in the product page, including the product description. Since you are resizing the images, product description need to be adjusted as well. 

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
Natalie_Z
Tourist
3 0 1

It worked! Thank you for this - you put the information forth so clearly and made it easy to understand!!

My product images are all a good size, except when I click to enlarge the photo - it becomes very big - is there a way to control the zoomed in size? 

Many thanks, 

Natalie 

made4Uo
Navigator
210 11 77

Hi @Natalie_Z  Dawn is having this src-set which images are being called depending on the screen size. If you want to adjust it. You have to adjust the src-set

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
HamishDavisonIC
Explorer
52 6 40

Well done!

funkydropshippi
Tourist
7 0 0

Thanks income stream surfers!

stujmiller
New Member
1 0 0

Hi @made4Uo , how can we hide the thumbnail selector if there's only one image for the product? At the moment it displays a thumbnail of the active image even if there's only one which doesn't look great. Thanks in advance - great tutorial!

 

stujmiller_0-1637754582170.png

 

made4Uo
Navigator
210 11 77

@stujmiller  you can add an if statement to the slide-image. Find the active-thumb code in the main-product.liquid (there's two, do the code to both), then add {% if product.media.size > 1  %} active-thumb {% endif %} 

 

Code should look like below

<img class="slide-image {% if forloop.first %} {% if product.media.size > 1 %} active-thumb {% endif %} {% endif %}"

 

Let me know

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
mstav2u
Excursionist
16 0 1

Okay since I'm not a computer wiz, can a person just go to the section-main and change the size and that will take care of the entire store, or does a person have to go to the inspect on each product page and do something first?  What about an image on the front page of the store, if they want it smaller?  Will going to the section-main and then change the size in there take care of all pictures?  Just trying to figure this out as the pics are to big and slowing my store down.  Thanks in advance for helping me because I'm not quite understanding everything on the video.  It went to the inspect on the page and then it went to the section-main, so I'm not sure if a person needs to do both to make it work.  

Marilyn