Drag and drop to supercharge your Shopify theme | #214 Trudy MacNabb

Please support the show if you liked today's episode:

• If you love the podcast, please get someone else to listen, too!
• If you enjoyed this episode of the Ecommerce Coffee Break podcast, please head over to Apple Podcasts, leave a rating, write a review, and subscribe.
• Share the podcast with your family, friends, and co-workers.
• Tag the podcast on Instagram @clauslauter and let me know what you like about it.
• If you like the content and would like to support the podcast, you can buy me a coffee here.
• Become a guest on the show or sponsor an episode.

Claus Lauter: Hello, and welcome to another episode of the e commerce coffee break podcast. Today, we want to talk about how you can supercharge your Shopify store. We'll be a bit more technical than usually, because we will talk about Shopify sections, meta fields, and meta objects. With me on the show today, I have Trudy McNabb.

She is the co founder of upatfiveanddesignpacks. com and she has a. Running a Shopify agency up at five for eight years. And in the past two years, she ventured into Shopify apps, ecosystem, launching design packs. So we want to dive a little bit deeper into that, what that is. And I'd like to welcome Trudy to the show.

Hi, Trudy. How are you today? Hi, I'm good. How are you? Very well. Trudy, sections, technical stuff. What brought you in that direction? 

Trudy MacNabb: I've always been a developer, so I'm always interested in the technical side of things. And I guess, I w I've been developing Shopify for many years as the ecosystem changed.

 Now that we have sections everywhere, I feel like it's created this very useful tool for merchants to be able to like manage their own stores a lot more and be more creative. So we saw an opportunity to just create prebuilt sections that people can add to any theme with design packs.

Okay, 

Claus Lauter: maybe we need to take a step back because a lot of merchants might be not coming from a developer side. So they have a standard theme or something like that. And that's what they work with. And I don't really know what kind of opportunities are within the, Online shopping 2. 0 environment. So let's dive a little bit deeper into it.

Give me an explanation. What are sections? What are metafields? 

Trudy MacNabb: Okay. So I guess everybody who has a store pretty much has gets a theme. Even if you start with the Don theme, they're all built in the same sort of way. For the 2. 0. Newer themes. They're all built with templates, which is like the product template page template.

Those are the things you use. And now each template is built with multiple sections. So they're just like this. You might have a product card or you might have a slider. And with sections everywhere, it gives you the opportunity to use any section in your theme and on any page as well as like, reorder them and edit it.

In the theme editor yourself without having to actually get a coder pre like theme 1. 0. I guess you sort you still had sections, but they had to be hard coded into the theme. So it was harder for merchants to be able to be as creative or edit their store on a whim. Okay. 

Claus Lauter: Give me an idea of what sections actually can do.

So there's obviously different features, functionalities that are coming with themes. And then if you need more sections might come in, give me just an idea of what they can do. 

Trudy MacNabb: Yeah. So a section might be like a shop, the look section where you have like a picture with a pinpoints on it, where it links to different products or something like that.

Each or simply like a banner could be a section, every sort of element on your page is. A section, sliders can be a section for video or products or testimonials, any thing that you would want in your store. There's like code snippets, I guess, of things that you can use. And the sections themselves have varying levels of and sections also come with blocks, which gives you even more opportunity to be dynamic in what you're doing.

Claus Lauter: where's the difference between having a landing page builder or having a theme that already comes with a amount of different features. 

Trudy MacNabb: So with most of the traditional landing page builders you build them in the editor that's provided by the landing page builder and then you. Set that to a page on your shop, and once it's in your shop, you can't edit it from the regular theme editor.

You would have to go back into the landing page editor to edit it there. For sections everywhere, once you have a section in your shop, you can literally put it everywhere. So you can compose pages of these sections on your product page, or your home page, or an about page, anywhere in your theme. 

Claus Lauter: what are MetaFields and MetaObjects?

How do they differ to sections? 

Trudy MacNabb: Yeah, so MetaFields and MetaObjects. MetaFields have been around for a long time, but they haven't been very user friendly. So developers have used them, but they weren't really available to normal merchants. But they're extra pieces of data that don't come... From any other object in Shopify.

So like a product, you have the product description, a page, you have the regular sort of WYSIWYG editor that is, gives you some level of configurability, but it's not a lot. So those sort of are the classic parts of a theme or your Shopify store. Meta fields and meta objects give you. Extra information that you could add, say, FAQs on the product page or, certain things that are more dynamic, specifically, usually, I think the product page is the place that you're going to want to use metafields the most because you want maybe different information per product.

So you might want some FAQs on one product and different FAQs on another product. Traditionally, you haven't been able to do that very well with, except in the product description, which you can't style very well. Nicely. 

Claus Lauter: Makes perfect sense. Now, there's obviously a lot of features as there is a lot of apps out there and a lot of merchants get a shiny object syndrome and they want to put everything in their store.

That gives a slight chance to increase conversions. How do I pick the right sections or the right meta fields for my store? What's the selection process that the criteria process there? 

Trudy MacNabb: How to pick the right sections? Like you want to highlight the most, important information or you want to highlight the information that you want.

So for instance, if you have a product is complimentary to many other products in your store, you might want to feature those complimentary products on the product page so that people see it right there. if you have something that's a little bit more complex, you might want to have like setup information or how to information right on the product page so that people don't have to go looking for it.

Claus Lauter: Okay, makes perfect sense. Now one question that might come up whenever it comes to hacking your theme is site speed. How does that impact a adding more sections to your store? How does it impact site speed? Are there any other kind of risks involved? 

Trudy MacNabb: So site speed when adding sort of regular Shopify sections to your store, it's not going to affect the speed.

Like if you just add any number of sections to your theme, 

you're only going to it's only going to affect the speed of the sections you use and realistically, if you're putting like 15 videos, it might affect the speed at design packs. We build it in a way that's as efficient as possible with like, lazy loading. So these things don't, affect the initial load of the page so that they don't actually load until you get lower on the page, which increases site speed.

Sometimes traditional page builders can cause problems. Because of the way page builders are sometimes made, there's a lot of extra code that gets put in which can slow things down. I'm sure they're always working. I'm sure developers are always working on creating, more efficiencies in all of their products, hopefully.

But I had 2. 0 Has created a lot more efficiency, like Shopify itself in in developing the options for 2. 0 have also increased page speed. So it's not as big of an issue as it once was. 

Claus Lauter: Okay, that's good to hear. Now, you obviously was designpacks. com offer a lot of different sections there. What are the most common ones that people go for when they start with adding sections.

Trudy MacNabb: Value icons is one of our most popular one. We have a video that like banner, which is actually also quite popular. And our general banners are quite popular because we make them super flexible. So we give them like an option to have a different image for mobile and a lot of flexibility and like where you can place the text on it, I think.

When we started, we somehow, part of us was like, some of, a lot of these features are built into themes already, but one of the selling points that we found talking to our customers is that we just, our sections just have a lot more flexibility in what you can do, like color settings, size settings and stuff.

So I think the basics are definitely value icon is our most popular which I think it's always good to have visual call outs of your key features on any shop. So that's probably why. 

Claus Lauter: Talk me for a non technical person through the process of installing a section, 

Trudy MacNabb: From our app, we have like 150 sections and all you have to do is choose the theme you want to add it to.

So if. You can add it to any theme in your store. If you're just say, want to create something before you publish it live. So you have to choose the theme and then you just click add to theme. And then a banner will come up and click to customize and you'll go into your theme editor from there. And then where you look for all the regular sections, just say, add a section and you can just search for the section you added, it's quite simple.

Claus Lauter: From a design perspective a brand manager or web designer, are there any kind of, risks involved that it will break your layout, your design, or how does that work? No, 

Trudy MacNabb: from a technical perspective, we have everything encapsulated. So none of anything that is added to the theme will affect the theme.

The existing theme, it won't, there won't be any code conflicts. And we've created it in such a way that if you're a little bit technical and you have a little bit of Shopify and a little bit of CSS, you can also customize each section with custom CSS in each section for both mobile and desktop.

And then if you want to have broad, like design elements across. Everything. We also have a custom CSS option within the app. This is great for things like fonts. You just want to have your font set like standard across or also maybe buttons. You want like your custom button to be on every design pack section.

You can just do that, which is a little bit technical, but from our sections aren't going to conflict with your existing brand in any way. 

Claus Lauter: tell me a little bit about the pricing. How much is it to have a section from your selection implemented compared to have somebody starting from scratch, developing a set of section.

Trudy MacNabb: Our pricing is monthly, so you get everything, all the sections available to you for 24. 99 per month, or you can have the option of 1. 99 a year, which works out to about 16. 50 a month. 

 It's going to range anywhere from maybe 50 to like 150 an hour of development. So you're looking at at least hundreds of dollars per section, depending on the complexity of it. The other thing that's good about having prebuilt sections is like we Over time we fix so many bugs if anything happens, you know what I mean?

I feel like over time code gets better because you'll be like, there'll be an edge case that you'll be able to fix. So building a custom section is really useful if you have like something that you can't get anywhere else, but usually themes and prebuilt things have been road tested a lot more than getting something custom built.

Claus Lauter: Who's your perfect customer? Are they small and medium enterprises, bigger enterprises, startups, who's usually going for pre configured sections? 

Trudy MacNabb: We have a lot of range, like we'll have people who are just starting and they're very DYI focused and they want to be able to like control. They want to be able to do what they want without having to rely on a technical person.

But then on the other end, even within my agency, I'll use DesignPacks as a starting point and then customize it. So I have some Shopify plus customers that are using it where we've set it up for them and we've gone in and like refine the styles and made sure that it's like exactly on brand with a little bit of custom CSS, but it, speeds up the process dramatically and also lowers the cost quite a bit as well.

Claus Lauter: Yeah. Makes sense. What are the biggest mistakes that you see when people start using sections in their theme? 

Trudy MacNabb: Mistakes one thing I think sometimes people are a little confused. Because they're used to maybe a traditional page builder. So they're expecting to be able to configure it inside the app. So we're creating more videos inside the app to explain it a little bit more, but in my experience, once people actually start using it because they're built exactly like themes, if they have any familiarity with themes, it's pretty smooth in terms of using it.

Claus Lauter: Okay. I have been to your website and had a look at the collection with all your different sections. There's a huge range and , I'm tempted to try some out for my own store. So definitely a good solution for everyone who wants to add more features to the store and makes the user experience nicer.

Where can people find out more about 

Trudy MacNabb: you guys? So our main website is designpacks. design packs. com and, um, yeah, we have examples of all of the sections. In a variety of different ways that they can be configured. So that's probably the best place to start. 

Claus Lauter: Okay. I will put the links in the show notes as always.

Then you would just want to click away. Please. Thanks so much to give us insights into sections. I think it's very important for every merchants to give it a try and see how they can boost the features in their store and for any questions they should reach out directly to you. Thanks so much for your time today.

Trudy MacNabb: Thank you.