The Podcast
Uneditted Video
Show Links
- Fine Linen and Bath - https://flandb.com/
- Product Photo Tool - https://jadepuma.com/blogs/shopify-tutorials/flex-product-image-review-tool
- Collection Photo Tool - https://jadepuma.com/blogs/shopify-tutorials/collection-content-review-tool
- Article Image Tool - https://jadepuma.com/blogs/shopify-tutorials/article-image-review-tool-for-the-flex-theme
Help the Podcast
Transcript
Hey, Scott Austin here.
In this episode, I wanna show you how you can add some tools to Your Shopify Store to help you manage the quality Of your store. As you know, there are many parts of managing your store that you have to do manually. For example, let's say you want to have a tag For color On all of your Products that Will be used on a collection page for filtering. Well, there's no built in tools That allow the store staff to see every Product that is missing a color Tag, But we can build them ourselves and easily add them to our Store. And then the store staff can use those tools and manage that Business Rule of having a color tag. These Solutions are done in liquid Shopify Scripting language and get added to your theme. Each is a section that you can add to any page that you want. What I do is create a set Of pages and add a tool To each page. Then I add a link for every tool to the brand guidelines page That I create for every store. That way the brand guidelines page becomes a hub That the Store staff can use to manage things. So this Is all happening on the front end of a store. So anyone can access these Pages. You can lock the pages down so That a user's required To log in to view That page. And you can also hide the pages from search using meta fields. So it would be preferable if these Tools are on the back end in the Shopify admin to prevent consumers from accessing them and from search engines from being able to index them. But that would require a Shopify app And making a Shopify app is much more complicated than adding the functionality to the theme. So Let's dig into how I'm currently building a whole series Of tools To help store manages taxonomy with A large product catalog. The Store is fine, linen and bath, and I'm working on a store designed with them. And I have a brand guidelines page in the store where we define, you know, the different brand guidelines about color and typography and that kind of stuff. But I also add The ability on that page To add Links to different tools. So if I go to the brand guidelines page, All the tools are already Listed there. And that way the store staff doesn't have to remember them. You know, how many tools are There? What is The URL behind these pages? It's just a nice little like table of contents for the Store staff to go to. What I do for a lot of stores is create a couple Different standard tools That are really useful, that I'll show you. And then for this Store, we've Really gone beyond the standard ones and dot, done a lot of custom tools, Which I'll also talk about. So one of my favorite Tools is For product images. And if you click on the tool and bring up the page, what It'll do is it'll show every Product in the store or for any given collection. If you wanna restrict it just a certain collection at a time that you're looking at And it'll show for that product, all the product photos. So if you have one photo or 20 photos, it doesn't matter. It'll Show all the product photos for each product. And then there's certain information about those Photos. For example, It shows the Dimensions of the photo, like 2000 pixels by 2000 pixels Or 400 pixels by 400 Pixels. And that way you can quickly see, Hey, Are all of my photos Higher In resolution than what I consider my minimum quality bar, Right? If you've had A store that's been around for a long time, you may have photos that have been in that store for 10 years and 10 years ago, you might have Had an 800 Pixel image, which Was pretty good equality Back then. But today, maybe you want your images all to be at least 2048 Pixels wide. So you can use this tool to Go through and see Which Images are not above That threshold for your quality bar for pixels. Another thing I can do in the tool Is look at what the aspect ratio of the photo is. So for a lot of stores, we pick a standard aspect ratio Of one to one or square. And in the tool, I can see that, Hey, This photo has a square aspect ratio, or If it's not square, you know, it's, it's too landscape or It's too portrait. It'll show that. And I can even have it give directions like, all right, what you're gonna need to do for This photo. That's Too landscape to make it square. You're gonna have to add padding to the top and bottom. So it's an easy reminder to store staff, what they need to do To get the photos aspect ratio to the square that's Needed, or, you know, whatever Aspect Ratio you're using. Some stores are using a four, three, Others Are using a three, four, cause they want more portrait Photos, but the tool allows you to specify what your aspect ratio is. And then it checks every image to see if it's Meeting that, that Aspect Ratio standard or not. And I've got some color coding that if the image Is at the aspect ratio, the target aspect ratio, there's, there's A green background where the Aspect ratio is, If it's not meeting that limit, then we have a red Background. So there's always quick Visual identifier that, Hey, you know, you see a lot of green, everything's good, but you can easily spot, Which is The red image on that big, long page Because In the fine line and bath store that I'm working on, they have over 6,000 products and many of their products have 20 plus Product photos. So we've got like 18,000 product Photos In this store and you have to go through Page after page Of scrolling through them. And If you had to visually Look, you know, without that Color Coding, it'd Be harder to pick out, Which are the ones that aren't meeting the guidelines. Another thing to think about here in these tools is this concept of pagenation. So in Shopify, we're not allowed To pull From a collection more than a thousand products at a time. So if you have a collection of all your products and there's 6,000 products in your store, Shopify on the server Side, on your first Page, this is why you see the little, The page marks page it's called pagenation or at the bottom Of the page, it'll say Load more or page two. And that kind of thing. Shopify is only gonna give you at the max a thousand and you usually don't want to do a thousand because There's a lot of server Side performance that has To do that. So on a tool Like this, what I Do for pagenation is I usually keep it around 48 Products. But you you'll See if your page is really, really slow to load It's cuz you're trying to put too many products on that one page. So My tool Allows me to define the pagenation cuz I have some clients who stores Have One or two product photos and we can show more Products per page In this collection of the Tool Where on other stores like, you know, fine Leonard and bath, where we've got 20 plus Photos per product, I'm gonna wanna reduce the number of Products That I'm showing per page So That the server can render the page in a reasonable amount of time. So when I, when I see my performances, not as good as I'd like it to Be on the page loads and I find myself waiting and getting impatient, then I just decrease the pagenation setting. The Page will Load a little more quickly. Then I always use The flex theme for all my stores. If You you've probably Heard me say that a bunch of times and in, in the world of online store 2.0 where we can take a section and create, create a new section and define it for our theme and add it to our theme code, and Then we can add it to every page. It makes it really easy to take code that I've created for this Tool and add it to all my client stores. And I actually Have shared the code for three of the tools that I'm talking about today, which is the product photos, Collection, photos, and article Photos. And I've shared them on my website. So you can go on my website and I'll include links in my show notes To the articles About them. And I have the code. And if you're using the flex name online store 2.0 version, you can just literally copy and paste the code, insert it in your store and it's gonna work without a problem. If you're using a different theme, you may have to edit The code a little bit, cuz I always optimize the, the sections that I Create for The flex theme. So it might use Styles And classes that are in the flex theme or settings that are in the flex theme that your theme may refer to differently or not have. But in general, The logic of the, The section code that I'm sharing on the log for my website, That logic is liquid Logic. It's more Shopify based than flex theme based. So you can get it to Work Pretty easily in almost any theme, but it is optimized for flex. So that first tool that I use is that product photos. And I can easily look at a page and you know, See how many photos there are for each product And do they meet the requirements that I've Set, the business rules that I have for the size of the photo And the aspect ratio. And the nice thing about These tools is If you add them to your store, You can also optimize them for any other business rules that you have that are unique for your business. So the, the second tool that I usually add to a store is the collection image tool and what that does similar to the product image. One, it brings up a list of my collections and that also has to be passionated. I usually pate that at around a hundred collections per page and it shows the collection photo, if one is assigned for a collection cuz you don't have to assign a collection image. And then it, if you don't assign a collection image, what Shopify does automatically is it pulls up what's called your collection featured image, which is either your collection image or a product photo from the first product in the sort order of the collection. So I show side by side in this tool and here's your collection image if it's defined and here's your collection featured image, even if the collection image is not defined. And then once again, you can look at what the size of the image images and the aspect ratio, and I've got color coding there. Also, if you wanna standardize, you know, your aspect ratios, you wanna have all your collection images be square. You can quickly see, oh it's green, green, green down the board. And if there's one that doesn't meet that color, that standard, the color, you know, coding will show you, Hey, there's a red one and you can quickly see what's going on there. And with collections, what I do a lot of times is, you know, just like I do in products is I add to this tool for the specific business rules for a given store in fine Leonard and bath. What I have is added to it for this custom banner that we're making for a lot of our collections and that custom banner is actually defined through meta fields. So what I've done is I've on this tool, I've called up those meta fields that we're using for the custom banners. And I show the values for those on this page. So you can see which collections have the data defined and if it's defined properly. So we, we have, you know, in our, in our banner content, we have a mobile banner and a desktop banner. We also have the ability to add a brand logo and information like the heading and subheading for the banner. So we show for each of our collections, in addition to the standard information that I put in this section of the images for the collection image and featured image, I've added this other content so we can easily scroll through and see what's what's happening for each collection and find things that aren't mapping to our standards. So another one of these standard tools that I build is for article images. You know, you can, you can see where we're going on. These there, these three tools are, are fairly consistent in what they're doing. It's just, they're looking at different types of content, you know, products, collections, and articles. So the article image tool allows us to see if there is an article image defined for each article, what its dimensions are and what its aspect ratio is. We can do the same color coding behind them and quickly visually see if things are mapping to our standards or not. And what I always do in these tools is the heading for like, you know, the product name, the collection name and the article name. I have those in the liquid code already defined so that the link automatically to the Shopify admin. So if I see a problem in my tool like, oh, this product image is not in the right aspect ratio, I can just click the product name. It automatically opens up that product inside the Shopify admin, and then I can address the issue right there. So those are the standard tools I add to most stores that I work on. And then I want to talk about a lot of the custom tools that we've built for fine linen and bath because their product catalog is so large. There's a lot of complex things going on. And one of the reasons we're doing a store redesign is to build a site that's easier for them to maintain, you know, coming into a newer theme, an online store, 2.0 theme. It's gonna be just alone with that. It's gonna be easier for us to maintain the store with sections anywhere, but we're also defining our taxonomy documenting it. They already had a documented taxonomy. We're just going to the next level with that. And then we're automating that taxonomy as best we can in Shopify, cuz you there's no taxonomy tool in Shopify. A lot of that we have to do manually or, or build the infrastructure around it outside of the Shopify tools and these tools that I'm building here. These quality checking tools are part of that process. One of the unique tools that I built for them is a product variant tool. So this store's been around for over 10 years in Shopify and they've got a lot of products that have been around forever and different teams or different staff members over time did things in different ways. So we're trying to go through and look at all 6,000 products and make sure that everything's done in the same way. So we have a lot of product variance in this store for things like color and size, you know, the normal type of variant things. But we also have a lot of products that are using variance, but there's no choice to be made, right? So they'll have a variant for size, but this product only comes in one size. We'll have a variant for color, but this product only comes in one color and we've made the decision that we wanna check all of those and see if it makes sense to show that because it can be confusing to customers. If you have only one variant for color and you show color as an option, they're like, well, is there normally two colors and one's outta stock or, you know, it confuses people sometimes. So it built a tool where there's only one variant and the variants defined. So every product has a variant, even if they're, you don't see it on the front end. And the, the default variants, if you don't define one is, is called default. So we're looking at all products with just one variant, but it is not equal to default for the, the variant name. And then we're, you know, this way, this tool now allows us to go look at that product and go, do I want to remove the variance to reduce confusion for the customers? So that's, you know, an example of a tool that, you know, most stores probably don't need that, but we decided with fine learning and bath working with the store staff, we identified this problem with variants only, only one variant per product. Well, let's go build a tool that check set for us across 6,000 products. And we only show the product if it has one variant. So we have, you know, talked a little bit before about pagenation right, you're gonna have multiple pages across 6,000 products. You can't show that on one page, you might open up a tool and only, and see nothing, right? Your first page, your first thousand products or first 40 products, whatever number you're, you're pulling down for that, pation all of those might meet your rules. So we're only showing products that don't meet the rules. So sometimes there's empty pages and that's, you know, one of the things the store staff has to get used to is some of the pages might be empty. That just means all the products that are in that pation are meeting the rules and we're just not displaying them on the page. And that takes a little bit to get used to cuz you, you think to yourself, well, why can't we just, you know, sort 'em all and only show the ones that don't meet the, the rules. We can't sort all 6,000 pro products in the, in a collection that's that large Shopify will not allow us. It says you can only take a certain se segment of them, whatever your pation limit is, 48, a thousand whatever. And you can't exceed the thousand in Shopify, by the way, you can only do so many and that's the only ones I'm gonna consider. And then I'll take the next snapshot of them in the next snapshot. So you can end up if your tool is only displaying products that don't meet a rule in your collection, empty pages. So another tool that we built for, for this store, just to give you examples of the things you can do is we're using tags a lot in the store for filtering. And we're using the product and, and search filter app, which I use a lot. And I've talked about before and what we do for, for example, for color we tag the product with a tag that starts with the word color, with an underscore and then the color. So it'll be color underscore blue color underscore red. So what we did is we built a tool that allows us to see any product that is not tagged color, underscore something. So we look at each product and then we cycle through all of the tags and we do account of how many tags begin with color underscore. And if that equals zero, then we show that product. And that way the store staff can go to this page and look at all the products that are missing the tag color. And some products don't have a color, or you don't want to talk about its color color for whatever reason. So some of them it's okay that they're on this page, but we did for that scenario, cuz you know, you don't wanna look at this page every day or at this tool every week and, and see the same false positives every time. So we also added some logic that says, well, if we want to not have a color tag for this one, we're gonna also add a tag ignore color. So what we're now doing is we're looking at the product and seeing if it has any tags that begin with color underscore or if it has the tag ignore underscore color. And then only if both those conditions are meant, do we show the product? And that allows the store staff to have a tool that is only showing the problems that exist and not the ones that they can ignore because color isn't important. So we, we have a tag for the ignore scenario to help them manage that. And they can look through the tool, you know, every once in a while and see if any new new products have issues coming in that need to be tagged appropriately. And we did with that tool is we made it so that it's, it's a section setting. So you can add that section to your page that you're using it on and then you can manually type in it in the section settings, what tag you're looking for or the, you know, color underscore. We also have size underscore and a lot of different criteria we have tags for. And then we can use that section over and over again and add it to multiple pages. So we have a page for missing the color tag, another page for missing the size tag, another page for missing the construction tag. So we get to create one section, but add the capability in it with, with section settings, to reuse that section over and over again for different, you know, scenarios. We also have a tool where if the store is using more than one color per product. So in, in this store, they're, they're selling sheets and towels and bedding and that kind of stuff. So they'll have a towel, one specific towel type and they'll have 80 different products for that towel for colors. Because if you have 80 different colors, you actually can't take your colors and make it a variant because you're gonna quickly exceed that a hundred variant limit in Shopify. So every product has one color defined in it for a given, you know, series of towels. There might be 80 different products for that towel because there's 80 different colors. Each of those towels should have when it, the colors defined in the variance should only have one listing there, white or blue or red. So we built a tool that says, all right, show me any of them where the product has more than one color value for the color variant. So if there's a product that has color red and blue, we show that in this tool, because that might be a problem. It might not be, but this tool allows you to go in and look at that product and go, no, that one's okay. That one's okay. Oh, this one, we've got a mistake here. Let's fix that. So by knowing our taxonomy and our taxonomy rules, it made it easier for us to create tools, to automate the quality checking of the issues that we were finding with the catalog against our taxonomy. And then we also added a couple other tools for stickers. So in the store we're using stickers for things like best selling staff pick and new. So those are done with tags then. So there's a tag for best seller, a tag for staff pick and a tag for new. So we, we built tools that allow us to see all products that are tagged staff, pick all products that are tagged new. And it's a way for us to see which products are gonna get like the editor's pick sticker showing up on the collection pages. So those are the tools that I've built for Finland and math during the current store redesign we're doing for them. The nice thing about these tools is you can build them to whatever rules you are looking to enforce in your store. So if you want to have, for example, for SEO reasons or for whatever reason you want to have, all of your products have a product description that exceed 800 characters. Well, you could create a tool that checks for that, right? It would go through every product, look at the length of the product description. And if it's not greater than 800, or you could make that a setting inside of your section, then it could show that now you can't build a tool for everything. You know, you could think of, for example, let's say you have a rule where product photos can't have a watermark on them. There's no way in Shopify liquid code to see that a given image has a watermark embedded inside the image or text embedded inside the image. So you can't have it, an automation of that, but you could have by looking at the product photo tool that we talked about earlier, you could have an easy way for someone to go through and look at all of the photos and ask themselves, well, is there any text in the image or any water marks and enforce it that way? So there's some things that you can do with liquid. There's some rules you can build to help you quickly sort out and filter out the problem Childs that you want your store staff to go look at. But liquid can't do everything for you, but can still help you in lots and lots of scenarios. So if you've got a large catalog, even if your catalog isn't large tools like this can be helpful. Like I said, I've already got three of them. That's available for anybody to download the one for product photos, the one for collection photos and the one for article photos, you can go grab that code, add it to your store. If you're using flex team, it's gonna work. No problem. If you're not using flex, you might need to edit a little bit, but you can also look at those, see how they're working. And from that, you can develop your own tools for your own business rules. So I highly recommend that you know, if you're having issues with your store, you know, in, in the quality of your store, start adding tools like this to your theme, to help you manage your business rules.
Thanks for listening.