How to Optimize Product Images for Shopify

Hey guys, In this tutorial, we're going to show you how to optimize product images for Shopify. Let's get into it. I want to thank you for consuming our content. That really means a lot to us. This year we actually turned five years old and that's a big deal for us. So in celebration of our five year anniversary, we are giving away over ten thousand dollars worth of freebies and our swipe file of different ads linking pages and graphics that we've created over the years. The contest is free to enter. we will draw in a name on February 11th. You can find out more information by going to contestbitbrandingco for more information on how your business can benefit from all these great deals. Okay, Now back to your regularly scheduled content. You have really two options here. First, you can go to apps, and you can go to the App Store and you can find some sort of app that will help you resize these images. I believe crush pics is a good one: image optimizer + compression. they do have a free plan. So I would say, if you have a lot of products in your store and you want an easy way to do that, then I would go this route. If not, then I wouldn't add more bulk and code to your store. that's unnecessary. So the second option would be to use something like bulkresizephotoscom. this allows you to just drag & drop images in there, and the good thing about this is that, for example, if I do choose images, I'm going to click on this bone image- I can actually click on file size and I can specify the actual kilobytes that I want this image to be. So typically, when you take pictures with your iPhone or a professional camera, these photos are going to be megabytes. So if you have some external person doing the photography, you can actually ask them to get you images that are less than two hundred kilobytes. That's usually what's recommended. If you have less than that and the images still look really good, then that's even better for you. But typically you want to do less than 200 kilobytes per photo. But you can also, if they don't provide that avatar for a professional services provider, or if you're taking your own product images with your iPhone, or maybe you bought some sort of DSLR camera, then you will have to do something like this. Bulk Resize Photos is free. It's easy. Here you can actually specify the actual file size that you want. Basically hit start and download the picture. I want to upload that picture into your product. So I want to go to products and go to this one, And then in here you see that I have that picture in there. It's already been optimized as far as file size. So that's a number. one thing that you want to do is make sure that your file size is somewhat manageable. You're not into the megabytes, You're into 200 kilobytes or less. Another big thing that you can do here, and I would recommend everyone to do, is add multiple images. Adding multiple images will allow you to have a better user experience, And then you can also add alt text to these images. You can add different alt text images just to kind of get a few more keywords in there as far as SCO. So if we click on this image, we're able to see some information about the image, And then down here, the left bottom corner, we have crop and rotate. You can actually draw. So there's, let's say, like a red circle or something for some reason on this image. you can actually make a little quick fix on that. You can also resize the image, but not in the sense of file size, like we did earlier from Bulk Size Photos. And then the next thing we want to do is right here there's a button or blue text link that says add alt text. In this instance we're going to add 'dog treats' and then we're going to save the alt text. Now if we have multiple images for the partikular product, then for the alt text I can actually, for the next one, do maybe 'canine treats'- If that's a keyword that's relevant to your productus, just to add more keywords to your store and to your photos. After doing that, and if you have variants, you can also assign pictures of two different variants. So right now, if we don't assign a picture, this main image will be the one that gets assigned to all these. If you have different images, you can assign different images to different variants depending on the size options. So let's say you're selling- the first thing that comes to my mind is tins- or you're selling tins of, maybe candy. You have a small one, you have a medium one and you have a large one. All these images you can actually put them and assign them to each of those. That will give again a better user experience. When the customers are adding maybe a medium size of tin for that partikular product, it will actually show that image in there. I think this will be maybe more relevant. if your variants are colors right- Let's say you're selling T-shirts, You have red, blue and yellow- You can actually assign the yellow to the yellow product etc. and that will actually showcase in their cart or in the checkout process, which will provide a better user experience in general. I think that's all we have for today. As far as optimizing some of these images, one of the most important things again is the file size, Just to make sure that these images load fast on everyone's computers when they're loading your website. and then adding alt text to these images again will help with keywords and people who are searching for these things. It would absolutely help you. Obviously, just having multiple images as well per product will help you definitely in the long run, and then especially with the user experience as well. That's all for today. If you like this video, make sure that you hit that like button and also make sure to subscribe to our channel. That will help us tremendously. You can actually hit that bell button if you want to be notified any time that we submit new Shopify tutorials for you guys. If you have any ideas on tutorials or things that you want to learn instead of Shopify, you can drop a comment below to let us know and we'll make that video for you.

Make Product Descriptions Full Width in Shopify - Brooklyn Theme

i'm using the brooklyn theme and we can see here, if you're looking at a product, that this section, the product description, if it's long enough, it actually goes all the way down to the bottom and it doesn't look the greatest because you have all of this white space on the left hand side here. what i'm going to show you is how do you get this product description be at the bottom and have it come across and be at full width. what we'll have to do is go into our theme files, just go into your brooklyn theme files, click on edit code and then in here, where we need to find is, if we go into our sections product template. this is where we need to make our change. you'll see here we actually have our product grid or our grid system. we're just going to instead have our own grid be at the bottom, at the bottom of this. what i'm going to do is i'm going to minimize this. minimize line number 23, minimize nine, number 125. here i'm going to grab this first div and have it come down to the bottom. so really, on line number 254 is where i'm writing this. make sure that i close off that div and then in here is where you have to. i'm going to open up the second one again. so 125.. let's go and grab. if we scroll down to the bottom, let's go and grab the product description. you'll find the product description. write it on line 244 here. grab that, copy it. let's delete it and then put it in your new div that you created just like that, and what we'll want to do is get rid of all these other classes in here. you can keep the text center. that'll be fine. actually, you know what? let's just remove the text center as well. i don't think we'll need to center this text. save it now. if we go back into our product here and do a refresh, there you have it. your product description is now at the bottom and it is full width. hello everyone. if you've enjoyed this video and are interested in learning more, head on over to universateemcom. it's a full-blown course that teaches you how to customize your shopify themes, whether you're a store owner or a developer. we'll show you how to build in navigation menus, how to filter your collection pages, how to customize your cart page and so much more. you'll see. you have a full-blown curriculum shown right here of what lessons are already there. so sign up today to become a shopify theme pro.

More:How To Get Out Of ANY COP Situation!

How To | Resize photos on your Shopify Store

[Music]. hey y'all, it's aj here with fluffy hustle and this is going to be a very quick video. so if you have a shopify store and you do not like the fact that your pictures are all different sizes and things like that, like how this is looking, i have found an application on the shopify app store that will get all of your photos the same size. it's auto resizer, so i'm going to show you how to do it. as per usual: go to your store, click on apps, go to visit the shopify app store. you are going to type in photo resize in the search. you're going to add the application on. install the app, and this is literally my first time doing this. so you guys are going to see this in real time because i'm testing this app out. okay, analyze shop images. so they doing it's doing its thing, okay, so it recommended that. um, i resize 19 images. let me preview what they're toking about. view store preview. okay, and let me scroll down. so, right now that all looks straight, let me go to the catalog and see if all of the pictures in here look the same. they are. this is a little different, though. this is a little different, so let me see what it does. let me go back: resize 19 images. okay, it's pretty fast. okay, well, we gonna see. before we rate um the photos, let's go to the store and i'm gonna refresh it. oh, yes, that fast. yes, everything is the same size now. love that. i don't know if y'all saw the difference. i hope you did, but literally everything is on the same line now, all everything. oh, that is perfect. so, yes, listen, i don't know, maybe i'm just a little boosh, but i do not like when i go onto websites and the pictures, like, are all over the place, different, different sizes and the products are on different lines, like it. just it irks me to no end. so this is a cool little app. y'all. i'm going to be reviewing these apps sporadically just to give you guys, like, some things that you can do to enhance your shopify stores. so, yes, do this, get your life and do this. that is a really cool little app. again, the app is called a photo resize by pixie. so photo resize by pixie, and that was a 100 free, and you saw how quick that was. this is day five of hustle miss. so if you have not watched the other videos, i've literally shown you how to find drop shippers for hair, how to bring products in from aliexpress into your shopify store, how to create banners that look beautiful um like like the one on this store. i'm showing you how you can use canva to make beautiful um banners and things like that, like this. so, yes, um, if you guys are interested, look down below. i have links to um brain fart, sorry, i have. i have links to my free boutique launch guide, links to the vendors list on my store, i have links to setting up your own canva account and also, if you need to start your shopify store, i am a shopify um affiliate and so, yeah, if you want to set up your shopify store, you can get 14 days for free and the link is all below. for all of that, i will catch y'all tomorrow with another video. alright, bye.

More:shopify company

Shopify Images Pixelated? [QUICK FIX] 2022

what's going on everyone? it's Jamie here from Shopify master class, and today we'll be toking about pixelated Shopify images and how you can fix them. so we're gonna go over basically how you can do it here, because if you're looking at a pixel image, it is extremely hard to tell what's going on. your images are extremely important in selling your product, as it's going to show your customers exactly what your product is all about: it's Dimensions, they can see the colors. so you want to make sure that your images are looking okay, and if you have blurry images as well, it's going to make your Shopify Store look unprofessional. you don't want that, especially as your beginner Shopify store and you're building your brand online. you want to make sure that your images are looking clean and crisp. especially if you spend money on product photography, you want to make sure it's coming through correctly. before I dive into it, I just want to thank our sponsor, profit calc, the one click profit calculator app available on the Shopify App Store. it comes with a free 15-day trial and it's going to allow you to skip your spreadsheets. get back to Growing your business with real-time calculations. again, there's a link in the description below to access that free trial, and now I'm going to show a quick video detailing it's full feature set. are you a Shopify business owner who spends hours doing your accounting? have messy spreadsheets kept you from growing your business? discover profit cap, the affordable and easy to set up Shopify app that crunches your numbers in just one click. it automatikally syncs with all your accounts and expenses to calculate your profit, displaying everything in an easy to read dashboard so you understand your business in real time. start for free on the Shopify app store today. alright, so let's dive into how you can fix your pixelated images. and so first, you want to see the dimension of the image, and so we'll go through that in the product page. so I'm just in the product section and I've clicked on a test product here and I've uploaded more of a blurry image, so we can use this as an example. we'll also go through a home page example to give you an idea of how to fix these different images, as a lot of them can show up blurry. and so first things first, let's go to check the size here. so if you click that expand button, it's going to tell you the size of the image in pixels. it's going to be 196 by 307, and if we go to the product page it's not going to look great. it's gonna be a little blurry. this one's not going to force it to expand on this theme- some themes well to fit a specific size, but it's just not going to be a great look here to show off this example product Now by screenshot I took of Sony headphones. and so really the blurriness of an image and how it's pixelated is going to come all the way down to the pixel size. so we just looked at an example pixel there by the width and the height. you want to make sure you're corresponding to this recommended guide here. this comes from tinymagecom and they have a great table showing you the recommended size in width, by height, in pixels for your homepage images, your collection images, your slideshow images, closing Shopify logo, placeholder images. this is a great cheat sheet here. I'll leave a link in the description as well to this website as it makes it really easy to find out what pixel density you need. so, knowing that we would go back to our product image or homepage image, you really want to make sure you're grabbing that original file format. you want to find the largest size possible, because if you don't have the larger size possible. it's gonna be really hard to actually get rid of that pixelation from your images, as it's going to be stretching that image which is causing the problem with pixelation in the first place. so we're gonna find that original, no copy, one that's uncropped, one that's unedited. you should hopefully have that. if you're taking your own product imagery, it should be quite high quality so you can use those there in terms of editing as well. many people will just decrease the pixel size so they can decrease the file size of an image, as images can quite slow down a Shopify website. rather than just decreasing the pixel size, which you can do, it'll just decrease it to the recommended size here for Collection image should be 1024 by 1024 pixels. you should use a service such as Tiny PNG, which is going to compress the image but keep the pixel size, and it's going to decrease the count a little bit. in the back end you can see the original transparent image went from 57 KB all the way down to 15.. it does a great job here and Tiny PNG is completely free. so if you are doing that to decrease the file size, I'd recommend using something such as a tiny PNG instead. let's go through an example here. I'm just going to start with the home page rather than try to find a better product image. it's going to be a little clearer to go step by step. so I'm going to go download this image here and then we can click on it to open it up and from there we want to hit the recommended pixel size to make sure that's going to fit correctly. and if we head back to our cheat sheet here and go to Banner images to recommend it to be 1800 by 1000, so let's get our image to fit within that width and height in pixels. now to Mac. you want to go into tools in the top left then hit adjust size. then from there you can edit the width and the height. I'm going to put 1800 here and it's going to give me 1800 by 1200, as that's going to keep the dimensions fixed, so it's not going to warp the image in any way. now if you want to hit that Dimension exactly, we can drag over here and just kind of like play around with the dimensions of this image to kind of hit that 1800 by 1000. if you can see in the right of where I'm dragging, I am just dragging this up to 1000.. now it doesn't have to be exact, so that one's a thousand and one, so I'd say that's close enough. here you want to hit this crop button and that's going to crop our home page image. I'm going to hit save there to save this on my computer now. I did mention tiny PNG, so let's run through that as an example as well, so we can see this goes from 229 KP to 110 KB, which is a nice 52 file size reduction. gonna hit save again, so it's gonna be saved on my desktop. now if I head over to my Shopify store, go to online store on the left. here it's going to open up the theme section of the website that customize. go into my image with text overlay or overlay. this is going to be the banner here. click on it so I can edit it. I'm going to go to change, change image and I'm going to upload my own image here. hit upload and then, just like that, the home page has now been changed and so we've optimized this image to fit the 1800 by 1000 size and we've scaled down. it is so much easier to scale down than scale up. this will help correct the pixelation on your images of your Shopify store. now, if you're caught in a bind here and you cannot actually get a larger image and go back, there are ways to upscale your image here. this is a service called smart enhance, which allows you to fix compression issues. you just have to create an account, uploaded your pixel image, then hit start processing. you can see it fixes it from this to this. it's going to clean things up a little bit. this always isn't perfect, which is why I didn't go over it at the start, but it can be something to help if your product images are blurry to begin with. so I'll leave a link to this in the description as well. so this concludes the video on how to fix pixelated images. it's going to all start with your image size: binding pixels. make sure you're hitting those correct Dimensions, or at least very close to, to decrease the chances that your images are pixely and blurry, which is going to create an overall better shopping experience. if you enjoyed this video, I would love it so much if you hit that like And subscribe button below. if you have any questions, leave a comment. and lastly, I want

Best Shopify Product Image Resize Apps 2022

[Music]. what's going on everyone? it's jamie here from shopify masterclass, and today we're going to take a look at the best product image resize apps for shopify in 2022.. this full list comes from our blog, ecommerce educated, and there's going to be a link in the description to access it below. now, in today's video, we're not going to go into every app in this list. rather, we're going to look at the top two here, but we'll go into detail covering a description, the ui, the pricing and the reviews for each. before i get into it, i just want to quickly thank our sponsor, profitcalc. it's going to be a link in the description to access a 15 day free trial [Applause]. so so why would you need a product resize app? mainly, you need this if you need to resize images in bulk. shopify has a built-in image editor, but if you're trying to add a hundred images, a thousand images, five thousand images, it's going to take a lot of time to manually edit it. thankfully, there are apps in the app store which make it really easy to do in just a few clicks. now, our blog post here has the key features you need to see for the different apps, such as pricing and feature lists, but in today's video, we selected the top two. we will go into each of them in detail. so the first app we're going to take a look at is bulk image edit, and it easily allows you to resize your images, as well as a few other things such as compress them, add watermarks, rename the images and add alt text, which is important for seo. so the key benefits of this app is that it does improve seo and you can improve performance on your store by compressing images, which is also good for seo. if you don't know what seo means, it means search engine optimization. essentially, it means as well that it's going to be easier for google to rank it, and if it's good for seo, it means your page will rank higher, which means you might get more organic traffic. it also allows you to comply with social media by making it easy to square, resize and crop images to fit any social media channel. you can also add watermarks to protect your images from copycats. in terms of the ui, you get a dashboard in which you can do the tasks listed above, such as renaming, resizing, framing and adding alt text. here is a layout of what the steps will look like. there's also quite a few options to do these tasks here and overall it seems a clean ui for the app, making it easy to use. in terms of pricing, there is a free plan for 50 image edits per month, those all the way up to 50 a month, where you get 10 000 monthly edits plus 880 day backup. in terms of rating, this app has a 4.8 rating with over 1800 five-star reviews, which is a lot. the second app we'll take a look at here today is tiny image seo and image optimizer, and the benefits, just like the previous app, focus around seo- giving your shopify store better rankings in google- and so, as a sub feature for this app, there is an image resize option, as well as many other options to fix the seo of your website and increase your site speed. there's one thing to note that's very important about image resize is that essentially resizing it to a smaller size that doesn't impact the image quality is going to decrease the size of the image, which then makes it faster for the website to load, which is not only beneficial for the customer, as they don't have to wait as long to see your products. it's going to be good for seo, as google likes fast websites. if we scroll through here, we can see the ui in terms of compressing images, improving loading times. here's a cool feature where you can control the scripts on your shopify store. so these are things that other apps will install in terms of the code, and so you can easily edit those from here. it makes it easy to add different image changes as well. in terms of pricing, there's a free to install plan. it goes all the way up to twenty dollars a month, where you get three thousand free images per month, as well as all the featured listed above. in terms of rating, it has a 4.9 star rating with 868 5 star reviews overall. this concludes the video on the best product image resize apps for shopify in 2022. i hope you enjoyed this video and, if you did, i would love if you hit that like and subscribe button below, as it really helps the channel out. i also want to say that there's a link in the description to access a 15-day free trial for our sponsor, profitcalc, which lets you do profit calculations in just one click. thank you so much for watching and i'll see you in our next video. [Music].

Shopify Narrative Theme Product page Image Size too Large | Problem Solved

hello and welcome to this video. in this video we will solve the issue related to narrative theme. so if you are using narrative theme, this is a very nice and popular theme in shopify and also free to use. but one issue in it could be showed is that your product image in your product pages is too large and if you want to decrease the size, you won't find any option in the theme editor. so how we can decrease the size of this product image to less or something smaller, if you wish. so in this video i will show that and if there's something interesting, keep watching the video and if that helps, smash the like button and subscribe to the channel and also let me know in the comment as well. so to do the task, or to small the image size of your product images, you will need a piece of code. so where you will find the code, i will leave the a blog link in the description. just go to this that link and just scroll down. you will find here that add these codes in themecss file. so what you need to do, just copy those from top to bottom. okay, just click on copy. then go to your online store and then click on themes and after themes, as you can see, there is a narrative theme i have already installed. okay, so click on action, click on edit code. so after clicking on the edit code, what you will see? that? okay. so now what we need to do is just to find the themecss file. so to find the themecss file you need to go to the assets folder and then click on team dot scss. the teamcss and theme dot scss means same, so in that case it could be dot css or dot scss. click on it and then scroll down to the bottom of this page and then click on enter and then press those codes that i have provided from this link. okay, then click on save. okay, then click on save and then i will explain what this code means. okay, then now you can see this how the product image looks right now. so i will just refresh it and straight away you can see it becomes a small, how it becomes small from this piece of code. so here you will find two code. one is this, one which call max with hundred pixel, and a bottom one called max with 320 pixel. this is for all devices, and this one which has max with 767 is only for mobile. okay, so in that case, if i wish to make it large for desktop version, i will make it 400 pixel. any below that you want to give it. okay, then i will now again refresh it. you will see that it become. it will become larger, okay, so it becomes large once again. so now you can see it is looking good, but in mobile you could want to give it a separate value. okay, you could. you want to give it a separate value, like, if you want to give it 100 pixel in muba in desktop, i have 400 pieces in desktop you could want to could give it a 200 pixel in mobile, because in in desktop larger pixel could look better, but in mobile it could not. be so to only change for the mobile version, you should change those values, the underneath values of these. okay, so in that case it is 400 pixel in desktop and 320 pixel in mobile. so if i want to reduce it to a 250, i could just easily do that. okay, so these values is just as you wish. you can change those as you wish. so then click on save again and refresh once again. so you will see that dextro has not changed anything, but in mobile it will be 250 pixels. so you can see it is now much less than what we see before. okay, so this how you can do that and also you can see that we have effect in that logo size for the mobile as well. so i have a two separate video for that- how to control the logo size of narrative theme for desktop and mobile for both version. you can find those video in my channel as well and i'll leave those in the card. so this how we can control the product size of the images of a narrative theme. so i hope that helps. if that helps, please smash the like button and subscribe to the channel. let me know in the comment. thank you very much for watching the video.