This tutorial will help you build a collection template that you can use to identify small product photos in your Shopify store.
Code for Section
Transcript
Hey, Scott Austin here from Jade Puma. And in this video, I'm going to share with you a tool that I had a lot of my client's stores for checking photos, your quality of product photos and the size of product photos. So I started this with my client SBP electrical out of Australia, and they had a lot of product photos from their manufacturers. They had gotten over years and the size of the photos wasn't that good, right there, very small sizes, like a hundred pixels by a hundred pixels or 300 pixels by 300 pixels. So they wanted a way to easily see the size of their images. Right? So I came up with this tool that I've added to a bunch of stores since then. And it's a pretty simple one, but I'll show you how it works and then give you the code.
You need to implement this in your store. So the first thing is, you know, I have a link right here to review photo sizes, cause you don't want to have this exposed in your navigation. You know, a, a testing page. This is a testing page that I built it to collection. And this admin function only shows up when people are logged into the Shopify stores, a consumer who is tagged admin. So only I and store staff can see these links here, but I click on the review photo sizes and it's going to take me to a collection. So you can see up here that this is a collection and I called it photos pretty intuitive. And right now it's got a setting set. So it's going to show photos that are 750 pixels or smaller, right? So what it does is it list out every single product and any photos that that product has, that is less than the threshold that is sent.
And if the threshold, and if the photo is less than the threshold, we actually show the image size here. So here we can see the first product has one image that is smaller than the 750 pixel threshold. And you can see here, you know, you go through, but then here's a product that all the product photos exceed that threshold. I still show the product, but you can see that, Hey, none of the photos that are in that one are below that threshold. And on any one of these elements here, if we click on it, it's going to take us into the Shopify admin straight to that product. So then we can, you know, put in a better photo size in there, or whatever you want to do is you can straight to that product. And then see here, I've got the threshold set to 750. I can adjust that threshold. So this collection template is set up as a section with one setting. So here I am, I'm going to go into customize theme to the photos collection. I already opened it up and I have under product photos here. One setting show photos smaller than so you can see here, I can take that down. Let's see if we can find any photos less than 400 pixels. So if I save that, go back to my front end, refresh that page, the collection page.
Now it says the threshold 400 pixels as I scroll through, I got one photo here. It's 400 by 400. Here's another one, three 39 by three 39. So, you know, they started out with a really small threshold setting on this and got, you know, all their really small photos down, better quality ones, higher pixel ones. And now we're working up the scale. And then another way you can use this tool. If you want to see all your photos, you can just take this threshold up to 2000. And I actually should've set that setting higher cause you know, the Maxim, most photos that I put in is 2048, but this way you could look at all of your photos, what that saved, go back here. And then, you know, not only are you looking at the photo sizes, but this would give you an opportunity to just quickly go through your products and see all the photos you're showing and see if any of them are just poor quality or have a background, do you want to adjust?
And that kind of thing. So it's a way to, you know, in one screen see all your photos and I say one screen, but this, this template also page eights, like most collections do, right? Because Shopify doesn't want you showing all of your products of one single page. It wants you to limit that to like 50 products. And that's what I've got set to right now. It shows 50 products per page. And then when you get down to the bottom of that, it just has you page an eight or paginates however you pronounce that one to the next one. So let's show you how this is built to start. You need to create a collection to use this on, right? So I create a collection, a different collection than I than what I'm using on the site. Cause you're not apply a different template to it.
So I created a question called photos and I just said, product price is greater than a, a penny. So basically it's all, all products are in there. And then I assign it, the template collection.photos, and that's all you have to do on the, on the creating the collection side, have a dynamic rule that basically puts all your products in there and then assign the rights a template to it. But before you do that, you've got to create that template. So here I am, I'm going to go into the editing of the theme and the collection, a template. It's just one line, which references the section. And I had to do this with a section because I had that setting, right? So in the customized theme, this setting here, I needed a section to be able to have settings available in this page. So mine just points to the section.
And then the section, what I did is I'm only using code inside the section. So in other words, I'm not including any snippets or rendering snippets. So the code is very simple and very basic. It's not using any more advanced functionality that might be available in a collection. And that's because the more generic I make this, the easier it is for you to add it to any theme. Now, if you add this to your theme, there may be a couple of things you need to adjust in it when it's going to be a lot less things to adjust. Then if I add, you know, use some of the tools like sort filters or things like that, that are available inside a theme, but are different across various themes. So here, you know, I have the, the liquid code and what it does basically, right?
It goes through all of your products that are in the collection, one by one, and then brings up. So that's what this is for product and collection dot products, right? And then it, you know, brings up one by one image in the products and says, is the image with greater than the limit we've set? Or there's the height greater than the limit we've set. And if not, you know, it's an, it's an a less not if, so if those image, the image sizes are greater than the threshold, then it ignores it. Right? So it's an, a less, if it's less than, than it actually shows that image. Right? So it's pretty simple. And it's got, you know, generic pagination in there also there's one little CSS line that I put in there. I've been that all in one file. So you don't have to like edit CSS files elsewhere and then the settings. So I'll include in the page that you find this on, on my website and the blog article all include this code. You can just copy and paste it into your store if you want to use this tool. So that's how a photo size tool works pretty easily using the collection and some easy to edit and add a liquid code.
So thanks for listening.