OMG! Thank you so much for the information. I was trying to crop my image to make it smaller until I realized the problem was in the layout. Thanks again and great, short, simple tutorial.
❗2024 UPDATE ❗This tutorial is only for old versions of Dawn! If you have updated since 2021, then you have a setting for the image size and you don't need to change any code. To find the setting, open up your theme customizer, navigate to any product page, and in the sidebar click on the Product Information section. There you will find "Desktop media width: Small, Medium, Large".
Thank you, I was just trying to figure out how to get a smaller product image just yesterday.. Was hett frustrated... Glad I found your tutorial. Huge thanks
Thank you so much for the info. I was cropping my image and had no result, I knew the problem was somewhere else and you gave me the answer. Thanks again!
THANK YOU!!! This is the 7th video I have watched and this is the only one that worked! And Ive been trying to figure out for days now how to disable the zoom and you even have a video on that!!!!!
Thank you so much for this video!! You are amazing!! Is there any way to do this for all the thumbnails as well at once, like in this video? I am brand new to this and don't know what I am doing, but the thumbnails (all product media after the main image) are so huge as well and every explanation I find is how to do them each individually. That will take me a 1000 years! Thank you so much!! 💓
Nice. What happen if we update the theme? I suppose the modifications will be lost. Is there a way to keep modifications ? Like child theme in WordPress for example.
Hi Ed - Great Tutorial - very much appreciated- Quick Question re the product section white space / padding. In Dawn there seems to be a lot of unwanted vertical padding between the price / quantity / add to cart buttons and description etc. Is there a good way to reduce this unwanted white space. Many thanks Neil
i was searching for solution, how can i change the product card aspect ratio, because my products images are 1000 x 1500, i applied the aspect ratio as portrait as per my images but my product images showing cropped. i m using dawn theme.
Hi what about when you click on the image.? mine is massive and its causing my images to pixilate and my images are already good quality and huge. Reduce the size of zoom?
Thank you so much!! If I have 3-4 technical images - like close up, sizes charts, details - is it possible to hide them from Google search? Sometimes I have these photos up in search than the main photo Thank you!
You will need to use the new ability in Shopify 2.0 to edit a file called robots.txt.liquid. You can read a bit about it here - help.shopify.com/en/manual/promoting-marketing/seo/editing-robots-txt I have a tutorial video planned!
I would really appreciate if you could make a video about how we can control the zoom in on mobile phones. when you click on zoom in icon, it goes mega big which is really disturbing...
hi for image banner in dawn theme do you suggest we should use only a landscape format image or can we also use a potrait format image?? bcoz when i used potrait image as banner it looks good in mobile view , but desktop view it looks too big and flattened. or is there a way to reduce size of banner image on desktop (like any settings). hope to see ur reply
Heyyy Ed! great video! it really helps me a lot ! I got a question because I cropped the image on Canva what size of image should I select ? if you could help me out with it it gonna be awesome thank you !
Hi mate, thanks for this video. I'm struggling with my collections page. I want to reduce the size of it but I can't work out how, without it changing the sizes of all the other pictures on the site too, can you help?
Thanks! But how to make the product images smaller while keeping it centered? I don’t need a big size image. So all are left aligned and leave too much white space on the right..
Great video thanks for sharing! Do you have a good solution to reduce the size of the full screen view of the product? By default the image is zoomed beyond its resolution, would be great to not be larger than original resolution.
Hmm, you are talking about the zoom popup right - after clicking the image? If you don't have a larger resolution image then maybe the best solution is to disable the zoom feature entirely? I could do a tutorial for that.
@@EdCodes thank you for your reply. Yes I was talking about the zooming feature. I know that I can disable that feature, however just find the way it works by default, scaling images full screen even if they are low resolution. Compared with other themes where images are zoom up to 100% resolution of the image. Thanks again
@@sorin-voicu hi Sorin, did you find that what did you looked for? i have same trouble with this too big resolution. My product image sizes are in 800x800px while this openup is probably twice time bigger resolution. This makes my product images smudgy. If you found the solution please give me an advice. This helps me a lot. All the best.
to reduce the size of the full screen view of the product - try this section-main-product.css file - keep the height commented. play around with the width value (75, 85 watever you like) /*desktop*/ @media screen and (min-width: 750px) { .product-media-modal__content > * { /*height:75vh;*/ width:75vh; } }
Hey, here is that video for showing the inventory - ruclips.net/video/uycL8dxe2C4/видео.html - it's only for products without variants though. Hope this helps.
Are they different heights on mobile? I'm guessing your image files are not the same dimensions. It's possible to add a max-height in code to kind of standardize them, but it might be easier if you just cropped them to all be the same. I might have a better answer if I could see your store - feel free to email me.
Thanks ED, you just gained a subscriber. This is almost similar to the problem am facing with my refresh theme but my challenge now is 1. Your solution involves coding which I can handle when given the right information. 2. It's actually my "main store page" that has the large photo display, like when you visit my store the first page that loads up appears with photo that literally takes up the whole of a smartphone's screen and that's quite disappointing. Please I'd can you help with such challenge?
Well their width is based on the fact that there are 4 columns - so each one is 25% and your browser window width is the total width. So one way to make each image smaller is to make the page have 5 columns - each one takes 20% width so the images will be smaller. Another way is to keep 4 columns, but each image is smaller inside the column, however I don't think this looks good. I'm curious why you want to make these images smaller? Maybe I will understand if I can see your store.
@@EdCodes thanks for your reply. I only had two products so the product images were both 50% width (which i really didnt like) but now i have more products so the problem is solved. I didn’t know at first it was because of the amount of products i had. Thanks tho
We are currently on the supply theme and did not switch over to Dawn because the images were all over the place with different sizes and some cropped off on the collection list and product page. It was a mess. Supply theme placed all the pictures uniformly. Can the coding used to arrange the images uniformly and in normal size in Supply theme be integrated or recreated in the Dawn theme?
Hi. I tried this, and it did not work. is is possible I am doing something wrong? I have more fields than what you show on your screen as well. @media screen and (min-width: 990px) { .product--large:not(.product--no-media) .product__media-wrapper { max-width: 40%; width: calc(40% - 1rem / 2); } .product--large:not(.product--no-media) .product__info-wrapper { padding-left: 4rem; max-width: 60%; width: calc(60% - 1rem / 2); } .product--medium:not(.product--no-media) .product__media-wrapper, .product--small:not(.product--no-media) .product__info-wrapper { max-width: 50%; width: calc(50% - 1rem / 2); } .product--medium:not(.product--no-media) .product__info-wrapper, .product--small:not(.product--no-media) .product__media-wrapper { max-width: 50%; width: calc(50% - 1rem / 2); }
Hi, you probably have the updated version of Dawn which gives you settings in the theme editor for choosing the width of the image - small, medium, or large. In this case you probably don't need this tutorial? But anyway the CSS you see allows you to set the widths for either of those settings. On the large setting its 60 and 40 and the medium and small are 50/50.
![How to Make Your MOBILE Shopify Store Look Better [QUICK TIPS]](/img/1.gif)
❗2024 UPDATE ❗This tutorial is only for old versions of Dawn! Watch this instead - ruclips.net/video/cbrCuLi8ar4/видео.htmlsi=aTlG7FnHNQa5tVP1
OMG! Thank you so much for the information. I was trying to crop my image to make it smaller until I realized the problem was in the layout. Thanks again and great, short, simple tutorial.
Man you're the best. Every video I look at in your channel is amazing.
❗2024 UPDATE ❗This tutorial is only for old versions of Dawn! If you have updated since 2021, then you have a setting for the image size and you don't need to change any code. To find the setting, open up your theme customizer, navigate to any product page, and in the sidebar click on the Product Information section. There you will find "Desktop media width: Small, Medium, Large".
Thank you, I was just trying to figure out how to get a smaller product image just yesterday.. Was hett frustrated... Glad I found your tutorial.
Huge thanks
This was so helpful! Thank you followed along and I was able to fix in less than five minutes!
Thanks so much for this!!!! That Dawn theme really needs to be tweeked!!
Thank you so much for the info. I was cropping my image and had no result, I knew the problem was somewhere else and you gave me the answer. Thanks again!
THANK YOU!!! This is the 7th video I have watched and this is the only one that worked! And Ive been trying to figure out for days now how to disable the zoom and you even have a video on that!!!!!
Thanks Ed for taking the time to share that, Awesome!!!!
Eduard! This video is so clear and helpful, I was able to follow your steps easily. Thank you so much for solving this and sharing.
Your'e very welcome Natalie, thank you for the positive comment! :)
Second great tutorial i watched from you that worked smoothly. Thank you very much.
Very helpful! Thanks for sharing. I have been struggling with this theme for a while now and this was so helpful
Hello Ed. I would also like to know how to reduce size of image in the "Image and Text" Sections
Great Tutorial. Short, sweet and simple all it needs to be!
Merci ! C’était pile ce dont j’avais besoin 👌
Thank you! i tried to resize my images but they always look so large on the screen. this made such a difference. and it was easy to do.
SOLID advice. Thank you!
How can I adjust the font size of the product title in Dawn Theme? Even though the title size scale sets "100%" with Assistant, it's way too big..
thank you for sharing the info. It does help people that start from scratch.
So much tutorials helpful. Thanks
Ed do you have a video on how to change the font? make it smaller, it is too big on mobile. thank you much in advance.
Hi,
Thanks for this video! However it's not working in my case. Could you please help me?
Again Thank you for sharing a helpful content.
Related: How to DISABLE ZOOM on Dawn Theme - ruclips.net/video/uQEuqLYjaeU/видео.html
ruclips.net/video/uQEuqLYjaeU/видео.html is the correct link
Thank you so much for this video!! You are amazing!! Is there any way to do this for all the thumbnails as well at once, like in this video? I am brand new to this and don't know what I am doing, but the thumbnails (all product media after the main image) are so huge as well and every explanation I find is how to do them each individually. That will take me a 1000 years! Thank you so much!! 💓
Extremely helpful. You are the man! Thank you so very much.
looks great though when I try to edit the code in my theme, the Section-Main-product code does not exist, any ideas? The theme is superstore
Nice. What happen if we update the theme? I suppose the modifications will be lost. Is there a way to keep modifications ? Like child theme in WordPress for example.
Check out this video - ruclips.net/video/B7iDy-6TEzk/видео.html
Hi Ed - Great Tutorial - very much appreciated- Quick Question re the product section white space / padding. In Dawn there seems to be a lot of unwanted vertical padding between the price / quantity / add to cart buttons and description etc. Is there a good way to reduce this unwanted white space. Many thanks Neil
Great help thank you.
Very nicley done thank you
Super clear and helpful! thanks!
thanks man this really helped and your communcation is clear and to the point!
hey thanks for the feedback! That's awesome to hear.
i was searching for solution, how can i change the product card aspect ratio, because my products images are 1000 x 1500, i applied the aspect ratio as portrait as per my images but my product images showing cropped. i m using dawn theme.
Hi what about when you click on the image.? mine is massive and its causing my images to pixilate and my images are already good quality and huge. Reduce the size of zoom?
fantastic tip and explanation, thanks!
You're a bloody legend
very helpful, thank you!
Excellent! thanks so much!!
Awesome advice! Thanks. Might you be able to explain how to resize images on a Shopify Dawn theme homepage?
i have dawn theme, i tried this but didnt work for me ,,, any ideas?, thanks
Thank you so much!!
If I have 3-4 technical images - like close up, sizes charts, details - is it possible to hide them from Google search? Sometimes I have these photos up in search than the main photo
Thank you!
You will need to use the new ability in Shopify 2.0 to edit a file called robots.txt.liquid. You can read a bit about it here - help.shopify.com/en/manual/promoting-marketing/seo/editing-robots-txt
I have a tutorial video planned!
I would really appreciate if you could make a video about how we can control the zoom in on mobile phones.
when you click on zoom in icon, it goes mega big which is really disturbing...
I’m running into an issue where the gallery below the main product photo are too large and then clicking on one of those photos opens them way too big
Thank you for this! Do you know if this is the same process for the theme Focal?
Unfortunately no the code would be quite different. And I haven't used Focal yet :(. You could try asking the theme developers.
Yeah****
hi for image banner in dawn theme do you suggest we should use only a landscape format image or can we also use a potrait format image?? bcoz when i used potrait image as banner it looks good in mobile view , but desktop view it looks too big and flattened. or is there a way to reduce size of banner image on desktop (like any settings). hope to see ur reply
Heyyy Ed! great video! it really helps me a lot ! I got a question because I cropped the image on Canva what size of image should I select ? if you could help me out with it it gonna be awesome thank you !
Hey! Around 2000px width. Here is a full guide to images on Shopify - ruclips.net/video/FmIRKvOuqSc/видео.html
@@EdCodes thank you so much 🙏🙏
Hi mate, thanks for this video. I'm struggling with my collections page. I want to reduce the size of it but I can't work out how, without it changing the sizes of all the other pictures on the site too, can you help?
What about mobile image size?
hey man, is there a way to change only the second thumbnail under the main thumbnail?
Amazing thanks!
Thanks! But how to make the product images smaller while keeping it centered? I don’t need a big size image. So all are left aligned and leave too much white space on the right..
Hey, this tutorial is for older versions of Dawn - on the latest version you have a setting to change the image size - did you try using this?
It didn't work for me. I'm using Dawn. The image looks the same as before.
thanks brother
Hi I can't find the file to edit :(
Great video thanks for sharing! Do you have a good solution to reduce the size of the full screen view of the product?
By default the image is zoomed beyond its resolution, would be great to not be larger than original resolution.
Hmm, you are talking about the zoom popup right - after clicking the image? If you don't have a larger resolution image then maybe the best solution is to disable the zoom feature entirely? I could do a tutorial for that.
@@EdCodes thank you for your reply. Yes I was talking about the zooming feature. I know that I can disable that feature, however just find the way it works by default, scaling images full screen even if they are low resolution. Compared with other themes where images are zoom up to 100% resolution of the image. Thanks again
@@sorin-voicu hi Sorin, did you find that what did you looked for? i have same trouble with this too big resolution. My product image sizes are in 800x800px while this openup is probably twice time bigger resolution. This makes my product images smudgy. If you found the solution please give me an advice. This helps me a lot. All the best.
I’m having the same problem as well
to reduce the size of the full screen view of the product - try this
section-main-product.css file - keep the height commented. play around with the width value (75, 85 watever you like)
/*desktop*/
@media screen and (min-width: 750px) {
.product-media-modal__content > * {
/*height:75vh;*/
width:75vh;
}
}
can you make a video on showing the inventory on product pages for the dawn theme?
Sure can, coming soon!
Hey, here is that video for showing the inventory - ruclips.net/video/uycL8dxe2C4/видео.html - it's only for products without variants though. Hope this helps.
omg you saved me thanks so much! this helped a lot. Do you know how to make all the images same size? on mobile my pictures are all different size
Are they different heights on mobile? I'm guessing your image files are not the same dimensions. It's possible to add a max-height in code to kind of standardize them, but it might be easier if you just cropped them to all be the same. I might have a better answer if I could see your store - feel free to email me.
Thanks so much
Thanks ED, you just gained a subscriber. This is almost similar to the problem am facing with my refresh theme but my challenge now is
1. Your solution involves coding which I can handle when given the right information.
2. It's actually my "main store page" that has the large photo display, like when you visit my store the first page that loads up appears with photo that literally takes up the whole of a smartphone's screen and that's quite disappointing. Please I'd can you help with such challenge?
i’ve done this and now completely lost the image and can’t get it back
Thank you )
Hi ... how can i make full width description in product page in Dawn theme ?
Hi, do you mean below the image and product information? You can just add it as another section, no?
Thanks bro .
Thank youuuuuu!
i have the it's way too small problem :(
so i did exactly what you said and nothing changed. product pictures are still huge.😔
This tutorial is outdated, you don't need to do this if you're on a new version of Dawn. Check out the pinned comment for 2024 instructions.
@@EdCodes ok, thanks. im giving the vid a thumbs up
How can I change the size of the images on the page where it shows all the different products?? (the page from 0:00)
Well their width is based on the fact that there are 4 columns - so each one is 25% and your browser window width is the total width. So one way to make each image smaller is to make the page have 5 columns - each one takes 20% width so the images will be smaller. Another way is to keep 4 columns, but each image is smaller inside the column, however I don't think this looks good. I'm curious why you want to make these images smaller? Maybe I will understand if I can see your store.
@@EdCodes thanks for your reply. I only had two products so the product images were both 50% width (which i really didnt like) but now i have more products so the problem is solved. I didn’t know at first it was because of the amount of products i had. Thanks tho
We are currently on the supply theme and did not switch over to Dawn because the images were all over the place with different sizes and some cropped off on the collection list and product page. It was a mess. Supply theme placed all the pictures uniformly. Can the coding used to arrange the images uniformly and in normal size in Supply theme be integrated or recreated in the Dawn theme?
Helpful; not for me atm, but it could be. I just wanted to leave a comment for you offering your knowledge for free. Thanks
Why does this not work for me, so weird
Weird. I tried this with the Craft 2.0 theme and saw no difference or change.
The latest version actually has settings allowing you to change the image size - you might not need this tutorial. Check the product page settings.
@@EdCodes me too, I am wondering how to do it
🤓👍👍👍 thank you
welcome!
you made me download a google extensions to make your videos fast forward faster than 2x
Hi. I tried this, and it did not work. is is possible I am doing something wrong? I have more fields than what you show on your screen as well.
@media screen and (min-width: 990px) {
.product--large:not(.product--no-media) .product__media-wrapper {
max-width: 40%;
width: calc(40% - 1rem / 2);
}
.product--large:not(.product--no-media) .product__info-wrapper {
padding-left: 4rem;
max-width: 60%;
width: calc(60% - 1rem / 2);
}
.product--medium:not(.product--no-media) .product__media-wrapper,
.product--small:not(.product--no-media) .product__info-wrapper {
max-width: 50%;
width: calc(50% - 1rem / 2);
}
.product--medium:not(.product--no-media) .product__info-wrapper,
.product--small:not(.product--no-media) .product__media-wrapper {
max-width: 50%;
width: calc(50% - 1rem / 2);
}
Hi, you probably have the updated version of Dawn which gives you settings in the theme editor for choosing the width of the image - small, medium, or large. In this case you probably don't need this tutorial? But anyway the CSS you see allows you to set the widths for either of those settings. On the large setting its 60 and 40 and the medium and small are 50/50.
@@EdCodes the only option in settings is to change the collection images, not the images on product page.