Episode 268 Featuring Alex Bond

Customizing Your Shopify Theme with Trudy MacNabb

Customizing Your Shopify Theme with Trudy MacNabb

Trudy MacNabb is the Co-Founder of Design Packs, a quick and easy way to customize your Shopify store and add new modules directly to your current theme. Design Packs is built by a nimble women-led team who have been working in the Shopify space since 2014. They have a strong desire to create awesome products for merchants that are both easy to use and add a ton of value to stores. 

Trudy is also the Co-Founder of Up at Five, a digital studio focused on data-driven web applications. She has been running Up at Five for over five years and has worked with clients such as WWF, Canada Learning Code, Jenny Bird, and more. Having been a mainframe developer, she has a deep knowledge of both front-end and back-end development.

On this episode, Trudy and I discuss app development, theme development, the differences between the two, and much more.

Get 15% off Design Packs’ monthly subscription, for as long as you use Design Packs. Simply visit Design-Packs.com or apps.shopify.com/design-packs, install the app, visit the Plans and Billings page and enter the Promo Code Debut15 and you'll receive 15% off your bill every month. Download Design Packs today.

 

What is Design Packs

Trudy MacNabb: So Design Packs is an app that I created with another woman for Shopify. That is essentially a bunch of sections. It's like a repository of sections that you can just add to any theme and it'll integrate without causing any problems.

Alex Bond: Yeah. And that's like the short, sweet, simple version of it is to my knowledge. When I was looking at the website, it is a massive library of addendums, two themes, and you really pitch it well as legos.

As a big fan of Legos myself, as someone who plays with Legos a lot with my kid, that's a major selling point to me. It's kind of like adult Legos for your Shopify website. What specifically are some of the sections and additions that a Shopify brand can make to their theme thanks to Design Packs. 

Trudy MacNabb: Well, there's tons of things. We have a lot of banners. And it's funny because when we first started, we thought that we would make really unique sections that were very style focused. And as we went through and heard back from our customers, we realized that it was actually just the flexibility that people wanted. 

So we created like banners and people are using our banners and we're like, doesn't every theme come with a banner, but then the difference is like, we have a lot more style customizations that you can do. And we also always have like a mobile image separate from the desktop image so people can choose and make it really stylized. 

So I think a lot of our focus has become more making sort of generic, but very flexible sections. Right now, I'm working on a tab section. We just launched a section that's a collection page, but you can actually reorder everything. So you can add, take away, remove all of the elements of a collection page and reorder it. tweak it. 

It's very, very customizable because I find that's actually what our, our customers really enjoy. And then we have other things like that you don't necessarily come with every theme, like a countdown timer, or like one of those sliders that shows you half of an image and the other half. Some of those that you're not going to get in every theme. But yeah, we found that actually just the flexibility has been the biggest selling point for our customers. 

Alex Bond: Oh, I can imagine because when you have someone who wants something, especially very particular people like entrepreneurs and e commerce professionals, they're very, I don't know, visionary in that aspect where they want this thing in this way on this theme.

So if it doesn't work, I need to find a way like with design packs to make it work. Is that kind of like the foundation of the brand? Is that accessibility that kind of drag and drop? See what fits, see what doesn't. 

Trudy MacNabb: Yeah. So it's funny because we just had like one of our customers give us like a review or whatever. And he said this and I was like, Oh, that's exactly us. It's like, because no theme is perfect because there's always like, you know, you can find like the exact theme that you want, but there's always going to be something missing or something a little off. 

Oftentimes, like with the collection pages, I find they're just usually generic, they have the options, but like usually, there's not a lot of customizations you can do with like a collection page or people just want to be able to just add one little thing that is missing or like a couple little things that are missing. So I think that is now my new thing is like, no, because no theme is perfect.

Curating an Extensive Library: Unveiling the Process of Selecting and Adding Sections Based on User Demand and Expertise

Alex Bond: I'm curious how you decide what sort of sections to add to your library. Is that from your teams? And your ideas and experiences, do you like kind of maybe accept pitches? How do you figure out, I saw on your website, you add like five new ones each month or something like that. And so the fact that you're consistently adding to this library, how you figure out what specifically to add to the library? How do you figure out what the demand is? 

Trudy MacNabb: So it's funny because when we started, we started with like just 10. Like when we launched, we had like 10 sections. So we're like, we'll just see how it goes. And it was actually also like, it worked out kind of the timing worked out really well because we launched about six months before sections everywhere. 

So our sections were sort of like Pretty much you can only use on the homepage and we made templates that you could use, but they weren't as flexible as they were with sections everywhere. But then six months later they announced sections everywhere and we're like, Oh, this just made our app just so much more useful. 

Basically became like a page builder in a sense. So that was just lucky for us. And it kind of like started a whole category of app because now there's a bunch of other like section apps or whatever, but I was like, Oh, we have 10 and I was like, I don't know how we're going to get ideas. 

But just as going, like, I just didn't know how we would continue. Like, I thought that we would run out. Now we have like over 150 sections. And a lot of it is just actually from our customers feedback. Like we get a lot of requests for sections of like, Oh, can you have this? Can you have that? So it's funny. Cause one of the first ones, like this customer just asked us for just like a grid.

With like images and then text over the images, I was like, yeah, I could just like, I could make that. It's pretty simple, but it seems so generic. And so, like, why would doesn't everything come with a grid of some sort like this? So we just built it and that's like, literally became one of our most popular sections. And that's kind of what the catalyst for like, oh, people just want these generic sections that are just very flexible.

So there's two main like places where you get ideas is I still do agency work. So I'm working with clients and building out section. So if they want something really specific, I'll be like, Oh, that's interesting. How can I make it a little bit more generic for design packs? Like just a lot of the merchants using the app making requests. 

Seamless Integration in a Diverse Digital Landscape: Ensuring Compatibility and Harmony of Sections Across Different Shopify Themes and Existing Additions

Alex Bond: How do you ensure on a more technical aspect that every section, a brand owner, or like a store owner ads doesn't conflict, not only with every single Shopify theme, because I assume that you make these sections to work in every single Shopify theme, which is coded differently and develop differently.

So, not only does every single section have to match with every single Shopify theme, but also what other additions that they may already have, whether that's other apps or whether that's your own stuff. I mean, that feels part of the reason why Lego is so popular is because it all snapped into place with every single other Lego. So how are you able to do that in kind of a digital world? 

Trudy MacNabb: Well, yeah, well, first and foremost, I feel like our dynamic, like both me and my co founder are developers first. So we just love developing, which is why sometimes we're always building sections cause it's the thing we love to do apart from like, you know, marketing and other things. That's not our favorite. 

But my co founder and Thomas was the technical director for out of the sandbox for five or six years before we started this. And I don't know if you're familiar with out of the sandbox, but it was like a very popular brand for Shopify themes. And so she built many Shopify themes.

She knows the whole ecosystem. There's a lot of like, you know, intricacies of how, like to get into the theme store, like what's required and how everything works. So I think from her expertise of just understanding how themes work, she was able to like create like a system for us. It's like extremely scoped, extremely defined, narrow.

I guess like technically like CSS is extremely scoped. So nothing and the JS JavaScript and everything is scoped. So it's that it won't like, it can't leak out into the rest of it. And for the most part, every so often there's something that will happen where like, there's like the theme will have unscoped CSS, which might affect ours for certain reasons.

Like sometimes there's the occasional thing, but also because Anne is so entrenched in that ecosystem, she knows most of the people. So like one time she just reached out, she's like, Hey, have you noticed this is an issue and they're like, okay, we'll change it. 

Alex Bond: So she has those relationships where she can kind of be like, is this us or is this you?

Trudy MacNabb: Yeah. So it's like relationships. I think both of us have been been in the Shopify ecosystem for so long that helps and like knowing people, but yeah, so scoping. And then we also have like custom CSS scoped for mobile and CSS in each section. So like, if I think like, It's great for merchants who know nothing about coding. 

But if you know a little bit about coding, it becomes that much more useful because you have like a really good base to start with, but then you can start adding like really custom things into each section without having to affect that section and other places of the store.

Overcoming Obstacles: Reflecting on the Major Challenges Faced Since the Company's Inception

Trudy MacNabb: One of them is just Shopify changing technical requirements all the time. So we're constantly keeping up with like their backend requirements. That's probably, I would say the biggest stops, which is good. I mean, Shopify updating everything and changing is good because it's like making the platform better, but also it's like a lot of work to like, keep up with them cause we're not a billion dollar company. 

Alex Bond: That reminds me, do you get any sort of leeway before they make updates? Or you get like a decent amount of heads up before they, they give like an update or tech requirements, or I imagine you got to have some sort of prep time. 

Trudy MacNabb: Yeah. I think the prep time is like, sometimes it's really good. Like sometimes there'll be like a year from now, we're changing this, so you have time. 

Alex Bond: That means I can get to it in six months. 

Trudy MacNabb: Yeah. And then sometimes they're like three weeks from now or sometimes, I mean, they have change logs and everything. I'm sure it's somewhere, but sometimes you miss these things and they'll be like, Oh, you have a month to change this and which sounds like a lot, but when you're a small company, you don't you already had plans for that month probably. 

Up at Five: A Specialized Digital Agency for Comprehensive Shopify Customization

Alex Bond: The other company that we were alluding to was a digital agency is a digital agency called Up at Five. right? So you're also the co founder of this company, which specializes in Shopify customization at large. And am I getting that right? Can you tell me a little bit more about that? 

Trudy MacNabb: Yeah. So Up at Five started in 2015 and then quite quickly, we kind of just started doing just Shopify because it was a good area to focus on and it was kind of, I mean, it's much different, like the ecosystem is much different now that it was back then. But we started developing and got into doing things like really uniquely.

But at that point, the platform was like you needed a lot more coding ability to do interesting things. And I personally, I'm a coder. I love coding and I love doing interesting things. So we would do like you know, bundle builders or customizations or like custom apps for integrations with like shipping or 3PL or, you know, all sorts of things, which over time, these things have been integrated into Shopify or much easier to do. 

But when we started, it was like it's just like the fun of trying to figure out what you could do to make really interesting storefronts on Shopify. But now, since like Online Store 2.0 that's given so much more flexibility and also coming out with Design Packs, I'm actually just, I use now Design Packs in my own development for my agency.

Alex Bond: I believe that. And it seems to me like Design Packs is already part of that Up at Five. So I'm curious why you decided to make Design Packs into its own little brand instead of kind of keeping it in that Up at Five ecosystem? 

Trudy MacNabb: Running Up a Five with a different person, and then I'm doing Design Packs with a different person. So I'm doing both things, but with different people. So that's part of it. 

I guess that's the main reason why they're separate, but it just makes it easy. But also part of the catalyst was like, because I like doing interesting things, I don't necessarily like building the same thing over and over again. But obviously with eCommerce, you know, you're going to build the same things over and over again. 

So that was part of the catalyst to make an app, which was like, why don't we just build a really good version of the thing that everybody wants and just let them do like, you know, just build it once really, really well, and then let people have it.

Alex Bond: Yeah. It's kind of like the teach a man to fish philosophy, where if you build the thing that other people can come to build their own thing, then I don't have to build all their things for them, you know? 

Trudy MacNabb: Yeah. And 2.0, since a lot of like, you know, designers, agencies are able to like use things like Design Packs or just the themes or do a lot of it themselves. I've now, instead of building like full themes, I'm now just usually doing like the very complicated, intricate parts that you can't do any of those other tools now. 

So I'm working with a lot of other agencies to just build like more custom parts. But then I don't have to build a banner every single time I'm just like, use this. 

 

Developing Apps and Themes vs. Creating a Library of Additional Sections: Exploring the Key Differences and Unique Challenges

Alex Bond: You kind of were touching about this and I'd love to dive into a little more what some of the major differences are in developing an app or theme with Up at Five versus creating this library of additional sections with Design Packs, because, you know, to an onlooker like myself, I'd say you're developing something, you're developing something. It's the same, but I know it's not. So do you mind kind of expounding on that for me?

Trudy MacNabb: I think, yes, it's very different in the sense that like, pre sections everywhere too, I was making a lot of custom themes because people wanted very specific things and it was hard to do without like the sections everywhere and all the other, and the meta fields and meta objects that are now available.

So I was doing just a lot of custom work and I would like, you know, we would work with designers. They would build something. I would build it exactly to spec. I would give them options. Like you could change color or text or whatever, but not necessarily that many options because they wanted it exactly like the designs. 

Also, if I had to do anything sort of custom or interesting, I was directly talking to the client. So I could be like, Oh, you have to do this. Remember to do this. I could make a video of them to have a reference to know how to do something. So if something like I could do things that were like a little weird because I could just be like, okay, I know this is a little weird, but to get what you want, this is how you do it.

But the thing with Design Packs is like, we have to build something first of all, super flexible. And then also we have to build it in a way that's intuitive because we don't have direct access to those like customers. They can like contact support or whatever, but oftentimes you don't necessarily want them to have to contact support just to figure out how to use your thing.

So it's like the mentality, which that's why Ann is good because she has the mentality of building themes where it's like you, she had to deal with customer support for years. So she understands like, what confuses merchants or what confuses this, whereas I was also working with like people with budgets to have custom themes who had teams probably like a bigger sort of like more mature in their journey into selling online.

So that it's like a completely different mentality of trying to create something of like somebody who just signed up for Shopify can they figure it out, like do something and they don't have me to sit there and explain it to them. 

Unveiling the Wild and Ingenious: Exploring Unconventional Shopify Development Requests and Outlandish Ideas

Alex Bond: So I'm curious, Trudy, what some of the wild Shopify development requests are that you've gotten. Have you gotten any that are kind of out there, whether they were pretty ingenious and like, Hey, can you do this for me? 

And you just kind of, maybe we're like, Oh, I never even thought of that. It can maybe kind of like the grid is something that you mentioned or, or maybe even any that were just. So totally outlandish that it was just, why would you ever want that?

Trudy MacNabb: So one was very interesting where the guy came, so it was like a printing service and they wanted to be able to have like a customized price for like every single option that you could choose. And there was like, there's probably like 20 to 50 options per, depending on what it was, like anything from printed posters to printed booklets to pamphlets or whatever.

And so he wanted this customized price, which I think that people don't think about logically, but you can't change the price of a product on Shopify because then everybody on the internet who's looking at that product will see the price change because there's only one price per product. And if you could change it on the front end would be a huge security.

Cause then anybody could just change it to like 1, you know what I mean? Like there's, it was like logistical issues why you can't just change the price of a product. And so usually when you do that, what you. do would break down the product into smaller products and like sort of put them together. But because there were so many options, it was just impossible to do.

So I was like, well, how much is your volume? Because the thing is that you could create a new product for every time somebody ordered something. But if your volume is very high, that would get out of hand very quickly and very difficult to manage. 

Alex Bond: But to manage the logistics would be crazy. 

Trudy MacNabb: So basically what we end up doing is creating like a custom app for them that would allow them to set all of the options on the back end for each product and then like a custom like view JS front end so it would like anytime they made like a selection, it would like change the price, but when they actually hit add to cart, it would like create a new product in Shopify. 

And then add that new product to their cart. And it was interesting. And then also it like connected, like we sent all the information to the, like their printing software or whatever. So like everything was kind of really automated. And then it was interesting because, because I was like, I mean, this is all we can do.

This is what we could do. I don't know if this is the best solution because we're making a new product every time. But then it actually turned out well because then the customers could actually go back and reorder the same product because. It would be like the exact specs that they wanted almost customizable.

Alex Bond: And they didn't even have to go through the time and effort to customize it.

Trudy MacNabb: Yeah. Cause like, you know, people would reorder the same thing over and over again. So that like specific thing was there. So that was like quite interesting. 

Another one was for a car parts one where we like also made a custom app. Car parts, I guess, you know, they have like repositories of APIs that have all the data and they update all the time. And there's so much information that they wanted these products constantly updated. 

So I created an app that just like basically the app, like created the product page from the API, they could just run the API or run, you know, a thing and it would just update all the apps. That was kind of interesting too. 

Alex Bond: That's cool. So you didn't even have to like actually go by hand and create all that stuff. It just self populated a little bit. 

Trudy MacNabb: Yeah. Cause they also had like, you know, thousands of products. 

Alex Bond: Car parts is one of those things where it's just like for every car make and model year, there's like six different parts. Wide body, small, whatever. That's definitely something that I could imagine as an app developer would be a bit taxing is there's a difference between soap. Whether it's kind of like eight types of soap compared to 10 million types of mufflers. 

Trudy MacNabb: Yeah. That's the thing I think with an agency, it's like you get to talk to a person. You're like, how do you have three products or do you have like 20,000 products? Are your products always the same? Are they changing all the time? Like, you know, there's like a lot of things to think about. 

Navigating the Ever-Evolving Shopify Ecosystem: Insights into Wild Changes and Development Trends

Alex Bond: And have you seen a lot of changes in the Shopify ecosystem? I know your partner is kind of more the Shopify guru and you're kind of the coding genius. I'm curious if you've seen any sort of wild changes since your time in the Shopify ecosystem or just development in general that you might want to give some insight to our audience about maybe what you've seen and what to expect. 

Trudy MacNabb: Yeah. So I feel like in terms of like the theme development, like in the last like year and a half, like the number of changes have been so fast, like they, I feel like nobody can even come up, like, realize what you can do with these yet. 

I feel like there'll be more interesting things to come because of it, but like the sections everywhere really made a difference, but also the meta fields and now they've come up with meta objects and I think meta objects are a game changer. I mean, metafields also, but it just making it so much easier to have like a customized experience on your Shopify store without having to be a developer. 

That's what I found now. Like before I would be making these custom apps for people for like that car parts one. Now, if I were to do the same, well, maybe because it was an API, I would still have an app, but I think having like all your information on a product page, like I like there's super big product pages with just every piece of information. Cause sometimes that's the only, that's the first place of customers going to get to like, they won't see the home page or the about page. 

So I think having everything and like customize information on the product page is really important, but that used to be really hard. But now with meta objects, you can like make really customized product pages where all the information is different, but it's still manageable because you're using one template that I like making things that are very manageable for my clients, but still dynamic. 

Alex Bond: So that they can self regulate it and they can get in and be like, this isn't working. I can fix it instead of, you know, every time something goes wrong, you get the phone call. 

Trudy MacNabb: Yeah. And also, I think what one thing that's more and more popular is before people would just be like, I want this theme and they would have a design and you create the theme and it would stay forever and it would just look like that. But now I find people having dynamic sites where you change things, banners are changing, updates are going on is a lot more popular. 

And I think because to a certain degree creates trust, because if you go back to a website all the time and it's exactly the same, you're like, is anybody doing anything? Is this still like, you know what I mean? 

Alex Bond: Yeah. And in the same aspect, I think that a lot of customers just generally like seeing something new or the brand wants to try different things out. I think that a website is kind of a really easy. It's one of the easiest ways possible to do some trial and error.

You know, if this doesn't work. I can just literally hit undo and nothing's going to change compared to like, if I change the price of something and I get a loss, I mean, that's the bottom line. That's a little different. 

It's not like changing some of the stuff on your website is really going to lose such a significant amount of money. It's not worth doing, but the upside is totally worth it. So I think people are kind of really more willing to change something like that because it's low risk, high reward, honestly. 

Trudy MacNabb: Yeah. And I think especially as again, with the product page, I feel like one because of social people are kind of like just getting to the product page. They'll be like on Instagram, see something they like, and it'll just go to the product page. 

And you don't necessarily want them going away from the product page because you want them buying it. So it's like, have all the information, the FAQ, the thing about your company, a little about, about your company, just so they know like all of the information on your product. 

Alex Bond: As accessible to that, like page as possible is what I'm hearing you say. That's one of the things that I want to know is more about a company before I just buy their stuff. And when you get an ad for something, it takes you to the product page. And then I just end up going to the homepage, learning about the company and then back to the product page. And that feels a bit recursive for a shopper like myself, at least. 

Trudy MacNabb: Yeah. And so if you can stay, so that's why I think like to me, I'm like the product page is your most important page, obviously homepage to those two things. And then, yeah, so the meta objects are just making it so much easier to like you create them, reuse them. It's just like making it so much more manageable for merchants to like keep things updated and fresh and true. 

Alex Bond
Host
Alex Bond

Meet Alex Bond—a seasoned multimedia producer with experience in television, music, podcasts, music videos, and advertising. Alex is a creative problem solver with a track record of overseeing high-quality media productions. He's a co-founder of the music production company Too Indecent, and he also hosted the podcast "Get in the Herd," which was voted "Best Local Podcast of 2020" by the Richmond Times-Dispatch in Virginia, USA.

Share post