DAWN theme - Image resize on product page

Solved
Superhaq
Excursionist
29 1 14

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 42 (42)
Raghav_shopi
Tourist
7 0 5

I don't think DAWN gives that option of changing it to a carousel format. 

In fact, not much can be changed in the product description itself on the front end. 

Please have a look and opine

Cheers

Raghav_shopi
Tourist
7 0 5

@HamishDavisonIC 

 

Did you figure out a way to change the grid layout to a Carousel layout?

j1419
Explorer
49 2 17

@HamishDavisonIC 

I didn't see the option to make the product images a carousel on the front end. If it's possible to make the desktop version have an image slider like it does on mobile that would be great.

The only thing I have seen online is this guide but they don't explain where to place the code:

https://barstool.engineering/product-image-slider-for-shopify-dawn-theme/

Reducing the image sizes helps but an image carousel looks much cleaner than scrolling down the page

HamishDavisonIC
Shopify Partner
56 6 54

@j1419 I also found this guide -  here is his github with where to place the code, you have to make your own asset called product-gallery.js

https://gist.github.com/josephbona/b300b9e81e3bc53e27493555ae6795c1

But it doesn't work properly, and to be honest it has a perfect grid layout on mobile anyway so don't worry too much about desktop (if you follow his guide with his github i think it stops the gallery working on mobile anyway)

 

j1419
Explorer
49 2 17

@HamishDavisonIC Is there a way to make the product images on desktop a carousel/slideshow? This grid layout is large and requires you to continue scrolling to see all the images.

Current Desktop Grid ViewCurrent Desktop Grid View

A slideshow for the images looks better. Example below

image.png

artifulboutique
Excursionist
37 0 9

OUHHH! Merci! Thank you so much! I was editing my images one by one. My god... 

sculptbythesea
New Member
1 0 1

How about changing the size of the product images on the main collection page?

KetanKumar
Shopify Partner
32352 3253 10806

@sculptbythesea 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Raghav_shopi
Tourist
7 0 5

Hi @made4Uo ,

Thank you for the great help!.

I was able to change the image to one large image with smaller images of variants below it.

However, it doesn;t show the carousel /arrows and i am unable to scroll to the 5th image onwards.

made4Uo
Shopify Partner
1348 201 307

The carousel arrows get disables if your variants is less than 5. Make sure you did not hide_variants as well. It might hide your images 

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
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
Shopify Partner
1348 201 307

@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. 

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
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
Shopify Partner
1348 201 307

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

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
HamishDavisonIC
Shopify Partner
56 6 54

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
Shopify Partner
1348 201 307

@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

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
mstav2u
Excursionist
21 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