Coding Shopify with Anne and Trudy of Design Packs

Welcome to Syntax. We got a really good episode for you today about coding with and for Shopify.

This is we've done a couple episodes on Shopify, but Shopify always amazes me that it is this entire world of people who not exclusively developed for it, but there's a lot of people who are like, their entire job is just working with Shopify themes, Shopify apps, Shopify integrations.

And it's it's a pretty wild world, especially because ecommerce is one of the biggest industries on the Internet. And I always find it really interesting to Scott dip into that. So I conjured up 2 of the smartest Shopify people I know, Sanity Thomas and Trudy McNabb. I taught with Anne and and Trudy when I was at HackerU, doing part time classes and doing boot camps.

And they've both been doing Shopify for many, many years. I'll let them talk about that. But welcome, Anne. Trudy, thanks so much for coming on.

Thanks for having us.

Anne, you can start. Give us a rundown of, who you are and what you do.

Yeah. Sure.

So I've been a front end developer for 15 years now. That seems a bit crazy to say, but I've I've been through the the Flash times, the, like, jQuery times, and then the framework era, so I feel like I've sort of seen it all.

And then, I got into Shopify sometime around 2014, I Wes. I built my 1st theme and I was working for an agency and and that kind of stuff, and then I actually, worked, for about almost 5 years at an actual theme company.

So we were building, themes to sell on the theme store. So I was there for, yeah, 5 years and then left in 2020, the great resignation.

And Oh, yeah. Yeah.

And then started a consultancy doing, store audits And then had this idea about maybe building this kind of interesting app and reached out to Trudy, who is brilliant. And I was like, maybe she'd be interested in partnering, and luckily, she was. So, yeah, we launched our app design packs, and we just had our 3rd, year anniversary.

So that's me. Wow. And design packs is like a we'll go a little bit more into it, but just to kinda frame of what it JS, it's a drag and drop theme maker for Shopify. Is that fair to say?

Yeah. Essentially, it adds new widgets and layouts to your existing theme.

Okay. Awesome.

And, Trudy, who are you?

Who am I? Wes, okay. So prior to 2015, I was a mainframe system programmer at a bank. And then I, took one of the part time Rails courses at HackerU.

And I kinda decided I wanted to see if I could go into web development and do my own thing. So then I end up quitting my job and taking the boot camp, which Wes was my teacher for. Nice. That was a long time ago. Yeah. Everything I know about front end, I know from Wes.

And then me and another student from that class started an agency right out of the boot camp called Up at 5 because we're morning people.

And, and then we, we quickly we were sort of doing anything, but then we kinda quickly pivoted into just doing Shopify. So from probably around 2015, 2016, I've just been building custom Shopify sites.

And then Anne came to me, and she was like, do you wanna build an app? And I was like, I definitely do.

Awesome. So yeah. Obviously, both of you have probably, like, 15, 20 years of, Shopify experience bet between the 2 of you, so excited to talk about that today. So I thought we would structure this JS, like let's talk about, like, themes building themes for Shopify.

Then we'll talk about Shopify apps and integrations and whatnot, because I know that's a wild world of, nickel and dime until you you're paying, like, $600 a month.

And then we'll we'll talk about design packs probably throughout the entire thing because, obviously, that's where a lot of your expertise is, and we'll see where we go for it. So Shopify themes, can can you give us a rundown of, like, how do you build a theme for Shopify?

Oh, I mean, that's a it's liquid. So liquid is is sort of the the secret sauce.

So for anyone that comes from, like, a WordPress background, like, in the same way that you would have, like, sort of little WordPress snippets that you're pulling in, has a similar type thing where you're pulling in information to your templates.

But I remember the first, like, Shopify theme that I built. It it is Wes very Bos, and a lot of times actually similar WordPress as well where you sort of start with maybe, like, an existing theme and you kind of create your own, build off of it, and you learn from that. And then you kind of can go and build your own from there. When we were building themes at, out of the sandbox, that's the theme company that I was working at, the design and development would take at least 6 months, because everything had to be very specific in order to get it into the theme store. The level of curation Wes very high. It's not like they would just accept anything. So there's very specific, rules that you have to follow when it comes to settings, how things work, even the way that things are labeled and named.

But the actual development of themes, I wouldn't say is, like, wildly complicated. Would you agree, Trudy?

Yeah. It's yeah. It's like liquid templating HTML, CSS, anything else you wanna do, but that's the basis.

Cool. And do you feel like you have, like, enough control with liquid? I I I did a ton of Magento work in my past life as a Magento developer.

And then when we did our Syntax site, I got into the liquid temp templates a little bit on Shopify.

And I Wes I was really amazed at how much was there, but I I I didn't get any deeper than just changing some value. So do you really have full control inside of those templates?

I think Wes. Because as it like, from the agency perspective like, Anne was dealing with the theme, so she had to follow sort of the guidelines and everything.

From an agency perspective, my favorite thing JS, like, making Shopify do things that you don't think it do. So I would like I'd be ESLint integrating like Vue JS or React into just 1 template. And then they also have, what they call the storefront API, which is essentially most of the data that's available in liquid, but in an API, which sometimes works better with React or Vue. Js or something. So you can do anything with Shopify. It just

if you have the know how. But you can integrate anything into it. Interesting. Because, like, I guess there's kinda 2 themes. Like, you can make your own theme. Like, that's what I've done in the past many years ago. I built a I built a WordPress website, and they said, we also want a Shopify theme. So I, like, was sharing styles between the 2, and, like, you can do whatever you want. Like, Trudy, you can run React in inside of there, but if you want it to if you wanna be able to sell it and allow people to use it, it it must be very strict. Right?

For the Shopify theme store, you can also sell it on ThemeForest

or, you know Oh, interesting. Individually. Yeah. Is Theme Forest still kicking?

Is is that a a place where people go still? I think so. That and creative market. But I Yeah. So it's interesting. I don't usually recommend themes from there mainly because the level of curation is so high, so you're not gonna get that whether you're not gonna have the same requirements from those off-site

ones. So Yeah. You're take it's a crapshoot.

The only exception to that are the ones that already have themes on the theme store and are also selling them off their own site because they're already closed.

Oh, yeah. Yeah. Because we dipped into ours really quickly, and Scott changed a few things. And, like, we were selling out of a specific T shirt, and it it would just change the word to unavailable.

And I was like, that should say sold out. You know? And, like, I I dove deep into these liquid templates. And it's kinda funny when you're diving into something new that you're not really comfortable with, but I could not figure out where the hell to change that one word of unavailable. And it's probably maybe you can tell me, but it's probably in some, like, inter internationalization

API somewhere. Yeah. Exactly. I was gonna say it's just the localization.

Change it. Yeah. Oh, okay. Shit. Oh, it's probably really easy. I'm embarrassed now.

It still says unavailable.

Liquid is not the most beautiful,

syntax highlighting for it because I was like, I need to have some color to let me know what's what here. But, yeah, you know, once you get your handle on, it does feel like a familiar esque templating language. Right? You can reason about it once you Yeah. Understand it. Yeah. And they're they're putting a lot more before

Like, Trudy and I both remember the olden days before they had, like, GitHub integration, you know, and when building themes.

And now they have like a v s code extension which is really great that they're improving all the time. So I think they they are actually trying to put a lot of work into the dev tooling which is really nice to see because they do rely on the partner ecosystem quite a bit so it's it's nice to get that from them. Like, oh, it makes our our life easier.

Yeah. Totally.

I I have most of my experience in liquid from doing email marketing. Yeah. Because anytime I need to to customize one of my emails that goes out, like, for example, I don't wanna put a coupon code for a course if somebody has already bought that course. Right? So that's just a simple if statement, and I can pull data from their profile. You can put their name inside of it. Right? And it's it's it's kinda funky because coming from a JavaScript language, it's it's not the the same. You're often piping values in, and I believe that's because Toby, who's CEO and founder of Shopify, was a Rails developer. Is that right? Yeah. So it's it's a little bit more Rails y.

I think that with Liquid specifically, they thought that it would be so easy that designers could use it. So they made a bunch of choices that are counterintuitive to a developer's mind. Like, for instance, the index starts at 1. They later added index 0. Really? Yeah. Yeah. Oh, wow. Like, there's a for loop Scott index and then a for loop dot index 0.

Oh, man. Really? Yeah.

And can you make your own methods in or are you limited to what they have?

You can't. No. Okay. Yeah. I mean, even even creating, like like, working with arrays is kind of funny and weird. And, like, the idea of, like, an object doesn't really like, you can kind of fake it a little bit, but it's very it feels a little hacky. Yeah. I have a blog

that was called Node Shopify before they made me change the URL. But and the most popular was how to make an array of liquid. Like, it just got the most number. Thank god.

It is it is a a treasure trove, though. Trudy has these amazing tutorials. It's called, too many tabs dotxyz.

X y z. Yeah. Yeah.

Oh, that's great. That's the by far, my most popular blog post every single day is how to comment in React. You know? Yeah. Simple. But it like, everybody has to learn that, and everybody forgets it. Yeah. That's great. So what does the local dev experience look like then? I I know you noticed, you mentioned that there's, like, Fierce Node and Git integration, but, like, let's say you were starting a brand new Shopify theme. Like, what what would your process look like for tackling it in, like, a modern way?

Well, recently, they've come out with the CLI for theme development, which is very helpful. So you can just sort of spin up a theme, which I guess is based on the Dawn theme. Am I correct, Anne? Mhmm. And you can connect it in your Shopify admin directly to a GitHub repo.

And so and that kind of connects it, which the good thing is about that, which this is all kind of new. It also like, if the if the merchant makes changes in the theme editor, it also automatically updates it to the GitHub. So you can keep it That's nice. A lot better. In theory, it's fabulous, and I love it. In practice, every single merchant will somehow disconnect it from the GitHub, and you won't know when they did that.

Yeah.

Once you start getting merchants involved with things, your beautiful dev process can kind of break down because so previously, the only way to, sort of upload a new theme to a theme store would be to upload a zip file. That's it.

Whereas now they have the ESLint integration, which is great. But if you duplicate that, theme, it no longer, is connected. So Oh. Yeah.

That's crazy. I always remember with the WordPress, I would, like, turn off the theme editor, like, which is wild that WordPress even lets you edit your theme Yeah. From the admin dashboard, and you can break the dashboard. PHP 5. Yeah. I've done that. Yeah. Yeah. And, like but people would just, like, tweak that, and then your your version control is out of date. Right? Or you don't Node, and you push a new Vercel. You overwrite their changes. And, yeah, that can get really messy.

But what about, like, local dev? Is that a thing? Is there, like, live reload? When I did it, it was simply just copy paste it in, save it, go back to the page, and refresh. That whole cycle was very slow.

Yeah. So the CLI actually has like, it'll create, like, a local, URL for you to kind of spin that up. So then it's sort of a matter of, like, keeping all of your branches. Like, a lot of people have, like, a dev and a production branch, you know, classic.

And then so you have your local.

So, yeah, it works really well.

I often find, again, because there's often that disconnect with GitHub, the alternative method to still be able to work locally, is to use something called theme kit, which is, basically, you have, like, a config .yml dot YAML file, and then, that will connect you directly so you can push, to the store.

The only downside with that, as Trudy was saying, is that it doesn't have that backwards compatibility. And so all of the content for, pages and, like, the content for sections is saved in these JSON files.

And what can happen is if you accidentally save that JSON file or do a theme deploy Yeah. It's it's it's replaced with the the old version if the merchant's been editing things at the same time you're working on stuff. Yeah. Yeah. So in pract in the most practical way to do it is use theme kit and, like, work on a

development theme and then just do all your work there and then publish that theme. And then next time you go, like, duplicate the live theme and then work on that and publish it. That's like the most practical way right now. The CLI is beautiful, but you can't trust some people.

I was gonna say, is this something that Shopify is is working on or improving, or is this just a way of life there?

Well, the the the GitHub CLI is the improvement. Okay. Yeah. And it really works well. And, like, for me GitHub like, as an agency, I can, like, tell my clients, like, train them to understand how it works and be, like, make changes to the dev Node, because I'll usually have 2 connected. The problem comes in when, like, an app they'll, like, email an app and be like, oh, something's not working with the app. And the app company will come in and and just do a duplicate of the theme and make changes because they don't wanna touch the live theme. So it's I haven't found a way to, like, get everybody on board with not disconnecting the GitHub.

Okay. And what about, like, like, typings or anything like that? Like, is there autocomplete in when you're working in Versus Node and you have, like, product dot, does it auto complete, like, the all the possible fields for you there? Yeah. That's nice. Can you get, like, just a Shopify store, like, full of of all the possible combinations? You Node, like, a a shirt with, like, something that's sold out or or different variants that are complicated? You know? Like, you kinda have to throw the kitchen sink at all the possible different layouts to dev against.

Yeah. So there's a couple ways to do that. The, when you're actually setting up a new development store, so if you have a partner account, you don't have to pay for stores that you're working on. You just set up, like, a dev, store.

And they now have the option where you can populate it with, like, example products and and that kind of thing. So previously, the way that we used to do it was having to upload a CSV that had all those different variations so you can you can still do that, and I still have, like, my my go to Node, with, like, you know, all the different variants, but, that's usually the way that you do it. There's lots of oddities with the Yeah. Shopify.

What do you hate about Shopify themes?

So many. No.

I would say the blog frustrates me. But mainly because I'm dealing with something right now that all I want to do is get blog posts, like a like a loop of blog posts that are written by a certain author.

And you'd think that would be super straightforward to do. Right? But it's not. You can, you can loop through all the blog posts. That's fine.

But there's actually a limit. You can only do 50, so, it stops after that. So the only real way to do it is I'm going to have to use the storefront API and, like, pull in the blog posts based on the authors and then render them with JavaScript instead as opposed to using liquid. And it just feels frustrating. Yeah. Generally, looping in Shopify is often because there's no sort of where clause. So sometimes the answer is, like, loop through every single product. And if you have, like, thousands of products in the store, that's just not a practical

answer.

Oh, man. And that all of that so all liquid happens server side. And then if there's something you can't do, you have to pick it up once the page is loaded, hit the API, come back, and then somehow additionally template out that extra markup. Right? Yeah. And what do you usually use use? Like, a React for that, or you just vanilla JavaScript?

Depending on the complication. If it's something literally that's just, like, displaying blog post, I'm just using Vanilla JS.

Yeah. Yeah. If it's something like a little bit more reactive, I'll use Vue JS. Because you can use the CDN, so it's really just it's easy to bring on to just 1 page.

Oh, okay.

That's great. And what about have you dipped into Hydrogen at all? So Hydrogen is like Shopify's headless CMS. So, like, if you wanna build a totally custom experience, which is incredibly difficult because there are so many little edge cases in building ecommerce websites. You know? Simply making your own cart from scratch is, like, not something I wish on on anyone.

But have you dipped into hydrogen at all? I have not.

Neither has I. No. No. And we we but we've had internal discussions

about We have opinions.

We have opinions. Yeah. It's just they were really pushing headlesses and probably still are as this, like, everyone needs headless. It's the, you know, site speed, everything.

You can have, you know, custom URLs, so, therefore, it's better for SEO and this sort of thing.

But their unfortunate reality is that talking about, like, building a custom checkout and that kind of thing Yeah. You need to have a dedicated dev team that knows what's going on, that's able to build you things rapidly, that's able to support you. And if you don't have the budget for that, it's a really not a great

move to do. Yeah. Yeah. Like, I I imagine you you give up. It's the same thing with WordPress JS you build a headless WordPress site, you're giving up the entire ecosystem of plug ins Yeah. That have a UI. Like so you guys run design packs, and you build

components that you can slot into your thing. Right? So you would be giving up all of the options that you have. The the annoying little spinner that comes up on every single Shopify website, you're giving that up. Right? Yeah. Yeah. Yeah. Yeah. So Yeah. You're also giving up the the the content management system that's Yeah. Built in that already is there, exists in Shopify. So a lot of people, you know, they'll use, like, put a content folder or whatever, all the various options. But then you're having to, like, completely

rebuild that aspect of it too. So Yeah. And like you mentioned, beyond just having a full dedicated team to build, you probably need a full or at least a team to support long term because you ship anything at Wes. A year from now, who knows what? It it doesn't have that same guarantee of working that you would if you had a managed Shopify

UI. You know? That's true. Like, you have to have it, like, whatever. And also, like, the content management, it's like you can't just swap out your banners every single single day unless you have Yeah. Like, unless you're getting a dev to do that or somebody who's comfortable, but a lot of people just aren't comfortable, like, going into the code. Mhmm. I haven't come across a use case apart from maybe the URLs and certain things that you I can't just build into a liquid theme.

Like, if there's, like, a really unique experience, I just build it in React or Vue

on that 1 page. And then everything else is standard, and you don't have to, like, rebuild everything from scratch. Yeah. That makes sense. And it's the same thing with the WordPress world as well is that, like, yeah, you can opt in. You have React Islands or JavaScript Islands where certain parts of the application are built in these frameworks, and the rest of it cannot could be entirely server rendered. Are people building, like, full websites in Shopify? Because I I know there's, like, pages and a blog, but I often still see people have like, they have their app, they have their marketing site, and then they have their their Shopify website.

Did you, in your experience, ever build just the whole website in Shopify?

Oh, yeah. Always. Yeah. I've actually built sites that don't even have an ecommerce component. Wow. Yeah. Really? Yes. Me as well. Yeah. Who's asking for that? Just it it because the theme editor experience, people really like it. Like, it's it's a lot more user friendly. Not as user friendly as some things, but I would argue more user friendly than WordPress.

So

it feels a little more Squarespace y. Mhmm. K. I did one for the Frankfurt Book Market, which Wes like, Scott content management system was good because each book was considered like a product, but they didn't actually sell it. It was just on the site for people to see. So it sort of, like, had the same back end ideas

like an ecommerce site, but they just weren't selling anything. Yeah. Oh, yeah. Yeah. Then you're not linking things together because we've talked about this many times. So maybe you have your your CMS JS like a Sanity or something like that, and then you've got your Shopify.

Somewhere between the 2 of those, you probably have an input in your sanity that says Shopify product ID. Right? And you're you're linking that from whatever. And if you do wanna display how many are left or all the different variations, then you're gonna have to make external API calls back and forth. So

I could see that being a benefit. It's like, if they if people have, like, a really extensive and robust blogging system, you can't really get that done in Shopify.

Like, you can have a basic blog, but you can't do what you can do in WordPress. So sometimes people will have a WordPress blog depending on how important it is to their business.

Awesome. Alright. Well, let's talk about apps and integrations as well.

So one thing we've learned by having the Syntax Wes store by the way, you can buy this, syntax. F m. Go to our swag store. It's run by Shopify. Shopify.

Yeah. One thing we learned is that, like, when there is not a feature, you gotta you gotta go to the App Store in Shopify, and you gotta you gotta build something. And this is a whole third party ecosystem of apps that people have built, to do it. So one example is we want to generate a whole bunch of coupon codes, and then give them out to to different people. So we had to use some there's no way to mass generate coupon codes in Shopify, so we had to, like, get some plug in to do it. So design packs, that is a Shopify app. Is that what that is? Yes. How does that work? That's not just liquid templates. Right?

Well, it it kind of we like to so it's interesting because a lot of people do have this, we've gotten pushback from merchants saying like, oh, I already have so many apps and I don't wanna slow down my store and this kind of thing, which is fair because I definitely run into apps where they're loading like, the 1 app is loading 2 different ancient versions of jQuery.

Oh my gosh. I don't know.

So that can happen where, you know, you add, like, 30, 40 apps, all the apps, and they're gonna add a lot of craft to your store. But we like to think about design packs as not necessarily an app, but more of like a section delivery tool. Because within Shopify, the way that a theme is made up is these different sections.

And so those are the little widgets and layouts and that kind of thing. So on average, most themes come with, like, I don't know, 10 to 15 sections, and that's it. So if you don't have what you need there, you're kind of stuck. You need to pay a developer to build a custom section, or you need to figure out how to do it yourself. So, what our app does is it adds in directly into the liquid theme code new sections

for your store. Okay. Cool. Yeah. And and so a lot of these integrations, are these things that people are setting up their entire like, they have a business to sell an integration. Is there a whole market of people building paid integrations?

Oh, yeah.

Yeah? Yes. Who's the like, I always ask this. Like, every time you get into one of these, like, really niche, areas, you always find out, like, there's a couple, like, millionaires in the space that just, like, be big. Like, there's there's some guy that made guitar riffs and sold them on a stock sound website and who has, like, a Ferrari Node. You know? Like Yeah. Yeah. Do is there is there anybody like that in the Shopify app store? Please don't tell me it's the whoever created the spinning wheel.

Oh, I mean, they probably are. That is what they

I bet they do very, very well. Yeah.

I think the really cool thing about it is that you can have 1 or 2 devs and have like an entire SaaS business on the Shopify app store.

The one that always comes to mind, because they're Canadian, is Bold.

They have quite a few different apps.

I don't know how crazy well they're doing. I don't think that anyone has Node ed yet. But Yeah.

It's interesting that, like, like Wes mentioned, in in any of these communities, there's always these niche, like, situations where people are making real money off of them. And it it goes to show, you know, a lot of people, when we do our podcast, we we talk about different career paths.

There's certainly a major career path just by getting really good at this kind of stuff and getting your stuff into the the marketplace. Right?

Yeah.

Absolutely.

And I think that but I what I don't know about Trudy, you can speak to this as Wes. But the biggest sort of mind shift for me when I was getting into Shopify was coming from just a purely web development background.

I had to learn so much about just ecommerce in general. Like, okay, what do people actually need? You know, conversion rate optimization, just about the whole it's so much more than you know, I used to be agency where a site would live for 3 months and they would be taken down. So that's been the thing.

You gotta have to, like, understand, like, the business aspect of it as well. Right? Because that's the thing with these things is that if you are helping somebody make money or helping them make more money like, my email newsletter subscription is silly expensive, but everybody pays the bill because it makes you money. Right? So you gotta you gotta think a little bit more about the the business aspects behind these things.

Yeah. Man, I'm just looking at this Bold. So Bold does they have a subscription product, and it's $50 a month and a 1% of orders, so they can scrape 1% off of your your order. So a $100 a month subscription,

they get a buck from that. That's pretty sweet. I will say some people that come over from, like, WordPress or what have you, they get a little sticker shock when they come into Shopify because they're like, why is this so expensive? Why am I spending this much fun? But to your point, it's because you you're running your business off of it. This is making you money at the same time. It's not just a, you know, a brochure site where people are gonna find out your store hours. This is you're actually selling things through here.

Yeah. Totally.

Can can we go deeper on design packs and, like, what it really gives you? A 170 expert built layouts? How does that how does that all work? Yeah. So,

essentially, when I worked at the theme company, a lot of times we would get these support tickets because we had 7 different themes.

And people would say, oh, I love this theme. I I like this, you know, this section. It looks great. But I I also like this section from this other theme. Can't I just mix and match? I wanna be able to have everything all in Node theme.

And so that's essentially what we've created. It's like little extra LEGO pieces for your, like, existing LEGO set. So, and what we've tried to do is because I do know all of the the very specific settings and how to make sure everything's integrated properly with existing themes, they just merge in as if they've always been there. And we make sure that they're the settings aren't overwhelming in terms of what you can change, but still give people enough control that they can match their branding, make sure everything looks seamless, and we keep on releasing new sections.

We also have templates as well as the sections, and those are prebuilt pages. So sales pages, landing pages, about pages, FAQ.

And so someone can add those, and they're preconfigured.

So they just have to hop in, add their own images and content, and then boom. There you go.

Also, we really lucked out because about 6 months after we launched the, our app, Shopify changed the way that themes were built. So prior to store 1 ESLint o or whatever, they, you could only have, like, flexible sections on the Node page. So our sections mostly were just for the home page. But then 6 months later, they finally, revealed sections everywhere. So now we are so it essentially turned our app from, like, something that you could put on the home page to a page builder.

Nice. Yeah. Wow.

That's great. Did you did you all know that was coming, or was that a happy surprise? Yeah? They had announced it 5 years previous, so we were Yeah. It was We hoped it would be coming in.

That's crazy. And so do you have to run I know some Shopify apps have to run their own servers to to run their own logic. Do you have to run servers, or is it simply just something, like, you can ship the whole application

as its own thing? No. We run servers. Well, we're running on Heroku. So we have, like, a Shopify app that, like, does the authentication with the store and does the billing and all of those sorts of things. Like, just the

it's not a very complicated app for that reason because most of the logic is in the sections. But Yeah. Okay. And how does billing work? Do you have do you have to run your own billing? Do you take credit cards, or does, like, Shopify just give you a cut? No. There's a billing API. So we just kinda send them, like, the amount, the interval, or whatever, and then take care of it. And does does Shopify take a cut of that as well? I assume so. Not anymore.

No. Really. And then they got rid of that. Yeah. Also about 6 months into our app, they were taking 20% off the top at the beginning when we just launched. And then now they don't unless you make over $1,000,000, then they start taking a hit. Wow. Oh, that's awesome of them. Yeah. Same thing with themes as well.

Really? Oh. Man, that's great because, like, they probably realize, like, you want they want to people building stuff for free for them. You know? Like, essentially, like, people are adding features to Shopify.

And if they can make money on that, then then go for it.

Yeah. On that note, I used to always describe us being kind of like a like a little remora fish on a shark where, you know, we have to be aware that we're building in the Shopify ecosystem, or we're building our business on this larger business. But But, honestly, these days, I think about it more of, like, mutualism because Yeah.

It it's mutually benefit. It goes both ways. It's not like we're just feeding off of Shopify. The partners bring a lot to the ecosystem as well.

Yeah. Has anyone ever been, like, Sherlock'd? Do you know do you know what that phrase means? No.

Node. Let me let me look it up. So there was an app on Mac Wes many years ago that did kind of, like, the finder pop up tool called Sherlock.

And when they released the pop up thing in macOS, They got Sherlock. Meaning, like, their entire app was made redundant because they built it right into the feature. So Amazon Basics does it as well. Oh, a top providing thing. Why don't we just build that into our our product ourselves? So have you ever seen apps get Sherlock like that?

Yes.

Unfortunately, a lot. Yeah?

Yeah. Which ones do you have any examples of some?

Well okay. So what often I'll I'll caveat this Sanity saying that, like, what often happens with Shopify is that they'll build something that people have been asking for that's been that apps have been providing that service for a while. Yeah. But oftentimes, they'll build, like, an API for it specifically.

And so it's still not super easy for people to use, or they'll have a really basic free app that does very basic things. But the most recent one I can think of recently are, like, stack discounts and, subscriptions.

Okay. Yeah. Because previously, there was no way to natively do subscriptions in Shopify, and then they changed that.

Oh. Yeah. Interesting.

However, I can't think of an example of, like I can't think of one, I'm sure there are, of things that have completely gone away because oftentimes, the apps that are offering those service will offer a bit more, like, than the basic that Shopify is doing. So

Yeah. And sometimes in the case of, they had a free product reviews app, but then there are, of course, a ton of competitors that were also offering reviews and this kind of thing. And what they've actually done is they deprecated the free Shopify reviews, app. So that's just so it's the kind of the opposite. Yeah. Yeah. Userland was doing it better.

And, And, like, in that example, where does where does that data live? Like, reviews. It does Shopify have the ability to store, like, custom metadata, or do those reviews sit somewhere else?

Trudy just got so excited. I think I should do a sample somewhere.

Yeah. So, like, Shopify has actually had meta meta fields for, like, as long as I've been working on it, but you literally it was very difficult. It wasn't like user friendly. Like, the merchants couldn't really access it. And then they came out with new meta fields that merchants can access, and they're a lot easier to use. And then they came out with meta objects.

And so they're really I mean, in some instances, it's it is and historically saved on, like, the the app servers.

But now Shopify is encouraging and made it easier to, store it in meta objects, which is like just kind of flexible data that you could use on anywhere in the store. So that's what they're pushing for, which I think is a good idea because then, again, that'll make apps faster because you're, like, living off of Shopify's, like, content delivery service instead of, like, you know, trying to serve it yourself.

Yeah. But, yeah, I'm obsessed with meta objects. It's my favorite thing.

And can you make, like, a custom UI? I guess that's probably does design packs make UIs that store in in that type of thing? Like, you you said, like, an image upload, and and maybe you type into a box because you have, like, a banner component. Is that where you're storing that data, or does Shopify have a, something else for that?

All like, for design packs, all like, with the UI, it's like all of the files are stored on Shopify's

file system. We're not storing anything. Yeah. And then in terms of integrating the metadata and meta objects, because, DesignPAX is built in a way, again, as if, like, a custom developer just came in and built it for your theme.

All of the that happens directly in the theme editor. So in the same way that you could add in, connect a meta field

with a regular section, you can do that with design packs as well. It's and to give just, like, sort of a concrete example of, like, why you might do it, like, you could make, like, FAQs per product and then store each one as a meta object, and then you just connect the meta object so it you don't have to create a different template. You can have different information on the product page without having to, like, create a separate template for each product.

Yeah. Okay. And that would just show up as, like for the user, it would just show up as a just a general text interface that, you know, somebody could edit if they needed to update that stuff. They're not having to get into code.

Yeah. Exactly. It's it's kind of akin to for any WordPress people, like advanced custom fields. Yeah. That's what I was gonna ask. Yeah.

Cool. Oh, that's awesome. I I'm pretty sure I bought my house on advanced custom fields.

You know? That was that was a good one. And that one was like I think you paid, like, $39 for I had a had a license for, like, 5 or 6 years. And I think a lot of people learn in in the WordPress world is that, like, you can make a little bit more money doing that type of thing and and support yourself so you can kinda continue continue things on.

I just use Vercel, and I had that baked in. Oh, yeah. Yeah. That was that's sweet. What about the downsides of of building apps on Shopify? What do you got there?

One thing probably my biggest complaint is that they changed Node APIs on a 6 month basis.

Really?

Mostly for developers, like, not for the front end stuff because they they it's like you could see that their, goal is to keep the front ends, like, the merchant store stable. But for the they roll out changes to the APIs a Scott, and we have to keep up with it. And, like, last summer, they decided to change their authentication from OmniAuth to OAuth and gave us 3 weeks to completely update our

app. Woah. Really?

And and so when, your app or the Shopify apps ESLint, in, like, a versioned way, You have to stay up to date with the modern version, or do you have to support all versions going back to a certain time? JS it even possible to host a Shopify app with an older version of Shopify?

No. So well, I mean, at the beginning, they didn't even have versions of some of the APIs, but now they've versioned it. Like, when the first like, I used to build Shopify apps for clients prior to, like, just private ones, and they didn't. I don't think they had versioning for their APIs for the app.

Now they do. But they will deprecate them probably within a year and a year and a half. So you can, like there's a few versions that you can use at any given time, but you you have to keep up pretty quickly.

Wow. Yeah. It it makes sense. Like, it's it's a hosted service. You know? And Yeah. Right now. When they change. Yeah. So you have so that's the thing. You're but it's good because it forces you to keep up with modern changes, but it's bad because you're always,

like, having to update things all the time. Yeah. And it's good it's good for competition too because it's not wildly difficult to sort of spin up an app and get it in the App Store, but it's more of the maintenance and, you know, making sure that you can handle the technical debt and that kinda thing comes along with it.

Yeah. Yeah. That's true. And you gotta, I guess, do support and make sure everything is up and running.

Yeah. Support. Oh, that's a whole other.

Do do do you do the all the support yourself? Like Yeah. That is I can imagine back in my WordPress days, the clients would ask me questions and, like, let alone you selling something where you're letting people do it themselves, you know, and they know just enough to be dangerous. So what kind of stuff do you see there?

I will say the the vast majority of the the people that we deal with are actually lovely for the most part. But it is very interesting to see some of the questions that come up because they sometimes aren't related to even our app. It's more just the Shopify user experience or different things like that. Yeah. Overall, it's actually really great feedback too. Like, if everyone that has, like, a SaaS based business or something like that, you're always looking to get feedback and improve. And so some of the suggestions that people have like, oh, I'd love a section that does this or, oh, do you have a setting for this? It's really nice because we're so small. We can just be like, yeah. Sure. Sure. Yeah. We can do that.

Yeah. And I think at the beginning, we sort of had this idea that people would want really, like, design opinionated sections. But then it turned out that people really wanted very generic sections with lots of customization options.

So it was good to get that feedback, or we would have been going down a path that maybe wasn't really a market fit. Oh, interesting. So you you give them all the knobs to turn. That that was actually a question I had is, like, how do you match it to their existing theme? Like, is this is there variables that get passed in for specific colors, light mode, dark Node, or do you just give them a whole bunch of knobs to turn and they make it look similar to their site?

So there are certain things that we can pull in, just based on you know, we're not overriding all of the, like, header classes, for example. So we'll be able to, like, inherit those from the theme. There are other things like color schemes, which we haven't actually, like, gone down that path too much.

But what we try to do is just give specific, like, a color here, a color there.

And then we're also, our sections have you can put in your own custom CSS snippets for, large screen sizes and small screen sizes. And so that gives us a lot of power on support because someone will be like, oh, can I do this then to this? And we've built them in such a way that it makes it really easy to be like, yeah. No problem. Like, we're consistent with all of our class names and that kind of thing across all the sections.

So it makes it a lot quicker for that. Yeah. That's actually my favorite support. If somebody's like, can you make this section look a bit different? I'm like, let me see if I can.

And how does that work? Do they do they add you into the Shopify? Do they just send you their password? Are are you able to reach in?

It's really nice. It used to be that you actually had to create a staff account for their store, but Shopify rolled up this thing called collaborator access.

Yeah.

So as and as long as you have they have the app installed, you don't need to send, like, a code or anything like that. You literally there's

an area in the partner dashboard where you go, you say Wes store access, and then they just have to approve it. That's cool. What are the most popular blocks? Do do you do you even have stats on, like, the most used blocks that you have? Oh, yeah. That'd be interesting. We do.

We find that a lot of people really like,

video.

So things like, so there's this term UGC in ecommerce, user generated content. Yeah. So anything that provides social proof, people really like adding that to their ecommerce store. So video testimonials or, like, how to videos.

So those tend to be quite popular.

Slideshows, carousels, you know, the classes. So our our top 3 are video or banner with a video background, image with text simple, and value icons.

Man, that all tracks. Value icon Wes you just what's value icon? Is it icons with value?

I yeah. It's like 3 icons in a row with, like, some text below it, which I get.

Yeah.

Oh. It's like the UVP, unique value proposition. Yeah. Yeah. You have those on my little tutorials. I've used those. Yeah. Yeah. Every that's every website in the world has those. That's awesome. Well, it makes sense that that's most popular. And that's the thing that confused us because we're like, isn't this part of most themes? Like, it is. It's just ours is, like, more customizable in a lot of ways.

Yeah.

But, yeah, that's what confused us. We were like, oh, people want something super unique or different, but people actually just want the basics.

And, to make them, like, responsive and whatnot, you you ship all the CSS.

Does Shopify have any is there any bundlers, compilers, or anything like that for the code that you ship, or does that all have to be done before you, send it to the liquid template?

So we do minify things, but actually doing a technique with liquid, interestingly enough.

We don't use any type of, like, build tool or compilers or anything like that. We're we're kinda like Wes, like, bespoke artists in code Yeah. Kind of thing. Straight up. Yeah. Because at like, I I I've worked with a lot of build tools.

And to me, what we're what we're doing, it it doesn't really make that much sense.

Especially, they're actually gonna be releasing nested blocks soon warp, previously all of the blocks that you had had to be in this giant sort of, like, statement. And now those are gonna be able to be individual liquid files, so there's more everything's basically becoming componentized, which we're so happy about.

Yeah. No kidding. Like, we've talked to the folks from what was it? Builder. Io, and and they're they're essentially making a kind of a drag and drop CMS, but that that you build the the React components that are associated with it. And you see, WordPress has blocks Node, and, like, that's certainly the way forward with a lot of these types of things. So it's kinda interesting to see that Shopify JS going that way, and you guys are gonna be way ahead because you've built how many blocks already?

100 and 70.

Holy smokes. Yeah.

You can't even think of a 170 different blog. No. That's

We've got ideas galore.

Really? You just have a big list of of what people are asking you for, or are you just always looking at websites?

Both. And working with clients as well.

Yeah.

Oh, yeah. So they're asking for specific things, and you just make it into a reusable block right off the bat.

When we started, we had 10. And we're like, we're gonna run out of ideas really quickly, and that is the thing that we have not done.

We have a whole I and there's even, like, on our GitHub, we've got, like, just different, like, issues and stuff. It's like, oh, all these different ideas and yeah.

That's great, man. And Node totally other thing I wanna ask, Trudy, you are a, would you call yourself a digital nomad or just a a traveler?

I a little bit of a digital nomad. But, pre pandemic, I was going for 3 months. Now I'm just usually going for a month. Oh, okay. Oh, wow. And you're you're in Colombia right now? Yep. Medellin, Colombia. Yeah. Where are you at, like, a co working space? I am. I'm at the Sanity, which is a co working space that they have around Latin America. I've also worked out of the Mexico City one too.

That's so cool. I'm that Yeah. That is such a cool part about being a web developer is that if you wanna go either build an app or freelance and and build out Shopify things, you can work from anywhere. It's it's a lot trickier than I think people think because you gotta find a coffee shop, and schedules

sometimes don't line up. But it's pretty cool that you can travel around the world and still work. Yep. My biggest requirement is just, like, good Internet. But at the coffee shops here, the Internet's, like, 320 megabits. So I'm, like, that's not you Node? That's awesome.

Do you do any research beforehand to find out the Internet?

I usually talk to people, like, other digital nomads who know, because there's usually digital nomad communities.

So I find out that way.

Yeah. Go back and and listen if you haven't and you're out there and you're interested in this kind of stuff. We did an episode on digital nomading with Eric Sartorius.

And he also he lived in Medellin. He lived in, Japan. He's lived everywhere doing this stuff, and he recently

moved his permanent base to Portugal. I mean, the guy's from Lansing, Michigan, and now he lives in Portugal full time. So They have a digital nomad visa. There's a lot more places that are having digital nomad visas that give you, like, 6 months to a year. Really? Mhmm. That's amazing. I didn't know that was a thing.

Yeah. He he's doing that, like, as a it's some kind of digital nomad to citizenship thing. I have no idea what it is, but it's a it's like a couple Yarn, and then he becomes a citizen of Portugal. So Wow. That's awesome. I haven't been there, but I've heard really good things.

Anything else about Shopify's ZymphaX we didn't touch upon before we wrap things up here? We also launched another app. Oh, let's hear about it.

So one of the things that we found was that, great. We've got all these sections. Cool. You can use them on different pages. But, you can't there's, like, the main product area. Like, think about you're on a product page. Right? And then you've got your buy buttons, and then there's also usually some information below that, like maybe, expander or a video or something.

Well sections can't go in there so we launched, an app called Product Blocks that are specifically sections that go into, that area.

Oh, and how does that work?

Well, it's just so so Shopify, sort of, like, for app developers offer this new type of thing called, like, an app block, which is confusing.

But they made a way that you can, like, set code that now just lives in Shopify, and the themes were all updated to allow this. So it's just a specific technology that Shopify created to allow that that's different from how sections work.

And one of the main ones that I was excited about is because I've done this for every single one of my clients is, like, what we call, like, fake variants or connected products. Because a lot of times, like, if you have, like, t shirts, like, you'll want to show all the colors, say, on a on, like, your collection.

Yeah. But you want them to look like they're 1 product. So basically, you could just add, like, little color swatches or, like, little product images that just Yarn actually links to other products, but they look like variants.

Yeah.

Oh, and and that will allow you to to build out one of those?

Yeah. Yeah. So that's, like, one of the, like, app blocks. So we have about I we have at least 5 app blocks right now. The the thing is Wes have so many ideas, but they have a limitation of first of all, what, 25 app blocks Yep. In total. Mhmm. Per app. But they also have a limitation of 100 kilobytes of liquid.

Oh, and that's not a lot, is it? A 100 k b. That's how many characters is that? And and that's total too for, like, all those 25 possible files. Yeah. For all Wes so that means total. Yeah. So you can have 4 kilobytes of liquid per block if you're around there, somewhat something like that.

Oh, man. That's that's not a lot at all. So you're probably trying to keep your class names as small as possible?

Well, if you want it. Yeah.

We we had them all built out. We're like, this is great. Amazing. And then we ran into this. So we had to rebuild everything with web components, and so we're actually pulling everything in with JavaScript instead because there's not the same limitation, that there is on Liquid.

Oh, that's crazy. So you oh, so you rebuilt them all in web components. That's really cool. So the web component Node, you go off and fetch some data, and then you can render it on out.

What's that experience like? Because we've had a couple people come on the show and and talk about building web components instead of, like, a React or Vue app.

I really love web components. I really like them too. Oh, wow. Cool. We were, like, contemplating. We're like, should we rebuild all of our design packs as web components? But we're like, that's not really practical.

We will. Dural eyes.

Yeah. Yeah. Right. Yeah.

You need, like, the web component to liquid transformer or some crazy thing like that. But, see, wouldn't it be cool if if Shopify let you, like, server render those web components? You know? Because I'm sure lots of the things you do are SEO is important. Right? And you kinda give that up if it's, yeah, all in JavaScript.

Yeah. You can kinda do a combo. There's some themes that use web components in some interesting ways. So I think we Wes would have most of the markup actually.

Yeah. Not like, but then extra things, like because Wes, go into, like, the full how we're actually bringing in JavaScript into the sections, but it would it would be a natural fit to move over to web components, I think. Yeah. That's one thing you don't think about with web components sometimes is that that markup can be just there in the DOM even if it's not

hydrated with JavaScript or doing anything.

Yeah. But I yeah. After rebuilding the web components, I am a big fan of web components.

Nice. Alright.

Let's move into the next section of the show, which is sick picks and shameless plugs.

I don't know if you came prepared with sick pick. I did. Yes?

Lay it on us. As a person with this hair and who likes to travel a lot, my sick pick is, the, like, like, bars of shampoo and conditioner.

Oh.

Which ones he use?

Well, I okay. So I've I am traveling with another girl with curly hair, so she's been letting me use her because I didn't know. So I don't know what brand it is. But one of our actual, users, like, one of the users who's used this design packs JS called the Black Travel Bos, and they sell that for, like, traveling and, you know, to keep the hair looking good.

And it's a solid, so it doesn't count towards your liquid. Right?

Yeah. Exactly.

Oh, that's nice. Yeah. Oh, liquid.

Oh, hey. I didn't mean to.

But, but I thought with my the amount of hair that I had, I was skeptical that I would be able to use it. Like, I thought maybe, you know, Wes hair would work with the bar, but I didn't think that it would be that easy to wash my hair with a bar of shampoo, but it it works pretty well.

Wow.

That's cool. I used to wash my hair with a bar Bos soap in high school because I wanted that, like, matted. I had, like, really long hair, and I wanted it to be, like, like, matted, almost like dreaded.

And,

yeah. And, like, bar of soap was like a like a just a gross bar of soap was the thing to use because your hair got all, like, wiry and disgusting.

That's good. Sick pick, Trudy. Good job.

Anne, what do you got for us?

I have recently so I listen to a lot of podcasts, and I, although not many dev related ones, interestingly. I like to see Yeah. Yeah.

But the the one that I have been listening to recently, well, it's been around for a long time. I've just never heard of it before. It's called Ologies.

It's, basically, it's just different like, literally what it sounds like. So Oh, cool. Yeah. All it's a very science based, but the host is good.

And they have kind of, like, fun, like, little editing things. I don't know. It's good. It's very entertaining. So it just describes the different ologies.

Hi, Jerome. Interview different,

like, experts and stuff. Like, I listen to 1 on, like, copy borrows. It's really good.

Yeah. Wes, you know whose favorite podcast this is? This is Caitlin, from Syntax. It's her favorite podcast. She shared this with me a while ago. Yeah.

Mathemetology.

Illustrations right away. Oh, this this would be a good, a good game for our live episode. What is gyrology?

Gyrology?

Yeah.

Or gyrology.

Gyrology.

I don't know. The study of gar, which is like a disgusting like, almost an alligator fish.

That's wild. A disgusting

Yeah. Alligator fish? Yeah. Look it up. I don't know if I could refer to an animal as disgusting unless it was I just did. It it is. Yeah. Yeah.

Oh, that's that's a great podcast. Cool.

And last thing we have here is shameless plugs. Plug away as many things as you like for our audience.

Designdashpacks.com.

Love it. Oh, also, we made a coupon code.

Oh, awesome. Yeah. Syntax Wes for 25% off the monthly TypeScript.

Sick. And is that all uppercase, or is that is that does that matter? Case. All uppercase.

Beauty. Awesome. Well, thank you so much for all your time and laying all the Shopify info on us. We really appreciate it, and, have a good one.

Peace.

Thank you.