Transcription of Shopify Online Store 2.0 webinar. The purpose of this webinar is to teach you about the capabilities of Shopify Online Store 2.0 and help you determine if it's even necessary to upgrade right now. Even then, I'll show you how to get Online Store 2.0 capabilities on your vintage theme.
Introduction
(00:16): Okay. Hi. Thank you everybody for watching. My name is Taylor. I am a freelance web developer and a Shopify expert based out of the Springfield Missouri area, though my family and I are prepping here to get ready for a big move to Ohio so that way we can be closer to family. So right now I'm on Central Standard Time and we're going to be moving to Eastern Time, and so that's always fun. Some real quick housekeeping. Just to let you know, I am going to kind of go through this whole deal. I'm going to try to answer questions, but for the most part, I'll probably save a lot of questions till towards the end. Hopefully my microphone, there's nothing going on that's too loud kind of type thing here. I've got some people over working in the house. I had a kiddo staying at homesick today. And so that's just a whole bunch of stuff going on. So if there is some background noise, I do apologize about that. I'm going to try to keep this on point here.
(01:15): Also a little bit of housekeeping for those maybe who haven't done live streams or who was kind of new to me, the stream runs about 30 seconds behind real time. So somewhere between 20 and 30 seconds. And so I'm going to do my best to kind of keep an eye on questions and those sorts of things. But if I don't get to a question quick enough, it's not because I'm ignoring you or anything like that. I might have already answered it. It just kind of takes a couple of seconds to roll on through.
(01:39): So again, my name is Taylor. I'm a freelance web developer and I do business under the Pages Media. And that's just the business name that I use. Also in the chat today is my executive assistant Lindsay Lebsock. And so Lindsay, you can say hi in the chat. Make sure audio and everything's working okay. Lindsay's going to be helping out in case there are some additional questions that I'm not paying attention to. Or if there are any other technical issues, she's going to be able to ping me there as well. Lindsay's also my sister. I got lucky enough that she was okay with signing on board with working with me. She's doing a fantastic job and I'm super excited. So if you've emailed me and corresponded with me before, you might have actually got a couple of emails from Lindsay. She helps me stay on top of projects and all those sorts of things. So, yep. Thank you for dropping that into the chat. Awesome.
Understanding Shopify Online Store 2.0
(02:32): So real high level today, I'm going to move over into sharing my screen just so that way you can see what that looks like. And so if y'all can't see this, definitely let me know. It looks like since last time, my screen's moved around a bit here, so I'm going to move this stuff over to make that fit. That's the benefit of doing it live, right? Some of these things don't come in perfectly. So I'm going to move that. Hopefully you can see the screen okay. If not, definitely let me know so that way I can blow that up a little bit bigger. So what I've done here is I've set up a development store. This is something that Shopify partners, Shopify experts, all those sorts of folks, can do through Shopify where we can just set up a store to kind of test things out, maybe building some functionality for you without impacting your live store. This is also something we typically do when building a store up from scratch before handing it over to somebody.
(03:32): Let me see here. So this again, this is just a development store. I was fortunate enough too. So just so that way our store doesn't look super bare here when we're kind of testing some things out, I talked to one of the clients that I work with Southern Breeze Sweet Tea. They were gracious enough to let me use their products and descriptions and beautiful imagery that they have on here. And so feel free to check them out southernbreezesweettea.com. So you can also use a code FREEJAR when you're in the cart for a free mason jar with your first purchase. So just so you know that's on there as well. They're not sponsoring anything. They're just really great folks and I love working with them. They were gracious enough to let me do that.
(04:16): Okay. So wanting to at least move in through here a little bit to get started. So we're going to get acclimated to the store here. What I've done on this store is I have just this standard Debut theme and then I also have Dawn. So for those of you that don't know, Debut is the pre 2.0 standard theme that just got installed on the stores. Now you actually have to hunt for it. It used to be, you could come in here and just add a free theme and it would pop right up here in your options. But now you don't even have that option. It's one of those things where it's not even there. So you actually have to go onto the store actually on the Shopify theme store, visit it and search for it specifically. That's because Shopify is trying to move towards 2.0. They're wanting to stay away from that as we'll see, because we're going to use the documentation in order to actually go through today's webinar.
(05:15): And so part of that is this reference to Vintage themes, right? That's not my terminology. So if you do have a Vintage theme that's not 2.0, I'm sorry, I didn't coin that term. That's all from Shopify. It's not a slight, right? Or anything like that. It's just a good way to differentiate 2.0 to pre 2.0, right? And Vintage just works for that. So yeah, here we go.
(05:42): I'm going to start here in the docs because I think this is most helpful with folks when I'm working with them. I really want them to get comfortable, familiar with using the docs and those sorts of things. Lindsay's going to drop this links into the chat for the main one, but if you're having trouble getting two different pieces of that, just let me know in the chat. Lindsay will help out with that and make sure that we've got everything that we need there. So this just talks about the different architecture versions of the themes. And so the big move in Shopify was they previously used templates with their coding language called Liquid. And so those templates were great. They helped us create all these unique templates and those sorts of things with customizations across different products, collections, articles, those sorts of things.
(06:28): But we've lost some functionality there. We just never really had it. And so we've talked a lot. The biggest thing I know people are really excited about is this idea of sections everywhere, which is where if you're on the homepage, you can continue to add a bunch of different things and not have to code anything in specifically. Versus when it comes to a Vintage theme, you don't have that on anything except for the homepage. Whereas now like we'll go over here, you have that functionality on all those other pages. So collections, pages, products, all that fun stuff. And so I'm just going to cover that real quick. And again here, just highlighting, this is Shopify calling them the Vintage themes.
Sections Everywhere
(07:06): So the new move to what's called JSON basically for the templates is what helps kind of create this unique functionality where we have a lot more tools available to us than we did before. And so I'm going to scroll down here and just talk a little bit about this. This is going to be what drives at least this webinar. There's obviously a lot more implications and fun features that we could cover and really extend 2.0 with Natively. But for the purpose of today, I'm really just going to focus on these specific sections and those sorts of things. So we'll just use this as a guide. For here, we'll talk about sections on the homepage. That's the biggest thing. So the Vintage themes, yep, we have these sections on the homepage and we still have them on 2.0, but the biggest thing here is this sections on every page. You'll see that this isn't available in Vintage themes and it is on 2.0.
(08:01): So let's talk about what that looks like. Basically in here, it'll talk a little bit about these different themes that are available. The versioning and stuff helps as well because this gives us some additional flexibility and functionality that we talk about down the road later. But the biggest thing is, these themes provide the flexibility to build your store exactly the way you want without having to write code. And we'll do a quick demo with that.
(08:27): I'm going to scroll down a little bit. This talks about some of these specific things where there's these different theme types. When it comes to themes by Shopify and third party themes, I'm always going to recommend themes that are directly in the theme store. A couple of reasons for that, primarily because they require support and updates for the life of the theme. And so obviously some things like customizations and stuff like that don't come along for the ride. You might have to talk to an expert or another Shopify partner about that. But at least when it comes to making sure there's ongoing support, that stuff's all directly baked into that if it's on the Shopify theme store. There's a lot of Q&A that goes into that.
(09:04): And just real quick, this talks about upgrading your theme. We'll talk about how you can incrementally build in 2.0 to your store, but that's not something that we'll spend too much time on just because you may need a little bit of help probably if you're not comfortable with JSON. JSON is pretty specific as far as like what it can and can't do. Something like a comma misplaced or quotation mark or something like that will kind of break all of that and it won't let you save in Shopify all this fun stuff. So we'll just talk about that real quick.
(09:36): But again, kind of down here, Shopify's word of caution, if you are wanting to migrate a Vintage theme to 2.0, your existing customizations aren't migrated to your new theme. So that's something I've worked with a lot of folks that's kind of confusing as well to them. Maybe you had a theme built by somebody else, you had a lot of customizations done. And so just understanding that those customizations, they'll have to be carried over into this new template, this new architecture that they're using for that. And so that does require probably a little bit of lifting from a developer or something like that. So again, just something to be aware of ahead of time.
(10:10): So Shopify already has a bunch of these themes available. So these are just themes that are created by Shopify that are free and they cover basically different verticals essentially. So you can take a look at these. There's a lot of different free and paid themes by Shopify here in the theme store. So that's something to take a look at, because you can also sort by 2.0. So particularly if you're starting new, I really would recommend not starting on a Vintage theme just because that's going to be really problematic for you down the road. You're going to have to upgrade. So I would go ahead and make sure that these are down here on the filter categories. You can do theme architecture and Online Store 2.0. So make sure that's checked. When you're going through these themes. You can also drop into any of these themes and make sure that they do have a section here. They'll just have to say this Online Store 2.0 on here as well.
(11:08): Okay. So let's get into the specifics of what that looks like. So if you go back to your Shopify dashboard, we'll just drop in real quick. This is the current Debut theme and we'll just go to the catalog and you can see all these great products and stuff in here. Maybe we want to add an additional section, but you can see here, there's no option for us to be able to do that. So we'll go over here, go to collections. And you can see we only have this one specific collection that we can choose from. And so that's something where now when we have 2.0 we'll have some additional options and features in here. So let's go ahead and test that out real fast.
(11:49): So if you scroll down here, I'm going to go to the Dawn theme and then choose customize. So you can see here we do have all these fun sections. Now, if we go to the same catalog, right, it's the same collections, oh look, we have this nice little added section button down here. So we can choose to have maybe a featured collection or a featured product directly on these specific pages. So these are all of the same sections that are available to us on the homepage are now also available to us to create on the collections page. And they're specific to this template. So in this instance, let's just go ahead. I don't think we have an email sign up except for in the footer. So we'll just go ahead and throw something like that in here. And if we hit save, you can see that we actually have that available to us now.
(12:40): Now here's the other really cool thing about 2.0. And again, this is something where once you have 2.0 and you have that available to you, this is something that you can just do yourself. So before, when we had Debut and things like that, if you wanted a new collections template, let's say we don't like this, Subscribe to our emails, we don't want an email sign up form at the very bottom of the page or we want to move stuff around, maybe we want like a large image at the top instead first, we can't do that without creating different templates. And so otherwise it's going to impact our default. So what we can do here now in 2.0, is if you go to that collections template, you can actually create a new template directly from the customizer. You used to have to be able to go into code and copy a different template. And then if there are different sections, we have to make sure that those sections aren't conflicting with the other templates. Now it's just create a new template right from in here.
(13:36): Looks like there's some funky stuff going on here. It doesn't normally look this bad. It's probably just because I'm doing some streaming here. So we'll go ahead since we're doing it live here. Let's just do new collections template. If we have different option, like let's say you have a custom template created for, you can actually base it off of that custom template as long as it's 2.0. If it's not 2.0, you're not going to have this option to do that. And so we'll just go ahead and create this template.
(14:11): So you can see here now we've got this different collections used. And so we can change this back to something different. We would probably want all collections, but I should probably put just some collections first. But you can see here, this collections view, we have just this product, right? And then we have this down here where there's the Subscribe to our emails. So let's say we want to get rid of this guy. We'll go ahead and just remove this section. Let's say we want to add just a really nice image banner at the top or something like that. I'm not going to worry about filling stuff in right now, though if you don't have imagery and those sorts of things, I would go ahead and make sure you can take a look at these free images. This is from Shopify at a project called Burst, I believe. And so these are all creative commons licensing for you to use on your store if you need to. It's always good to get your own unique imagery in those sorts of things, but something to bear in mind. So we'll go ahead and save this.
(15:11): Okay. And now when we go over to the collection template, you can see we actually have two different ones. So we can go back to the default and you'll see that we have our subscribe at the bottom without the banner. So something that you used to have to have a developer to do to drop into code, create this for you, isn't something that you actually need to do anymore. And so this is something that has been very helpful for folks when it comes to creating new templates, extending your functionality without having to get someone to write you some custom code. I think it's something that folks have found very helpful for that piece. So hopefully that helps.
(15:49): Now I think what people are most interested in when we're talking about this is probably going to be extending 2.0 features to a Vintage theme. It is possible. So there are a couple of pieces to that. I actually did not pull that up. So I'm going to drop in real quick here to Shopify's reference. So Shopify has great references in their documentation. We're going to go ahead and take a look at this real quick. I'm going to pull this over here. Again, I would not recommend doing this if you're not somewhat familiar with code.
(16:32): Oops, sorry. So some of this is going to talk about JSON templates here. This is something that you can use in order to help gain some additional functionality extend those features. Or the best thing you can do is talk to a web developer. Either way, when you're making these updates, make sure that you're making these updates into a duplicate of your live theme. Don't ever mess with your live theme with something like this. It's something that just... Something's bound to break. And so I would really completely not recommend doing that.
(17:02): A lot of this stuff isn't going to mean too much to you, but if you scroll down here, we actually have an example of what a template file looks like. So this is really handy. You can go over here, you can make a copy of this guy. We're going to jump back to our store. Again, all of the warnings or reminders of like, be careful with doing this. We're going to do this because this isn't a live published theme and we can go ahead and break things if we need to.
(17:33): So I'm going to go into here. This is Debut. This is our non 2.0 or Vintage theme. Real quick. Let's just verify this because I want to make sure y'all can see this piece. So we don't have anything in the products other than our default product here. A cup of really nice good looking Mason jars. We don't have the option to extend this functionality within 2.0 or anything like that. So let's go ahead and just do some quick code here. There are a couple of things that you need to have to do if you want to extend this functionality. And this will work the same for product templates, collection templates, page templates, whatever kind of type thing. Oh no. Okay. Give me a second folks. That's funny. Sorry, one sec. This isn't going to work for anybody else anyways, because... So I recommend also having two factor auth set up. It's not helpful when it pops on during a live webinar, but that's just what it is. Whoops. So another wrong one here. Sorry guys. It's always good to have this kind of type stuff up and available. Really sorry about that.
(18:52): But yeah, two factor auth, you should have that enabled. It enhances and increases the security for your accounts. So that's something you can set up with something like Google authenticator app, all that fun stuff. Okay. So we want to do a couple of quick things first. So let's take a look right now at the current product template. So you can see here in the code editor, Shopify has these really helpful deals here where they have the different files laid out. Nice little folders. So you can tell exactly what this is.
(19:17): Now don't let this freak you out too much. You don't have to be worried too much about what this looks like. The biggest thing that I want to take a look at in here is find out what the section is, mainly because this is most important because when we create a JSON template, it has to have a template used. Or a section used, I'm sorry. So it has to have at least one section used. You can create additional sections to be just automatically included or dropped in, but it has to at least have one in order for us to save that template. So we can see here that that's the product template. If you click on that little arrow next to it, it'll actually just drop into that. So you can see what that looks like if you want to, but don't touch anything in here quite yet.
(19:58): So again, in the code editor, we can just go to Add a new template. We want to create a new product template. Now in the template type, you want to make sure that it says JSON and not Liquid. Liquid is the old Vintage one. We don't want to create a new one. You can save it as Alternate, but we're going to do something like Updated here. Go ahead and create your template. So Shopify will automatically drop in some other specific information for you. You can just go ahead and delete this. And then if you remember here where our JSON template information was, we copied this information, right? We'll go ahead and copy it again.
(20:41): Okay. So this probably does not mean a whole lot to you at the moment. So again, don't worry too much about this. The biggest thing that you want to make sure occurs is you want to make sure that when you copy and paste this in, that this main and type, this right now just says product. What we want it to do is we want it to reference the same information in our template file as the first section referenced here. So you can just copy this guy, paste it in here. And so this is all done for you. You can change and I would recommend changing some of these things. But for the purpose of this I wouldn't worry too much about this. You can just change this guy if you want, call it the same name as the section.
(21:32): This rapper is just like a styling kind of type thing that we typically use, or if we need to target something with JavaScript or something. So this section is main, the order is main. This looks good. Let's go ahead and save. So you can see that it's saved. If I didn't have anything in here or if you're getting some kind of an error, it's either because the section that you suggested that it target is not available, or you just didn't put one in there. So I would just make sure to double check that. But again, if you're having too many errors, just make sure that you talk to someone that that does work with code. So I'm going to drop back over here and we'll do a refresh. Sometimes on these development stores, this does take a little bit of time for this to pop in, but we're going to take a look here and see if we got it.
(22:16): So if you go to the products, before we didn't have any additional templates, but you can see now we actually have that updated template. And this again, this is on the Debut theme. So the rest of this theme is still a Vintage theme. That's not 2.0. So we have just extended functionality for sections everywhere to a product template that's on a Vintage theme. So pretty neat. Let's make sure it works. So we've just selected it. You can see a lot of our information's the same. Yeah. Wow. We have the option to add some sections in here. How cool is that?
(22:51): So maybe you want some additional pictures in here or something like that. We can add a whole bunch of things in here that just something that's specific to you. This product is not something that you'll do. Whenever you update on this specific template, this is going to update for all of the templates that are using this updated guy here. So you need to remember that as well. So just because we have sections everywhere doesn't necessarily mean that we have created unique templates for each of these individual items. What we have done is we have extended the functionality to where we still have that, where the same information will show across all the templates using this specific template, but we have the option to move stuff around. And we'll get into that other information here when it comes to dynamic sources. So if you want unique content on those other pages, that's kind of where we would look.
(23:41): The other thing to make note of, before if you have had like a bunch of custom templates, before on Shopify when it was the Vintage or the Liquid architecture for those templates, we would get bogged down if we had more than 10 custom templates or something like that for different things. It would start to get pretty clunky, really slow. So the move to JSON was primarily for not just extending this functionality, but also from a performance perspective. So because of that, Shopify now has extended to where with the JSON templates we can have like a thousand unique templates. I think they talk about that here. Yeah.
(24:20): So up here, at least we have the information about the JSON templates. Yeah. I think it can contain up to 1000 unique templates. How awesome is that? I don't think you're going to run into a thousand templates anytime soon. They've additionally extended some of the other limitations that they had with blocks and sections. If it's on JSON architecture, you can have 25 sections. Each of those individual blocks, which is the little items that you add in there like these guys here, you can have up to 50 of these in 25 different sections. So pretty, pretty cool. They've really extended the functionality with a lot of these updates. So again, something to keep in mind as far as building in this new functionality to your themes. You can do the exact same method that we used on the product base here. You can do the same thing for collections. You can do the same thing for blog posts and all that stuff. Those are all things that you can do within 2.0 but also if you're wanting to extend some of that functionality to your Vintage thing.
(25:24): Just again, bear in mind it's not something down the road, if you do have a Vintage theme through Shopify or like something like Debut, that's something that's not going to continue to be supported down the road by Shopify. They're really pushing everything to 2.0. And if you have a premium theme, kind of the same way, a lot of those customizations, they're not going to carry over necessarily to a new 2.0 theme. So something just to kind of keep in mind for the future when you're making these updates. But if you're just needing that functionality now and you don't have the time, the energy, the resources to do like a full update, that's definitely a really, really good option for you.
App Blocks
(26:01): Okay. So I think that covers some of those 2.0 updates. Pretty good. Enhanced app support. There's a couple of different things that I can do to probably talk about this, but more so I think it's probably just helpful to just reference it bigger than anything, mainly because I can go in and download a bunch of apps and stuff like that. But for the most part, just talking about this is really important. Because if you haven't had this happen, you can't really understand probably or it doesn't really matter to you all that much why it's a big deal.
(26:35): So the new architecture allows for apps to be installed via what are called app blocks. The nice thing about this, is they can even be added, removed, repositions or customized in the theme editor directly rather than before when apps were just injecting code directly into the theme. You were kind of stuck with whatever it was targeting or you had to hire an expert to kind of come in, move stuff around for you. And so now what they're doing is let's take, for instance, a really good example. Maybe judge.me is a reviews app. And so what they can do with this now is we can extend that functionality directly into the theme editor for being able to move around things like the 5-star reviews or things like that within blocks rather than just where they put it. I think we can probably get into that a little bit.
(27:32): So if you drop into a theme and I'm going to keep an eye on time, but I think I'm doing pretty good on time. We'll go ahead and just drop in. judge.me is not sponsoring this or anything like that. They have a pretty generous free tier. They do a lot of cool stuff and they also support Rich Snippets. Basically that's something that I think is really great that they do. I'm just going to go ahead and just do all the same installs and stuff. And so that is really helpful that they support that basically. Rich Snippets supports and Google Search results and stuff like that help with basically the visibility of your products and those sorts of things in search. So just something that could be helpful here.
(28:22): We'll go ahead and let this guy download. It's usually pretty quick, but we're going to do this just to just do that. So before, what I would've done is I would've recommended before you download any app to test, go ahead and make a copy of your live theme first before you do. Because again, before we had app blocks, we had to really worry about basically these apps that provide a lot of great functionality and stuff, kind of muddying up the code and potentially causing interference with some other things that we're trying to do in the store.
(28:55): Sorry, I lost it there for a second. See if this guy got done. Okay. I think we're good. So basically, we want to just drop in here and take a look at some of these products. Oops. I of course picked one that's sold out. Let's not worry about that. So yeah, we're going to run into issues here when it comes to some of these reviews because we don't have any yet. And so conditionally, they're not going to display up here, right? If we had reviews and stuff like that, we'd be able to see some of that information. So this is helpful at least to know.
(29:32): So if we go though into Dawn, that's our 2.0 theme, so our non Vintage theme, right? Let's find a specific product. And so now you can see here, before we just had the product. There wasn't a lot of movement, mobility and stuff like that. But here let's say we wanted to move around this Southern Breeze Sweet Tea so this is like pulling in a dynamic resource for the vendor. We'll talk about dynamic resources here in a little bit. And then here's also like a subtitle, those sorts of things. So you can move all of these around. So when we do extend some of that functionality here with the app blocks, we can now just instead of adding a new block here, we could actually add those specific reviews directly in here. So here's a preview badge for stars. We can kind of move that up and throw that in here. Obviously we're not going to get too much until we actually have some reviews and stuff. But the nice thing is you'd be able to move this stuff around instead of being stuck with wherever the app is previously designed for it to go.
(30:41): So again, something to kind of keep in mind for the future just when you're... Let me go ahead and say this. Because they usually give a nice little preview rating for us when we don't have that option, but it doesn't look like that's coming through. And that's okay. Just for the purpose of this, I think it's just really helpful to be able to see how we have a lot of control, versus before it's just kind of wherever they throw stuff in that's kind of where it's going to go.
(31:06): But here we have full control over where all of these things go. We can add another section and you'll see down here that we do have options for these product reviews. So we can add just a widget review down at the bottom instead. Instead of just having it at the bottom, we could move that up if we would like. There's all sorts of things that you can do with this. And again, if we have reviews, this is going to come in. But right now not super helpful that the reviews are empty. It's just more so for kind of displaying what we can do here on 2.0.
(31:37): Okay. I'm going to scroll down here a little bit. The docs talk about this a little bit. And again, if you do need that reference we can get that, but everything is linked from this original page that we're starting with. We're treating this kind of like a guide, so this links out to everything as well. But that's just something to be aware of. And again more about customization functionality and not muddying up your code so to speak. Shopify does link out to specific apps that do support 2.0 features. So these apps here, they'll all be linked out. It just have a collection for online store too basically. You can go there for all of that fun stuff. Awesome.
(32:23): Let me see here. Yeah. So now we're onto using meta fields. I think this is one of the more exciting topics when we're talking about customization functionality on Shopify. Because even though we do have sections everywhere, the ability to use meta fields, we used to have to achieve one of a couple of different ways. We could either basically do this really hacky URL thing where you have to type it perfectly into the URL. Otherwise, it would create new meta fields even if they were mistyped. And so there wasn't really a good way to find those, like what those looked like, edit those after the fact, and you could essentially create a bunch with just a simple typo.
(33:02): The other way to do that in the most common way that we were previously accessing that as developers was through different apps in the app store basically we're using in order to write new meta fields to different sections of your Shopify site. And that's primarily because it's like a backend type of thing. So when we want something to be unique on a template, you'd have to do that. And then you'd have to have a developer come in, code a specific section for that. So we were still able to provide a lot of that functionality. It's just something that you definitely needed a developer to do. So with this new update to 2.0, we talked about app support. We've got this option here for a richer content using dynamic sources. And again, this dynamic sources is basically we're just talking about meta fields. And so we'll cover what that looks like here real fast as well.
(33:54):Yeah. They do a really great walkthrough. Here's an example about if a candle seller wants to display different burn times based on different types of candle and those sorts of things. You can do all that fun stuff. So there's a bunch of other information in here about a caution and tips and stuff like that for theme documentation. So make sure to read through that. But for now, let's just do a little bit of a demonstration piece.
(34:16): So if you go to your store, whether you have a Vintage theme store or you have an online store 2.0 store with a theme using that, down on the bottom left you're going to see settings. Ah, sorry, folks. You can't see that because of how I chose to do that. I'm going to move this real quick. So this little settings button down here, if you click on that, that's going to pop up your screen there. It's back over here. Sorry. And so you're going to get all this information here. This is just a general information. There's my home address, so if you want to send me a postcard. I'm going to be moving soon anyways.
(34:55): But here on this section we have meta fields. And so whether your store is using 2.0 or not, you'll have access to meta fields. And so let's go ahead and try that. The difference will be just depending on whether or not you actually have access to it within your theme. So there's a couple of different ways that I want to maybe showcase or feature this. And so what we would probably want to do is maybe include something on the product pages. I use product pages a lot because that's where our customization is really going to come into play. I know a lot of folks typically when we are making a lot of updates, it's specifically for the product pages because that's where purchase decisions happen, right?
(35:35): And so we're just going to put something really specific here. You go to this product meta field definition and you can do this namespace and key description, all this fun stuff. It might be a little bit confusing, but the biggest thing, you just name it, Shopify is going to figure that part out for you, and we'll kind of go from there. So since we're doing a tea store, maybe we want to do something like things that are caffeinated and not caffeinated. Oops. I probably should have... I don't even know if's the right way to spell it. So it will give you suggestions. I'm sorry. I did that pretty quick. It will give you some suggestions for standard definitions and settings for you. Those are just for some really common things that are available.
(36:22): Another one might be... ingredients. So that might be another common one as well. We'll do that now instead, because I don't want to try to mess with spelling caffeine even though I've already done it. So you know if I already am a terrible speller. So you can see here it already named this for us down here. So you don't need to worry about that. So include key ingredients for tea. This description is just like a helper text. This is for you or for maybe your team so that way you can kind of remember down the road where to update this information. I'm going to use just text and single line text because this is really, really easy and simple. We're going to leave this alone just as is. You can include some additional information, but for the purpose of today's demonstration, again, this is just real simple kind of type stuff. So we're going to go ahead, make sure you hit save. And we now have a product meta field definition for ingredients.
(37:22): So that's fine and all, but what does that even mean, right? So now if we go over, I exited out of my settings, I'm going to go over to products.let's pick the Blackberry iced tea just because it's kind of close to the top and it also sounds delicious. So you can see here we've got your standard information, right? So thank you again Southern Breeze for letting me use this stuff just so that way it wasn't like the standard Shopify stuff that I'm using. And so I'm going to scroll down all the way to the bottom. And now you can see that we have a meta field value for ingredients. So let's go ahead and throw this in. And then we're going to click safe. So again, this is the same thing as updating a product, just ingredients, Blackberry. Okay. Easy enough, right?
(38:20): So we can kind of do the same thing. We want Orange iced tea. This is another popular one. I think I tried this one. I think this one's pretty good. Made of this real tea leaves, all this fun stuff or whatever. You can see here... Let's pull up Hibiscus out of here. So let's go to ingredients. We'll do Hibiscus. I didn't use standard definitions here for capitalizing and not capitalizing things. And so, oh, well, sorry about that. And so now we'll go back into our store. We're already on the Blackberry ice tea. So let's pull out some information here. We're going to get rid of some of this extra stuff because we really don't need it. And I want to show what this looks like from the get go. I'm going to go ahead and remove some of these things like dimensions, blocks and care instructions. These are all things that would be great to include as Rich support here for the dynamic sources, Rich support. So we're going to go over here. We're going to do text. I'm just going to go ahead and put this right here.
Dynamic Source
(39:30): And so instead of text block, what we can do is we can insert a dynamic source from here. Again, the important thing here is this is the meta field value that we're going to be pulling in. Look at that. We have ingredients available to us on this page. So we can do ingredients. Insert. And then we'll go ahead and... Oops, we can't really see it. Sorry. Let's pull it up here underneath buy buttons. And there we go. Now obviously, we want it to look a little bit nicer than this probably. I didn't do a good job by including that. You can do all sorts of stuff here to make this look prettier, right? We can go ahead and pick a different product because you want to... This is the big thing, right? We're changing a template, but we want to make sure that the template is different per different product items.
(40:23): So let's go to the load Orange because that's the other product that we did? Oh no. Apparently I can't spell or something. I can't remember if I updated a different product here now. Oh I think... Sorry, folks. Yeah, I didn't set that. Sorry. I set it to draft. All right. I'm going to go ahead and just do a quick refresh. We went ahead and save so we'll still have Blackberry down here. So we've got Blackberry down here. We want to change the specific product. Let's search for load Orange again. It's not wanting to do that for me here.
(41:39): Well, let's pick a different one. Now I have had this, and this is awesome. So you can see here we're using this template and it's not showing up now. We don't have Blackberry directly underneath the Buy now button. So that's something that's helpful to know, right? Sorry, folks. I'm going to try to... Oops. This is always the downside of doing something live, right? I am needing to keep an eye on time because I'm probably taking a little bit too long with this. Let's do this. I just really want y'all to see it. So we'll do a refresh here. Sometimes same thing. When we're doing a development store, some of that stuff it runs a little bit on the slow side. So I might have to bounce out of this to try to just make sure I hit filters here. Let's just take just a minute here.
(42:52): If not, we'll go ahead and we'll try it up... Ah, there we go. So lemons there. I probably shouldn't made it bigger too. That's not helpful. So lemons there. It wasn't showing up before when we didn't have the dynamic source. It's already just not showing up that type of thing. So again, super helpful. What I would typically also do is I'd create probably a title for this and then that way we can insert it dynamically as well. And then it's really helpful if you want to be able to include this in different sections. So again, just something that you can do to kind of help extend that piece of functionality.
(43:23): Okay. So we did talk about these other items. And real quick, I've got a couple minutes here, just this allowing customers to filter collections based on store by availability price and more. Oh, I did want to show just real fast. So in that Debut page, you can see here, we're going to go to products real quick. Let's see default products so I can show this up real fast. So you can see here we don't have any ability to extend the functionality of that at all, where we included a specific ingredients. But if we wanted to, instead what we can do, let's go ahead and go to the updated template. So you can see here that we can indeed change this information. Let's pull this rich text up to the top here. And so now instead of talk about your brand, we can insert that dynamic source for ingredients. Or here. Maybe we would just want to say ingredients.
(44:26): But again, this is where you'd want to include that as a dynamic source, because Shopify is really smart about how they handle this, where if it's empty it's not going to display kind of type thing. And so just something to be aware of. So let's change this real quick, the Blackberry ice tea. And there we go. So again, we've extended that functionality because we made this at 2.0 template. It's not available on the default, but we do have this functionality available to us even though it's a Vintage theme if we've extended that to there. Cool. Okay. And I just got my reminder that it's only 15 minutes left, so I may need to kind of hustle here a little bit.
Collection Filtering
(45:07): But real fast, we talked about this, allowing people to filter based on store ability, price and more. So the current store, we've got this automatically built in. These are specific things that you can do to enable searching, tag filtering. So that's how we used to do it before. Now if you're on 2.0, we can actually extend that. And I'm going to do this here rather than create a new template for the Vintage theme and stuff. We can extend this template to include some additional filtering options that don't just include what we had via tags before, right?
(45:47): And so the way to go about doing that is if you go to your navigation and then you can see down here where we have our menus, now we also have the option for collection and search filters here. If you want to add some specific filters, you can get in here and you can actually add... Oh, Hey, we can sort by the meta fields of ingredients for products that we create earlier. So there's some additional options that you can do in here as well kind of type thing. But the biggest thing that I want to show off is that we can do that based on meta fields.
(46:17): So again, you can do this... I'm doing this in another store where we're going to do it based on the skill level required to build these custom like Lego builds. And then we're also going to do pieces and stuff like that so people that only want to get involved in specific things where it's not super complicated or something like that, that's something that we can do there. So I went ahead and just added this. So before, we just had availability of price. And now we have ingredients, which is the unique meta field value that we created just a little bit ago. See how long this takes to update on a dev store here. Here we go. And you can see here... I didn't do a good job. We can go back and change that if we need to. But we can now see, oh, all the ones that have the ingredients for Blackberry.
(47:04): So it's important to know that this is obviously only as smart to as the information that you feed into it. So basically what that means is, if you don't include all of the list of ingredients and stuff like that, even if it does have it, it's not obviously going to be smart enough to know that. We have to include that specifically in your dashboard for that product. So if we go into products... Again, sorry, excuse me. Oh, I made it active and then I didn't even include a sales channel. That's why. Look at that. Rude. And now we'll have Hibiscus available once all that fun stuff updates here. So you can see how quick that is to just kind of go in and add stuff. You can have staff do this as well. It's something that you don't need to be a developer to do.
(47:54): Obviously with some of the stuff that I did were kind of dropped in and made some updates to extend the theme, that's something you probably would need a developer to do, but at least the documentation is there and available for you to do that as well. We're going to need to... I think this is taking its sweet time here. There we go. Now we've got Hibiscus. And there you go. So you can see how this makes things super simple. We touched a little bit of code. And so again, you could do that as a store owner if you wanted to. Let me show you real quick. But again, the biggest functionality that you're looking at, you can see here if we go into collections now, we don't have the option to do anything with this default collection. Right? But because we created a product template on 2.0, we can now create templates specifically for 2.0. So as long as you have one, you can create additional templates and it's going to be based on this template. So updated two.
(49:06): So again, as long as you work with a developer or you work to get it working yourself or something like that with some of the tools that we talked about today, you're going to be able to extend that functionality and create some additional templates without having to touch code very simply there. So again, here's our new templates and again, Shopify allows you to have up to a thousand.
Closing Thoughts
(49:28): So yeah. Okay. I think that does it kind of for the presentation portion of things. I know we don't have a ton of people who made all the way to the end there. Maybe some people are just interested in doing the sections everywhere, what that looks like. So if anybody has any questions, feel free to drop those into the chat. I'd be happy to answer any kind of specific questions you have about 2.0. We kind of just covered these specific items for the big features to make sure that we covered all of those pieces. But if you have any other questions about 2.0, dynamic sources, sections everywhere, filtering, I'd be happy to answer there if there's anything there.
(50:14): Cool. Okay. So real quick. For dev docs, I'll throw that in there for the JSON templates. That's basically where you get to that information and that kind of gives you kind of the filler piece to that. Again, if you're not a developer or you're not comfortable with JSON architecture, I probably wouldn't mess with that at all. That's something that's, like I said, is pretty easy to break.
(50:53): And at worst case scenario, if you do try this on your own, please go ahead and make sure that you work out of a duplicated thing. That's as easy as going to your online store where your themes are and then just hitting duplicate here. And then when you make those updates, go ahead and make it out of this copy of your live theme that you did. Don't work out of the actual live theme. Make sure it looks good on the duplicated theme before you publish it to live. That's going to save you a ton of headaches down the road to where you're going to end up having to call somebody to come in and fix it and stuff. Because then after it's done, say you make your updates, you can just publish from there and that copy becomes your live theme.
(51:33): So yeah, I don't think that there are any questions at least that I can see, which is great. Maybe that means I covered everything or it means that's just not something that we need necessarily. All right. If anybody needs additional support or anything like that on their store or anything like that, I do a free 30 minute consultation with everybody. So that way if I can be helpful in 30 minutes and stuff like that, it doesn't end up costing you anything.
(52:09): So just something to check out. I also have a survey available as well that's going to play after this. It's just trpage.info/webinarsurvey. Lindsay, if you could drop that in the chat, that'd be awesome. And so yeah, feel free to reach out if I can be of help. I will kind of stick around to check things out in the chat and just leave up just kind of like an end screen here. But if anybody has anything for the end here, definitely feel free to give me a shout. So thank you for your time today. I really appreciate it.
Resources
Learn the differences between free Shopify themes, third-party themes, and vintage themes
Ecommerce Website Templates - Free and Premium Themes for Your Online Store
Add Apps Built to Integrate Seamlessly With Online Store 2.0 Through App Blocks and App Embeds