w/ Trudy MacNabb, Up at Five & Design Packs
"Which theme should I use for a store that sells..." is a common question from Shopify merchants. With 97 themes currently in the Shopify Theme Store, thousands mores floating around the web, and very few of them made to the same standard, what's the right answer? How do you go about picking a theme? What about custom themes? That adds infinite variability.
To discuss it, we're joined by Cofounder of Up at Five & Design Packs, Trudy MacNabb. She's run her Shopify agency Up at Five for seven years, and has worked with clients such as WWF, Canada Learning Code, and Jenny Bird. She has a deep knowledge of both front-end and back-end development (she used to be a mainframe developer!) and is a driving force behind the Shopify app Design Packs.
The Unofficial Shopify Podcast
Kurt Elster: One of the most common questions I see from merchants is which theme should I use, and this usually comes in the form of like, “Hey, which theme should I use for,” and then they’ll define kind of like what their niche, their vertical, their space is. They’re like, “What theme should I use for a lifestyle apparel brand that only sells sleeveless t-shirts?” They’ll be very specific in what the brand is and then, “Hey, well, which theme should I use?” And I have my own feelings on that, and really it’s like, well, the theme is a lot of window dressing, and it’s a tool, and you want your tools to work and be reliable, and so I say like, “Look, just get a theme from a trusted developer and you can’t go wrong.”
But certainly, having done this for many years, there’s a nuance to it. There are things we look for. And there’s a lot of opinions and preferences and supposed best practices. And so, in today’s show I’m going to be joined by a fellow Shopify agency owner who develops custom themes in a similar fashion as us and has been doing it for about as long as us, and so I think this will be a really good conversation to pick someone else’s brain and figure out, “Okay, what are the approaches to themes?” So, if you’ve ever thought to yourself, “Well, which theme should I use and should I use a custom theme, a free theme, a premium theme? What are my options here? What is my path forward?” That is what my guest today and I will be discussing.
And so, I’m joined today by Trudy MacNabb from Up at Five, and Up at Five is a Shopify agency she’s been running for seven years now, and she’s worked with WWF, Canada Learning Code, Jennybird and more, and she has a deep understanding of frontend and backend development for not just Shopify themes, but the web in general. She’s even a mainframe developer. Oh my gosh. And also has a Shopify app, Design Packs, that is entirely theme related, so we’re certainly joined by someone who has quite domain expertise here to help us out.
But first, I’m your host, Kurt Elster.
Ezra Firestone Sound Board Clip: Tech Nasty!
Kurt Elster: And this is The Unofficial Shopify Podcast. Trudy, welcome. How you doing?
Trudy MacNabb: Hello. I’m well. How are you?
Kurt Elster: All right. You’re a Shopify partner, right?
Trudy MacNabb: Mm-hmm.
Kurt Elster: And you’ve been doing that seven years?
Trudy MacNabb: Yep. Seven years.
Kurt Elster: So, what is the number one right thing, be all, end all theme, one answer only, just pick a theme. Go. That’s what people want to know. They’re like, “Just what’s the right theme?” Is that question problematic?
Trudy MacNabb: That is problematic. I think… I mean, I don’t think there’s any right answer. I think I switch my answer every time I use a theme. So, I say pick it for the product page. What product page you like, pick it. Specifically speaking, the product carousel. That is the most difficult to change. And then go for the mega menu, whatever mega menu you like, and then the slide out cart. Those are the three things. Everything else can be changed.
Kurt Elster: I will say you’re right. When we have had to customize themes, if it’s like, “Oh, we have to change functionally how the light box…,” so like the image view or the media viewer that’s on the product page, that… Oftentimes, it’s like, “Well, we may as well just give up and write it over from scratch.” And then that can create… That casts issues elsewhere, unforeseen, but it’s like, “All right, not my favorite thing to do.” And it can make the theme fragile.
The other, the one that I 100% agree with is the drawer cart. If you have to mess with a cart, the drawer cart, mini cart, whatever it is, that’s where things start to get a little weird.
Trudy MacNabb: It’s true. Some styling you can do, like some just CSS styling you can do, but when you get into changing the functionality of that slide out cart, it gets messy.
Kurt Elster: All right, so we’re already into some good advice from theme development veterans, so number one is like certain layouts and features are more… I say fragile as in like just because you can do it doesn’t mean it’s going to be necessarily reliable. And all right, so like the lightbox on a product page can make trouble. For sure, changing how drawer carts function, because it’s like this… A, it’s a mission critical piece, right? If I can’t get through the cart, I’m not buying. And there’s a fair amount of AJAX functionality in there, and that is also what kind of makes it weird.
But you’re like, “All right, styling, we have to separate style and functionality.” So, it’s like style, content, function.
Trudy MacNabb: Yes.
Kurt Elster: Function is where you get yourself into trouble.
Trudy MacNabb: Yes. Because these things permeate through the whole theme and yeah, you are right. The slide out carts, because they’re built primarily with JavaScript, the lightboxes on the product page, these things are functionality. And the product page is also the style. It’s hard to change the style. If you want to go from certain types of like a slider, to gallery style with thumbnails, that can… Sometimes, the themes will give you both options, but if you have to start messing with that it does make it fragile because… Especially with mobile, and you want your mobile to be particular… That’s another thing. Definitely I would suggest merchants look at the mobile version before they make a decision.
Kurt Elster: It’s funny how I can look at my analytics all day. We all look at our analytics. I know people… They do the real time view on the analytics, which… That’s the quickest path to madness. But our analytics, your analytics are gonna say, “Hey, you’ve got 85% of people are on mobile.” That would be low. 90% of people on mobile, more typical. 95%, all right, you’re skewing toward gen Z. And yet, as web professionals, which is what an eCommerce merchant is, and ourselves included, we’re like super pros, so I got my desktop, my external monitor, I got my mechanical keyboard sitting, I’ve got all the stuff that my users are never using and that’s how I view the web. It’s such an easy mistake and trap to fall into.
Trudy MacNabb: Yeah.
Kurt Elster: My new year’s resolution was like, “I’m gonna do everything on mobile.” And by like June, I had to start reminding myself again, right? Should we even be looking at desktop anymore?
Trudy MacNabb: Almost no. Yeah, that is one of the things, and I especially… I don’t do design, so I’m working with a lot of external designers, and the client, the designers, and us, as well… Yeah. We do fall into that trap of looking on desktop and making really custom things that look great on desktop and then you’re kind of like, “Well, how are we gonna pull this off on mobile?” And all of the interesting design elements sometimes just disappear, and we should really be doing design, like mobile-first design, to make it still interesting on mobile.
Kurt Elster: Absolutely. I find you get creative solutions when you have constraints, and mobile gives us the most constraints because it’s like, all right, it’s single column, and your input device is a thumb. Have fun. It really changes and simplifies things. But it also puts a lot of constraints on it. And so, then, all right, once you have that, can you translate that to desktop? Well, all right, getting it to work on desktop if it works on mobile, usually easier than going the other way around.
Trudy MacNabb: It’s true. Because people a lot of the times forget that you can’t have hover effects on mobile, so they’ll create these elaborate hover effects that work on desktop that are like showcasing the product very nicely, and then we’ll get to mobile and we’re like, “Okay, well, what are we doing here?” Because that hover effect is no longer an option.
Kurt Elster: The answer is all that stuff goes away because it was just… I don’t know. Novelty? Gimmick? To begin with. It’s cool and then you very quickly get bored or annoyed with it.
Trudy MacNabb: You want to focus on the path to purchase more, like that, when you’re focusing on looking at a theme, it’s like path to purchase and functionality and mobile, but most people are sort of… or a lot of people will kind of get distracted by fancy little animations and things, which are nice. They give a sleek view. But shouldn’t be your primary focus when looking for a theme.
I think the cart also, like the product gallery on mobile and everything, is also really good to look at. Because that’s like where you’re showcasing off your product the most.
Kurt Elster: So, if I spin up my Shopify store, it comes with a theme installed. Dawn. Dawn, which is like the cornerstone of the theme universe because it’s like this is your default base. This is how Shopify says is the right way to do things. And when you follow the right way to do things, well, suddenly all these other features, and even features coming down the pipeline that you didn’t necessarily know about, will often just be more readily available, work the way they were intended.
Why not just keep it simple, stupid, and just stick with the theme they handed to me that is made by the mothership and guaranteed to work right?
Trudy MacNabb: It’s true. You know what? I’m actually quite a fan of Dawn. I think it works great. I think they made it very developer friendly, so from my perspective breaking into the JavaScript is quite simple. So, I think Dawn is not a bad place to start, especially if you don’t know what to do. The thing that you’re not gonna get is all the premium features.
Kurt Elster: Fast, simple, easy to use, easy to pick up, but the way you got to that place was it’s stripped down. It just doesn’t have… Compared to the other themes that I might pay 300 bucks for; it’s not going to have the same level of features and functionality. Any examples off the top of your head?
Trudy MacNabb: Well, so I’m trying to remember exactly what’s in Dawn. I think… So, the free shipping banner probably isn’t included with all of the functionality that you would get in a premium theme. But I’m not 100% sure, because I feel like Dawn keeps updating, too.
Kurt Elster: That’s true. And you got the theme updater now in the Shopify theme editor, and if you’re on Dawn and you have not cut it up in some way, the theme updater will just work. It’s very cool.
Trudy MacNabb: One of the biggest problems before with Dawn was it didn’t have a mega menu. I believe they’ve come out with a mega menu, which is probably still not as good as the premium theme mega menus. The slide out carts, like oftentimes they’ll have a lot of features, like a shipping calculator feature and stuff, like they’ll have a lot more features in the slide out carts for premium themes. And often things, you can get these with apps, but then you end up spending $10 on this app, $10 on that app, and it adds up quite a bit. So, usually the premium themes are probably worth it.
Kurt Elster: Yeah. It’s easy to go like, “All right, I go Dawn, which is free, and it’s there. I didn’t have to do anything.” There are other free themes, which I would imagine are mostly like these are forks of Dawn.
Trudy MacNabb: Yeah.
Kurt Elster: Don’t quote me on that. And then we jump to the premium themes where we’re gonna pay… I would say like 300 is a fairly… 200 to 400 is the range. We’re just gonna say like about 300 is where you want to put that budget line item. So, I’ve got… I can start with Dawn, and if you have never messed with a Shopify store, you don’t know what you’re doing, don’t make yourself crazy I think by trying to use other themes. If you start with Dawn, the simplicity of it makes it much easier to get up to speed with. And then when you start to feel limited by it, you’ll know it’s time. Okay, I’m ready to jump to the next thing. As opposed to if I’m going to start with the Ferrari and I’m gonna learn to drive on that, if I’m starting learning to drive stick in a Ferrari, you’re not going to have a good time, right?
You want the student driver car. That’s what Dawn is. It is our very reliable Toyota Corolla.
Trudy MacNabb: It’s true. I’ve had people come who don’t have any stores whatsoever and want a fully custom theme and I talk them off the ledge. I’m like, “Start with something. Test out your product first and find out what you actually need before you start paying for a fully custom theme.”
Kurt Elster: And I get why people think that’s the way to go, but I think the larger issue is you don’t know what you don’t know. And so, to throw all this money into a custom theme, because getting a custom theme designed and developed is going to cost you tens of thousands of dollars, potentially. 20, 30, 50, those are not unusual prices to pay. And if you’ve not just played with the free versions or the premium versions at a fraction of that… You’re gonna learn a lot of lessons in a very expensive fashion.
Trudy MacNabb: I think restraint in terms of like how much you’re spending is sometimes difficult, or what you want. People want everything 100% right out the gate and I’m like, “Start slow. Get the free theme. Then a paid theme.” Once you know 100%-
Kurt Elster: Yeah. There’s like a progression here that really, it helps you learn, but it helps you figure out what you do and don’t want. All right, I go from Dawn. I’ve got the other free themes, which I rarely mess with. They’re fine. I used to use them regularly. And they’ll be similar to Dawn in terms of scope and features, but really styling has changed. One of the things I like about Dawn, quite unstyled. Quite unopinionated in its look. It’s like this is just straight utilitarian functionality. If that’s what you’re looking for, it’s awesome.
Then we move to we got our other free themes, which the functionality doesn’t really change, but the look changes. And so, if you find one that’s got a product page, a cart that looks the way you want, fabulous. And then when I start feeling limited by that, I’m gonna start looking at premium themes. And premium themes… All right, I pay a few hundred bucks for it. Same deal. It’s available in the Shopify app store. Or sorry, Shopify theme store. What do you look for in those? Do you have a few favorites?
Trudy MacNabb: Because I can’t look at the code until I purchase it, that’s sort of a limiting factor sometimes. One thing Anne has recommended to me was Focal, because she says that the code in the backend is very developer friendly. I’m mostly looking like what does the client and what’s the thing that they’re gonna want, or what does their product facilitate requiring, and then again, just look at the product page and be like, “Is this gonna fulfill the requirement and their design requirements?” And everything else can be rebuilt. All of the homepage can be rebuilt. The mega menu can be rebuilt, but I find it to be also-
Kurt Elster: It’s painful.
Trudy MacNabb: … questionable. Yeah.
Kurt Elster: Well, because the mega menu both… Rebuilding it can be tough. But then it really is an intense amount of theme settings, like sections and blocks if it’s Online Store 2.0 to make that thing work right. And so, the complexity of a mega menu once you have to make it like they’re a no-code solution where any person can just use the theme editor, drag and drop, that’s a tall order to get right.
Trudy MacNabb: Yeah. So, generally I pick probably three to five themes. Maybe less, depends. And give it to my client and then ask them what they like. But then I’ll have a meeting and be like, “What do you like about it?” And if they just pick some random section that I could just build really quickly, I’m like, “Don’t worry about that. Focus on these aspects of what you’re looking for and then everything else can be done.” But yeah, mega menu, slide out cart, product page, I think those are things to focus on. I try to focus my clients and not let them get too distracted because sections… Well, now with online 2.0, I feel like it’s just made my life a million times easier.
Kurt Elster: So, on our premium themes, it’s the same deal as shopping for the free theme, but I know I’m gonna get more out of it. As far as development goes, there’s trusted developers, like I know you mentioned Anne Thomas likes Maestrooo’s Focal a lot. We’ve used that for a bunch of custom themes this year, including oVertone Haircare, and I would agree with her assessment. Really solid as a premium theme but also fabulous to develop custom themes on.
And the other one we’ve used this year for a couple projects, Out of the Sandbox’s Turbo, which like… That changed how we looked at custom themes. We’re like, “Oh, this makes life much easier.” That was years ago. And so, now it’s nice because there are other themes that are equally well coded as that one. But I think-
Trudy MacNabb: Yeah, that’s true. I’m a big fan of Flex, as well.
Kurt Elster: Oh yeah. Yeah. Can’t leave Flex out in the cold. Flex is good too. And really took that… Was aimed at hey, you’re an agency building, turning premium themes into custom themes. Flex was built with that idea in mind where Turbo was not necessarily. That just happened to be what we were using it for at the time.
When I’m shopping for themes, I can get them from the Shopify theme store, where they go through a vetting process that is just brutal, like you have to work the minefield to get through that. They are highly selective. Or I can go to ThemeForest that will take any old garbage and sell it. What’s the right answer?
Trudy MacNabb: Always trusted. I mean, I never like to throw developers under the bus because people work under constraints, so when I look at code and it’s not that great, I’m like, “I understand what was happening here,” or something. But a designer friend of mine was working with a theme that they… I don’t know where they bought it, but they asked me to make some slight changes, and I wanted to pull my hair out. It was crazy and I was like, “Never use this theme again.”
Kurt Elster: It was like Template Monster stuff.
Trudy MacNabb: Yeah. It was just like go, just pay the 300 bucks, or use Dawn, but just don’t. I mean, I’m sure there’s some good themes out there, but you don’t know, and if you can’t really see the code until you’ve purchased it, it’s a little bit dangerous. But I’ve seen some hot messes out there.
Kurt Elster: Well, and sometimes you’ll get a case where it’s like, “Well, this was clearly a theme that started life elsewhere, like this was WordPress theme and then someone chopped it up and through force of will and dark magic got it to work in the Shopify theme editor. But really, this is not what it was intended for.” You figure it out real quick. Or the person is an experienced theme developer but doesn’t have Shopify theme experience, so it just starts making weird choices.
Trudy MacNabb: Yeah. In terms of that, one time I saw a custom theme that was built, everything was built in the index, and it just was like, “If page = product, if page = this.” I was like what is happening?
Kurt Elster: That would be good for load time. Get that time to first byte, really jack that up. Fail Core Web Vitals promptly.
Trudy MacNabb: Yeah, so I mean definitely stick with either… I mean, when Out of the Sandbox was selling a few themes outside of the theme store, they’re trusted.
Kurt Elster: They’re a trusted developer, though. It’s like the developer has themes in the Shopify theme store. So, they get a pass.
Trudy MacNabb: But just ThemeForest or any old theme, unless you really know what you’re doing or you know something particular, you’ve experienced it before, I would stay away.
Kurt Elster: Yeah. And there are legitimate themes in there, but at the same time you don’t know what you’re getting yourself into, and most of them really… There are gonna be some tradeoffs. And for sure, we’ve done some Template Monster themes. I was like, “I’m amazed this works at all.”
Trudy MacNabb: Yeah. Yeah.
Kurt Elster: So, just save yourself the heartache and stick to the Shopify theme store or developers that sell on the theme store. So, all right, I’ve got free theme, I’ve got premium theme, I’ve got the specter of third party themes, which… Don’t go there. And then, on top of that, we have custom theme. What is a custom theme? How are we defining that?
Trudy MacNabb: Okay, so a custom theme is something that you get designed and developed specifically for your store alone by a developer.
Kurt Elster: And does that start… When we say that, so it’s like they have a blank slate. They open up their text editor of choice, just clean slate, blank blinking cursor, and they just start typing. They’re like, “All right, theme.exe. Go.” And boom, custom theme? Are we writing the whole thing from scratch? What are we doing?
Trudy MacNabb: Well, okay. So, I previously… Well, I think I started off using Timber back in the day as my-
Kurt Elster: Timber. Oh my gosh.
Trudy MacNabb: … as my starter theme, which then we moved to Slate. I don’t know if there was something between Timber and Slate. But Slate is what-
Kurt Elster: Wasn’t there Skeleton?
Trudy MacNabb: Oh, Skeleton. Yes.
Kurt Elster: I think it was like, “All right, if Timber has too much, there’s Skeleton.”
Trudy MacNabb: Yes, because Timber was very sort of design opinionated, or a little too design opinionated for people. Skeleton, for the most part I used Slate, which was very design unopinionated, but still had I guess like the basics out of the box. It also had compilers, which I liked at the time, because I was integrating a lot of React into just particular pages. And that came out of the box with Slate.
So, yeah, also probably a lot of agencies have their own starter theme. I think nobody likes to start anything from scratch. But yeah, so there’s sort of like the universal, but I’ve been using Slate. I’m not using Slate anymore because they’re no longer supported, and although some people have made hacks, I’m a little bit nervous about it, so I stopped using Slate as my starter theme.
Kurt Elster: Our approach to custom themes… I mean, we used to use Skeleton and Slate. And then eventually figured out you could just take a good premium theme that you like and cut that up, and then you end up keeping all these bonus templates and features, and now today sections that you would have otherwise had to either drop, which is often if you’re going from scratch what happens, or just have never included at all. And so, it’s nice to be able to not do that work and have all these. You know you’re starting with a theme that says, “This has everything,” and now we’re gonna chop it up to make it look the way we want. With the tradeoff being like, “All right, the theme developer can no longer…” The original theme developer cannot and should not support it, and a theme updater is going to hurl if you try and make it update it.
Trudy MacNabb: It’s true. So, that’s what I’ve been doing now. Since 2.0, and I gave up on Slate, I’ve actually just been doing that, like premium themes, or Dawn in some cases, and then just customizing it fully from there. I also, with the GitHub integration, it’s made it a lot easier, as well, just the whole flow of everything. But yeah, so I’ve moved from more or less straight sort of more custom, or I’m building everything from scratch, to starting with the theme and then customizing it from there. And we do a lot, like the custom… It’s custom in the sense that it’s completely unrecognizable from the original theme, like there’s a lot of customizations, but it’s still based on a theme.
I’m also using my own app, Design Packs, as well, and that’s making my life a lot easier.
Kurt Elster: All right. I want to hear. You mentioned Online Store 2.0. You mentioned Design Packs, which really, like Online Store 2.0 makes Design Packs work as well as it does. But for people who aren’t familiar, and I still… Even though Online Store 2.0 really took off this year, people don’t necessarily know what it is or know what the difference is. So, what’s going on there with OS 2.0? I know my OS 2.0 themes are way faster. What else?
Trudy MacNabb: Yeah, so I think from a merchant perspective it’s way easier to manage themselves, which again, my philosophy is I like to build something that the merchant can just take and manage themselves and they don’t have to come back to me for too much.
So, the biggest and most probably obvious difference for them is that every page now kind of works like the homepage, where you can just add any section from the theme, and drag and drop it, and control it like you can the homepage, so that’s the sections everywhere part of 2.0, which I think is like the biggest win maybe for everybody, but definitely the merchants.
Kurt Elster: Yeah. Having-
Trudy MacNabb: Oh, I was gonna say the other thing with that is that you can make page templates and then in the theme editor yourself, just create new templates based on those existing ones. So, again, that’s a huge win for the merchant because they no longer have to get a developer to do this. They can just go in and do it themselves pretty easily.
Kurt Elster: It’s a no code solution. So, in the past, so the individual components of a page that I wanted to pick, it’s like, “This is the carousel. This is the FAQ. This is my logo slide show.” Whatever the heck. Those were written into and part of each page, so it’s like the homepage had its own sections. The contact page had its own sections. That is no longer the case. Now, in an Online Store 2.0 theme, we changed the structure of how they’re written, and the result is the themes load faster and going from OS1 to OS2, when I switch between two stores that should be similar, OS2 is now noticeably faster to me. So, boom, and everyone’s concerned about speed. Slow site doesn’t help, fast site doesn’t hurt. And so, all right, I like that as my immediate win. And then now if a section is available on the homepage, I could use it on a product page. I can use it wherever. They just exist throughout. And apps can write into and add sections, so no longer… I’m just doing a lot less code work in general, either myself or paying for it.
And then you’re right. In the past, they would be like, “All right, here’s your FAQ template.” Well, what if I had more than one FAQ page? I have to duplicate the template with different names, so that’s I gotta do a little bit of code. I have to know enough to be dangerous. Now I can apply it. Now, I can do all of… Everything can happen in the theme editor, which makes life way better, way easier.
It took some time for themes and developers to catch up to this is the OS2 functionality and we understand it, and implement, and it works. For sure, I think everybody is there, so if you’re still on that OS1.0 theme and you’re happy with it, fine. But if you’re looking for an excuse to upgrade, it’s already here. It’s happened.
Trudy MacNabb: One thing to note too is that you can actually just start getting the functionality of 2.0 in your 1.0 theme. You can just add a .json template to your theme and then start using in your 1.0 theme, and it’ll work just like 2.0.
Kurt Elster: So, I had seen that when you make a template it’ll go, “Is this Liquid or .json?” I’m like, “Okay. Well, that’s interesting.” What happens if I mix these two? And I don’t think I’ve ever done it. But so, they’ll just… You can mix and match?
Trudy MacNabb: Well, the advantage is that you can get the 2.0 functionality, but you don’t have to update your whole theme immediately. Especially right now, when we’re going into BFCM time, maybe making a whole overhaul is too time consuming. You’re not gonna get it done in time. So, you can maybe start making some landing pages, or updating your about page, or doing certain things right now without having to fully make changes, like fully commit to making a whole theme change.
Kurt Elster: I didn’t even realize that this was an option. I mean, I guess I did. I was like, “I’m not gonna attempt this.”
Trudy MacNabb: Yeah. Well, so we started, I love playing with things, like as soon as something comes out I’m like, “What can we do with this?” So-
Kurt Elster: Where was I going? Have you ever done any headless builds?
Trudy MacNabb: I have done a few and I’ve played around with it on my own. I’m not the biggest fan of headless.
Kurt Elster: That’s damning. Damning praise at best. Just say you don’t like it. It’s fine. It has its place, but I haven’t… I’ve yet to actually run into one of those instances. And we moved a store off headless back onto Shopify.
Trudy MacNabb: So, I think first and foremost, if you’re gonna go headless you kind of probably want to have a developer in house, at least to manage it. Because I think what you’re really losing with headless is the ability for the merchant to just go in and make changes on the fly in the editor easily. So, that’s my biggest issue with it, is like it’s not very manageable for the merchant after the fact.
Kurt Elster: Yeah. I’d agree with that one. All right, headless, not a big fan, and don’t do it unless you’ve got access to a theme developer. Not even a theme developer, a developer full time. You need your own staff at that point. And some people do it. They can support it. And they’ve got some special functionality that requires it. But at the same time, if you were ready for that, you absolutely would not be listening to this conversation. That’s just-
Trudy MacNabb: Yeah.
Kurt Elster: You would have moved well beyond us. I got free theme, premium theme, custom theme. What are the tradeoffs between those three?
Trudy MacNabb: Okay, so the free, obviously, free is the biggest selling point. The best place to start if you’re just starting off. You don’t necessarily want to make a huge investment. You kind of want to play around, find out what you can do, find out what you need, and start there, so that’s the pro of the free. The con is obviously it has the least amount of features and it’s not gonna be… You know, you’re kind of getting the out of the box what everybody else has.
The premium is you’re getting a very flexible theme, most likely, that’s out of the box gonna have a lot of features and is gonna be a great choice for many people, and they’re quite flexible because they’ve been built for every situation. A premium theme is built for you to just be able to use. Whatever products you have, whatever images you have, they have options to set up.
The thing with the custom theme is that what you’re gonna get is exactly what you want. You’re gonna get the exact design you want. You’re gonna get the exact features you want. It’s not gonna be as flexible because you’re just… It’s being built for exactly what you want and nothing more. And so, it’s often gonna rely on… It’s only gonna look good if you have the exact images that the designer decided, like the exact image ratios. It's gonna be very specific. It’s not gonna be as flexible to change.
And yeah, it’s gonna be built with sections, so you can add sections, but the options within the theme aren’t gonna be as flexible. Oftentimes, I won’t necessarily give them color options either if it’s… Especially designers like things to be exactly. They don’t want to give the client a lot of options too.
Kurt Elster: Yeah. They’re like, “Look, we got it right the first time. You don’t need to fiddle with it, all right?”
Trudy MacNabb: Yeah. Yeah. So, it’s less flexible. Custom themes are less flexible but more exactly what you want, so they’re the perfect option for when you’ve been selling and you know exactly what you want, and you have a recognized brand, and you want your store to be 100% that brand. I’m kind of like now into the hybrid, where it’s like premium theme plus custom.
Kurt Elster: Me too. It’s like you get the best of everything.
Trudy MacNabb: Yeah. And also, instead of headless, if somebody needs something I’ll do a little single page application page. I’m now a huge… I used to use React a little bit more, but now I’m just sort of straight in Vue.js to make a single application, or like a single page application, and just one page of the store.
Kurt Elster: So, tell me about… You’ve done a lot of advanced theme customization, where you’re pushing the envelope using things like Vue and React. Give me a few examples. I’m curious.
Trudy MacNabb: So, right now I’m working on one that’s like a quiz, and it’s like a step through quiz, but you don’t want it… It looks like every question is its own page, but you don’t want it to actually be its own page because you need to keep track of all that information that the user is inputting and then give them a response. So, I’m using Vue.js to just create… So, it looks like multiple pages but it’s actually just one page.
Kurt Elster: That’s pretty cool. That you even know how to do that. Oh my gosh. To take a one-to-many approach, you have turned some of these brilliant ideas into an app called Design Packs. What the heck is it?
Trudy MacNabb: Okay. Design Packs is basically a repository of a bunch of sections that you might get in a theme, but might not, because often, and you probably get this a lot, people will come to you and be like, “I like this theme, but I also like this theme. Can we just put them together?” And that’s not actually something you can do, surprisingly.
Kurt Elster: Yeah. Try to make that happen. Not really.
Trudy MacNabb: Yeah. You end up being like, “I should have just built this from scratch.”
Kurt Elster: Yes. Always. You’re like, “The time I saved, the time I “saved” by repurposing this code, I would have been better off just writing it from scratch.”
Trudy MacNabb: Yeah. Exactly. So, we had this idea of like what if you could just make sections that you could just add to any theme? So, they’re self-contained. All the styling is there. All the JavaScript is there. They’re like they’re not gonna mess with any of the rest of the theme. They don’t have to be related. So, then just take the most common elements that are in different themes and allow them to be added to any theme.
Kurt Elster: I’ve played with it. I love it. Especially if you’re like, “All right, I know I’m feeling limited here, but I don’t want to pay a developer. I don’t want to give my theme, necessarily.” For whatever reason, this really gives you a nice, an easy, inexpensive way to expand theme functionality without giving up your theme. Even if you have a custom theme where you go like, “Look, I got too much into this thing.” Any scenario in which you’re going like, “I want to keep my theme but also I want these new sections.” It really seems like Design Packs is the sane solution there.
Trudy MacNabb: It really is. Yes. And I feel like also if you’re on a 1.0 theme and you want to get to 2.0 functionality, just adding one of our templates is a .json template and you can just start from there. You can just add any template and start changing the sections inside. Even if that template’s not the one you want, you just add it. You can start adding and removing sections immediately. And then you can start duplicating those templates, and then all of a sudden you just have 2.0 functionality in your 1.0 theme. And as developers, I know that we are like, “Just upgrade your theme. You’re gonna get so much useful things.” But when you talk to merchants they’re like… have so many other things that they want to do, like updating their theme is not necessarily their top priority because they’re working on marketing, and sales, and products, and all these other things, and I feel like that… From my perspective, I’m like, “Just upgrade your theme and you’ll be happy.” But from a merchant’s perspective it’s like that’s a lot of work and a lot of time spent that they could be spending on other things, especially when they’re trying to run a whole business.
Kurt Elster: It’s true. Okay. How many sections are in Design Packs? What am I paying for here?
Trudy MacNabb: Okay, so… Well, we’ve been adding five sections a month since we started, so I think we’re up to like 120, 130, somewhere around 120 to 130 sections. We also take requests and the most common request we’ll just build into sections, which end up being our most popular sections, and a lot of the time they’re simpler than we thought. We thought that people would want the high function ones, and some people are like, “Can we get a grid?” And we’re like, “Yeah. Here’s a grid.” And it becomes so popular. We’re like, “Don’t most themes have a grid?” But I guess ours is just a little bit more, like maybe there’s a few more settings that people just like.
Kurt Elster: And so, as far as pricing goes, and we’re recording this once, so if this changes don’t shoot the messenger. You have a free plan, and then there’s just a single $25 a month price if I want unlimited everything. What am I getting on the free one?
Trudy MacNabb: So, on the free one you get a simple FAQ section, and you get an about with photo frame, so it’s like just a cute little about section with text and image. And then you also get the option to do custom CSS that gets inserted into your theme if you know a little. Design Packs is also created for those people who… Anybody can use it, but if you know just a little bit of CSS to be dangerous, you’re gonna love it. So, there’s custom CSS you can add.
On the paid plan, you get all the sections plus the ability to add custom fonts.
Kurt Elster: Okay, so recapping here, free theme, going to be easy to use and free and fast. The tradeoff being to get there, we’re limited on features, sections, et cetera. But excellent starting point and no shame in using it. Or using it as a place to start customizing.
In between, then we move up to premium themes, and premium themes, you want to get it from the Shopify theme store or from a developer that sells in the Shopify theme store. Costs you a few hundred bucks, but dramatically increases the number of features, sections, layouts, templates. It will be vastly more configurable, customizable to what you want, than a free theme. But that also introduces significant complexity, so if you are starting as a first time, logged into Shopify for the first time, and you fire one of those themes up, it’s going to be intimidating. Straight up. And so, it’s better, just play with the free one, get a sense of it, and then when you feel limited that’s when you go to the premium theme.
Premium theme, all right, now we’re cooking with gas. With that premium theme, I can really get a lot done. If I’m moving to Online Store 2.0, now I’ve got sections everywhere and it’s quick, and it’s nice, and I like it. And now with some experience, if that’s starting to limit me, and it’s probably not going to be on features or functionality, it’s going to be on we really have a very specific idea in mind for branding. Aha. Now, that’s where I want to go to a custom theme.
And the reality is I think at this point most custom themes are a hybrid approach, where they’re going to be either an agency or developer’s own custom-based template that they’re starting from that they use for everything, or an existing theme that they know really well, an existing premium theme, and then all right, we’re gonna put custom templates on top of that to get where we want.
And then if you need even… You want to get even crazier than that, then all right, we can start adding custom React or Vue.js components to it. And then from there, we go to headless, at which point you have full-time people to manage the website on your team. Okay. That’s the full journey of where you can go with developing this stuff.
Trudy MacNabb: Yes.
Kurt Elster: And there is not a wrong answer. You will know which one… Which one feels right for you is probably based on that explanation, the one that is correct. Now, if I want to learn more about Trudy, where do I go?
Trudy MacNabb: I don’t know.
Kurt Elster: All right, Up at Five. UpAtFive.ca is the site. Got that in the show notes. And then we have your app, Design Packs. If you search Design Packs in the Shopify app store, it’ll come up. And then you write for CodeShopify.com, as well.
Trudy MacNabb: Yep.
Kurt Elster: Excellent. Any parting thoughts?
Trudy MacNabb: So much pressure. 2.0 has really, I think, changed the game in terms of themes, and sort of… taking away from the need to have a developer, which is me, but making it a lot more useful for merchants. Which is great, because I love to just hand things off to merchants and not have to continuously do updates.
Kurt Elster: No, absolutely. Yeah. Online Store 2.0, I have drank the Kool-Aid. I have fully embraced it and it has made everyone’s life easier on both sides of the table.
Trudy MacNabb: I know. Don’t even get me started on metafields.
Kurt Elster: Oh, man. Metafields. The coolest ever. Trudy MacNabb, Up at Five, and Design Packs, thank you so much.
Sound Board:
Trudy MacNabb: Thank you.