The Podcast
Video
Show Links
- Shopify Flow - https://apps.shopify.com/flow
- Shopify Search & Discovery - https://apps.shopify.com/search-and-discovery
Help the Podcast
- Apply for Shopify Store Consult - https://jadepuma.com/pages/podcast-consult-application
Transcript
Hey, let's go to Austin here. This episode has an accompanying video, so if you're listening to the audio version and are a more visual type of person, check the show notes for the link to the video. In the past on this podcast, I've done episodes where I cover the recent software changes to the Shopify platform, and Shopify is always improving their platform.
This summer, Shopify did another big release for their platform, but I didn't do a podcast on them and that's because these releases are getting so large that it's hard to get your head around all the improvements. It just becomes a list of features and understanding how to leverage those features for your business is hard in the abstract. So for this episode, I'm going to turn it around.
I'm going to show you how you can implement powerful filters on your collection pages and in search using nothing but free Shopify tools. Most of what I'm going to show you wasn't even possible a couple of years ago, and some of the key pieces didn't become available until this summer's release. And what we'll be doing is bringing together a bunch of different pieces in the Shopify platform that have been evolving for the past few years.
And I'm confident that the Shopify dev team has been planning this evolution for quite some time. You don't fit these very separate pieces together as elegantly as we're going to see by accident. This is done by design, so kudos to the Shopify dev team for having a vision of where they wanted to go and the discipline to execute on that vision over years across multiple teams.
I worked at Microsoft for 12 years and pulling this off is not easy. So let's dig in. The goal of what we're going to do for the customer experience is to have collections and search pages have filters, and those filters will help customers find the products that are the right ones. For them. To do that, we're going to need to define what we want for filters and then enrich the product too, with the data needed for the filters to get started, you're going to need two apps in your store.
They are both free apps made by Shopify. The first app is search and Discovery. It's been around for a couple of years and it keeps getting better. I will link to it in the show notes. The second app is Shopify Flow. Flow has been around for quite a while but has recently been made available to all Shopify plans.
It's a super useful app that all stores can benefit from. Now for this podcast, I'm going to be demoing what we're building in a store that I'm working on with a client right now called Chama Valley Mico, and they sell meat. They have different types of meat like yak beef and lamb, and they have some features around their meat that you know, that customers are looking for when they're shopping.
So I started putting together filters for their store and I started seeing all these pieces coming together. And it was much easier for me to do this with just free Shopify tools than it ever had been before. And I really got super excited and kind of geeked out about it. So here's how I put it all together in a much tighter, more formal way than I've ever been able to do before.
In the Charm of Valley Meat Store, we're using the Flex theme and the Flex theme. Like all themes these days in the online store, 2.0 theme supports what's called faceted filtering. So what I had to do was go into the theme and go to the collection pages template and add in the functionality or turn on the features for faceted filtering and that was just done by adding a block to the section for collections for faceted filtering.
And then when I had that on in this theme, also to turn on sidebar, which is a setting at the collection level for showing the sidebar and the faceted filtering shows up inside the sidebar. Now faceted filtering is connected to the Shopify Search and Discovery app, so all I did inside the theme was say, Hey, we're going to be using information from the Search and Discovery app, and then then I could get out of the theme and rest of the work was done inside of the other apps and the Shopify admin itself, not inside of the theme.
Now, when you're building out filters, you have to know what it is you want to be filtering on and what are the options going to be for that filter. So in this example, I just want to show you one filter that I made and how I made it. And that filter is for meat. Now, in this store we have three types of meat, beef, lamb and yak.
So I want a filter that allows the customer to say, Well, I'm looking for a yak. They can select the yak filter and only see yak products. Or they could change that out in search for just beef or multiple of those. So to start, when you're making a filter, you got to know what it is you want to filter on and what the options are going to be.
Be very explicit about it. And I call it, you know, defining your taxonomy. If you wanted to find your taxonomy, say I'm going to have a filter for meat. And meat is allowed to have three options beef, lamb and yak. So you don't want someone to spell it differently. You know, lamb can be spelt with a capital A or a small A, or lamb could alternatively called mutton.
You don't want to get confusingly there. You want to be very explicit, very consistent, so that when you present those options to your customer, they're presented the same way every time and there's only three of them. If three is the number of options you're going to have in the way that we now do that is with net fields.
So in the Shopify admin, you get some meta fields by going to settings and then down to custom data and you'll see a whole list of meta fields that you can create. You can have better fields for products, variance collections, customers and a whole bunch of other types of entities. Now on a collection page in a search page, right?
They're both showing products. So we're looking at product middle fields. So if you select on the product meta fields, you get to create what's called a Medfield definition. And this is super, super powerful and it's only been around for a couple of years and every Shopify release, it gets a little bit better every single time. So like some of the stuff we're going to show you here wasn't possible even just a year ago.
What I did for this Sharma Valley Mico store is I created a Medfield definition for meat, and I define that Medfield to allow three different options. So it's basically you have a pulldown menu. You basically say this one is going to have a limited set of choices and you define what those choices are going to be. And I put in three, three items beef, lamb and yak.
So now when I go to a product page inside of the Shopify admin at the bottom of that product page, once you define your Medfield and pin that Medfield, it's called down at the bottom of the product page. You'll see your Medfield. And once I said, Well, this meat, Medfield only has three values that are allowed. If I click on the box to enter in the Medfield, I actually have a pulldown where I can select from those predefined ones.
Beef, lamb and yak. Now, let's say for whatever reason, we want to change, you know, lamb to mutton. We just go back to that Medfield definition and change the word lamb to mutton. And that data gets expanded out across the whole product catalog and all the products get updated with it. And this is the way that you can make your experience on the filter side really consistent.
So, you know, somebody might be kind of lazy with their capitalized options. You have, you know, A capital B for beef. Well, they're not typing in the word beef and having to select capital B, they're just selecting from the pulldown menu the word beef that is already capitalized. So Medfield definitions and pre-selected or pre assignment fields where they've got to select from the values is a great way to a let your store staff know what the options are and B make sure that they enter them in a consistent way every time so the filters are nice and tight and consistent.
So now that we have a Medfield definition that has all the options we want for this filter, the next thing we're going to do is we're going to go into our search and Discovery app. All right. So that's the free app by Shopify. And we want to in our filtering group, add that option for that filter. Now, the nice thing in the search and Discovery app is you can add different types of filters.
So you could filter on things like product type, you could filter on tags, you could filter on, you know, different product options or variants that they have. And you can also filter on middle fields. Now, in the old days we would filter on tags a lot for things in the search app. When you filter on tags, you really can't say I want a subset of tags.
Just these five kind of thing. And that's where the metal fields become more and more powerful is. You can now say, Well, we're going to look at this one, Medfield. And this metaphor is only for this data value where it tags there's no structure behind tags. But in Medfield you can have like ten different meta fields for ten different buckets of data that you want to store.
And you can say this bucket is only for these elements, so it doesn't get confused on what this data is for. So tags were a workaround we did before meta fields were as rich and abundant as they are now. But as I build out stores today, I don't use tags for filters anymore like I used to. And when you did that, you used to have to use an app like the Boost Search and Filter App, which is still a great app, and stores with large catalogs, you're still going to use that.
But now small stores can get that rich filtering experience with these free apps instead of having to implement a paid app, which is also, you know, takes a little bit of time to implement. So we're creating this filter in the search and Discovery app and we're using the Medfield that we defined already for meat. And just saying, I want to add meat as one of the filters to the store.
And then once you do that, as soon as you go out to the front end of the Web site, because remember, we've added our faceted filtering to our theme. We've defined our Medfield definition. We've gone and updated our Medfield definition. And I'm going to show you some tricks to do that more easily, more scalable in a second. And when you add that data to all your products, you'll just start seeing it show up automatically in your customer experience on the search and collection pages.
Now, when I did it in the store for Chama Valley Meat, what they had for all of their products, they didn't have tags for any of this. But what they did have was they had in the product title the type of meat was listed every single time. So if it was Ground yak, the title actually said ground and yak ground beef said ground beef.
So what I was able to do the other app that I talked about, Shopify flow, I use Shopify Flow to go in and look at all the existing products and say, All right, if it has the word beef in the title, let's set that metafield value to beef. If it has yak in the title, let's set the midfield value to yak.
So by setting this up, I was able to defined this Shopify flow procedure and then just execute it. And it went through all the products in the store and automatically populated the metafield values instead of me going and doing it manually step by step. Now, I did have some products that were both yak and beef, and I had to set up a rule that said, if both yak and beef exist in the product title, then give it the midfield value for both of those things.
So in Shopify flow I set up, you know, they're called flows and I set one for setting the meet. metafield Now you have to have a trigger for doing this, so you just can't set up a flow and say, Go execute this. I'm on my whole catalog. So what I did for the triggers, I made the trigger product status updated.
So once I set up the flow with all the rules that I wanted, I changed all my products to draft and then immediately after changed it back to active. So it went in, changed the product status and it kicked off the trigger and Shopify flow went through all the products and went through the flows rules and said, Oh, this one has beef in the product title, therefore we're going to assign beef as the menifield value.
Now, one of the confusing things about setting up a flow that wasn't that well documented for me, it's easy if you just have an open letter field where you can put any text that you want. Remember, in this case we've defined our metafield to only allow three options and you can allow, you know, one, you know, you could have just beef or it can be beef and yak or it could be beef and yak and lamb that is actually stored inside of the Shopify data set as a matrix, right?
So you don't just put a text of beef in, you know, So my rule doesn't say if the product title contains beef, set the metafield value to beef. It would be nice if it was that simple. But when you're doing the multiple items options, the hard to find hard coded, these are the only options you're allowed for this.
Metafield It's then stored as a matrix in the way that looks, and there's a box that says, What is the value for that? Menifield is going to be? Instead, it's putting in the word B for the word YAG. You actually put in an open square bracket, which is code for this is an array or a set of choices.
And even if you only have one value in that, you're going to put in that open bracket and then quotation mark and then the texturing beef in quotation mark and then in square bracket. Now if you're going to put in more than one value, you're actually going to have one set of open and end square brackets around both values.
They're still going to have quotes and they'll be separated by a comma. So if I beef and yak, it's open square bracket quotation mark, beef, quotation mark, comma, quotation mark, yack, quotation mark and square bracket. Like I said, that was a 2510 minutes to figure that one out. Maybe it took a little bit longer. It's not well documented, but I did find some some help on some chat boards and I was able to finally figure out how to structure that.
And once I got over that hump, implementing the rest of the things was was much, much easier. So my flow that I created for this had a bunch of if then statements, right? And I started off with the if the product title contains yak and beef, then set the middle value to yak and beef. Now if it didn't have both yak and beef, then I had it search for if it contained beef and if it didn't, then if it contained yak and if it didn't, then if it contained lamb.
And for each one, if it did contain that value, we set the midfield metal field value to that that texturing. Now I don't have any products that had beef, yak and lamb in the title, nor did I have. And it was lamb and yak or lamb and beef. But if that did exist, I would have to add that to my flow and all these logic conditions that I have.
This if then statements that I'm building out. So flow can take a little bit of time to figure out and figure out the logic you have to do in the order that you do them in. For example, in my flow, I had to search for beef and yak before I searched for just beef or just yak because if I search for just B first, even if it contained beef and yak, it would say yes, it would set the value to beef and would be done.
So it might take you a little bit testing to get it all figured out in all structure. But this is a really nice way to automate setting those mid-field values. Now, I did that in an existing catalog, but I also I'm going to use this flow in the future as we add new products to the store. So when the store staff adds a new product, you know, beef, whatever that will go through this flow, wants to make that product active and will automatically set that mid-field value.
So you can set up flows for all of your different data elements that you're storing inside of these metal fields. Now, when I'm defining a product taxonomy, like saying we're going to classify meat and we're going to have it either be beef or yak or lamb, I don't want to do that in three different places at three different times.
Now we are putting it in the product title and in the midfield, so we're kind of do it twice there and I'm okay with that because one of them is used for the customer and one is used in Shopify is presenting information to the customer. So what I mean by that is I don't like having a tag of beef in a midfield of beef and I used to have to do that because you weren't allowed to create a collection based on mid-field values.
But now we can actually create collections based on mid-field values and that allows us to say, All right, in our taxonomy, we're going to define beef as one of the things we're looking at, and it's gonna be defined in the meadow field and we're not going to have it in the tag. We're not in the product type. It's just going to be in this matter field.
So the way we do that now is in our Shopify admin, right? We go to settings back to where we were looking at the custom data elements, settings where metafield are stored. And if you open up your Medfield definition region for in my case meets, I have a couple of checkboxes on the screen. Now one of those checkboxes is used as filter in admin, which allows you in the Shopify admin.
When you're looking at a list of products, you could say, show me all the products whose Medfield is set to beef, which is nice. And then also there's another checkbox for use in automated collections and that allows you when you're setting up your collections to use the metafield value, right? In the past you weren't allowed to do that.
You could have things like if the product type equals beef or if the tag contains beef. But now you can say if the metafield value contains beef and define your collections dynamically that way. So if you go into collections and create a new collection and I always make my collections dynamic or automated right in your dropdown menu for the conditions you now have at the bottom, any metafield.
So you've defined those meta fields and then check the box to allow them in your dynamic collections. You have that metafield There you can select it and you can use the entries in. The nice thing is if you have the metaphor like we have in this situation where it's predefined to be just beef, just yak or just lamb or a combination of those, the Shopify admin knows that information and presents it on the collection page.
So you don't just type in beef because you might get capitalization wrong or spelling wrong. Those kind of things just because you drop them and you could select a value that you want to use for this collection. So it really makes it easy for you to not make mistakes because it's so easy to make mistakes with spelling and things like that.
So once you pull all these pieces together, you now have a much more easy and powerful way to display filters on your collection pages and on your search result pages then you were able to do in the past. So let's do a little quick summary of the steps. What you're doing. The first thing you're going to want to do is add two new apps to your store if you don't already have them in there.
And that's the search and Discovery app and the Shopify Flow app. Both those are developed by Shopify and they're free in the App Store. And then you're going to find your text and decide what you want your filters to be. Now, some of your filters, like if you have a product type filter, you know you're going to use the value of product type in your products.
That's going can be part of your taxonomy, but we're used to use tags a lot. Think about replacing those with net of fields, and then the fields are set in your settings under custom data. So you define your meta fields and when you can make those matter fields, a dropdown menu of options for your store staff. So they're not just typing in any value they want.
And this way you can define and enforce your options that are allowed for that level of your data. Then you want to go into your Shopify admin again and go into your theme and make sure that you've got faceted filtering turned on, which is going to look to that Shopify Search and Discovery app to determine what filters to present.
And then you'll go into your Shopify Search and Discovery app and you'll set up the filters that you want using those metafield values that you've defined, or if you're using other data elements like products. And you can also add those in there for your filters. Now that you've got these Medfield definitions for these values that you're using, you can also use those Medfield definitions as you set up your collections so that you're only storing that information about the product in one place.
So you can keep that consistency going throughout. And I think now that we're at this inflection point with the Shopify store experience for store staff, that small stores can now have this rich browse experience with filters that they weren't able to do in the past without paying for an app and doing a little bit more complex of a setup process.
Now, the set up process that just walks you through, you know, it's not defined in one place for you and that's why I brought it together in this podcast episode. So, you know, you got a couple different apps that you use and for different reasons. You've got different settings at different places inside the Shopify admin, but hopefully this gives you that overview on how all those things work together to bring to your customers powerful filters like this.
Thanks for listening.