0:00

Welcome to syntax. We got a

0:02

really good episode for you today

0:04

about coding with and for Shopify.

0:07

This is we've done a couple episodes

0:09

on Shopify, but Shopify always amazes me

0:12

that it is this entire world

0:14

of people who not

0:17

exclusively developed for it. But there's a lot

0:19

of people who are like their entire job

0:22

is just working with Shopify

0:24

themes, Shopify apps, Shopify integrations.

0:27

And it's a pretty wild world, especially because

0:29

e-commerce is one of the

0:31

biggest industries on the internet.

0:33

And I always find it really interesting to sort of dip

0:36

into that. So I conjured up two

0:38

of the smartest Shopify people I know, Anne

0:41

Thomas and Trudy McNabb. I taught

0:43

with Anne and Trudy when I

0:45

was at HackerU doing

0:47

part-time classes and doing bootcamps. And

0:51

they've both been doing Shopify for many, many years.

0:53

I'll let them talk about that. But welcome. And

0:55

Trudy, thanks so much for coming on. Thanks

0:58

for having us. Anne, you can

1:00

start. Give us a rundown of who you are and what you

1:02

do. Yeah, sure. Uh,

1:05

so I've been a front end developer for about

1:07

15 years now. That

1:10

seems a bit crazy to say, but I've

1:13

been through the flash times, the

1:15

like jQuery times, and then the framework

1:17

era. So I feel like I've sort

1:19

of seen it all. And

1:21

then, um, I got into Shopify sometime

1:23

around 2014, I guess I

1:25

built my first theme and I was working

1:27

for an agency and that kind of stuff.

1:29

And then I actually worked for

1:32

almost five years at an actual

1:34

theme company. So we were

1:36

building themes to sell on

1:38

the theme store. So it's there for,

1:40

yeah, five years. And then left

1:43

in 2020, the great resignation. And,

1:45

uh, yeah. And

1:48

then started a consultancy doing

1:50

a store audits and

1:52

then had this idea about maybe

1:55

building this kind of interesting app and reached

1:57

out to Trudy who is brilliant.

2:00

I was like, maybe she'd be interested in

2:02

partnering, and luckily she was. So yeah,

2:05

we launched our app DesignPax, and

2:07

we just had our third

2:09

year anniversary. So that's me.

2:12

Wow. And DesignPax is like a,

2:14

we'll go a little bit more into it, but

2:16

just to kind of frame of what it is,

2:18

it's a drag and drop theme

2:20

maker for Shopify. Is that fair to say?

2:24

Yeah, essentially it adds new widgets

2:26

and layouts to your existing theme. Okay,

2:29

awesome. And Tritty, who are

2:31

you? Who am I? Well, okay,

2:33

so prior to 2015, I

2:36

was a mainframe system programmer at a bank,

2:38

and then I took one of the part-time

2:40

rails courses at HackerU, and I kind of

2:42

decided I wanted to see if I could

2:45

go into web development and do my own

2:47

thing. So then I ended up quitting my

2:49

job and taking the bootcamp, which Wes was

2:51

my teacher for. Nice. That was

2:54

a long time ago. Yeah, everything I know about front

2:56

end, I know from Wes. Yes.

3:00

And then me and another student from

3:02

that class started an agency right out

3:04

of the bootcamp called Up at Five,

3:06

because we're morning people. And

3:09

then we quickly,

3:11

we were sort of doing anything, but then we

3:13

kind of quickly pivoted into just doing Shopify. So

3:16

from probably around 2015, 2016, I've

3:18

just been building custom Shopify

3:21

sites. And then Anne came to me

3:23

and she was like, do you want to build an app? And I

3:25

was like, I definitely do. Awesome,

3:28

so yeah, obviously both of you

3:30

have probably 15,

3:33

20 years of Shopify experience between

3:35

the two of you. So I'm excited

3:37

to talk about that today. So I

3:39

thought we would structure this

3:41

as like, let's talk about like

3:44

themes, building themes for Shopify. Then

3:47

we'll talk about Shopify apps and integrations

3:49

and whatnot, because I know that's a

3:51

wild world of nickel

3:53

and dime until you're paying like 600 bucks

3:55

a month. And

3:57

then we'll talk about design packs probably.

4:00

throughout the entire thing because obviously that's where a

4:02

lot of your expertise is and we'll see where

4:04

we go for it. So Shopify

4:06

themes, can you give us a rundown of

4:08

like, how do you build a theme for

4:10

Shopify? Oh, I

4:12

mean, that's a liquid.

4:15

So liquid is sort of the

4:17

secret sauce. So for

4:19

anyone that comes from like a WordPress background, like

4:21

in the same way that you would have like

4:24

sort of little WordPress snippets that

4:26

you're pulling in, Shopify has

4:28

a similar type thing where you're pulling

4:30

in information to your templates. But

4:34

I remember the first like Shopify

4:37

theme that I built, it is

4:39

very basic. And

4:42

a lot of times, actually similar to

4:44

WordPress as well, where you sort of start

4:46

with maybe like an existing theme and you

4:48

kind of create your own build off of

4:50

it and you learn from that and then

4:52

you kind of can go and build your

4:54

own from there. When we were building themes

4:56

at Sandbox, that's the theme company

4:58

that I was working at, the design

5:00

and development would take at least six

5:02

months, because everything had to

5:04

be very specific in order to get it

5:06

into the theme store, the level of curation

5:08

was very high, it's not

5:11

like they would just accept anything. So

5:13

there's very specific rules that

5:15

you have to follow when it comes

5:17

to settings, how things work, even the

5:19

way that things are labeled and named.

5:21

But the actual development of themes, I

5:23

wouldn't say is like wildly

5:25

complicated. Would you agree, Trudy? Yeah,

5:28

it's like liquid

5:30

templating, HTML, CSS, anything else you want

5:32

to do, but that's the basis. Cool.

5:35

And do you feel like you have like

5:38

enough control with liquid? I

5:41

did a ton of magento work in

5:43

my past life as a magento developer.

5:46

And then when we did our syntax site, I

5:48

got into the liquid templates a

5:50

little bit on Shopify. And

5:52

I was really amazed at how much was

5:54

there, but I didn't get any deeper than

5:56

just changing some values. So do you really

5:59

have full control? inside of those templates?

6:02

I think yes, because from

6:04

the agency perspective, Anne was dealing with the

6:07

theme, so she had to follow the guidelines and

6:09

everything. From an agency perspective,

6:11

my favorite thing is making Shopify

6:13

do things that you don't think

6:15

it can do. Mm-hmm. Mm-hmm. So

6:19

I would be integrating Vue.js

6:21

or React into just one

6:23

template, and they also have what

6:26

they call the Storefront API, which is essentially most

6:28

of the data that's available in Liquid, but

6:30

in an API, which sometimes

6:33

works better with React or Vue.js or

6:35

something. Oh, okay. So you can do

6:37

anything with Shopify, it just,

6:40

if you have the know-how. But you can integrate

6:43

anything into it. Interesting, because I guess

6:45

there's kind of two themes. You can make your

6:47

own theme. That's what I've done in the past.

6:49

Many years ago, I built a WordPress website,

6:53

and they said, we also want a

6:55

Shopify theme. So I was sharing styles

6:57

between the two. You can

6:59

do whatever you want. Like, Trudy, you can run

7:01

React inside of there. But if

7:03

you want to be able to sell it and

7:06

allow people to use it, it must be very

7:08

strict, right? For the

7:10

Shopify theme store, you can also

7:12

sell it on Themeforest or

7:15

individually. Is

7:18

Themeforest still kicking? Is that

7:20

a place where people go still? I

7:22

think so. I've added in Creative Market. But

7:24

I, so it's interesting. I

7:27

don't usually recommend themes from

7:29

there, mainly because the level

7:31

of curation is so high. So

7:33

you're not going to get that,

7:35

whether you're not going to have

7:38

the same requirements from those off-site

7:40

ones. Yeah, it's a crapshoot. The

7:43

only exception to that are the ones that

7:45

already have themes on the theme store,

7:47

and are also selling them off their

7:50

own site. Because there are a lot of themes. Oh,

7:52

yeah. Yeah, because we dipped into

7:54

ours really quickly, and Scott changed a few

7:56

things. And we were

7:58

selling out of a specific t-shirt. And

8:00

it would just change the word to unavailable and

8:03

I was like that should say sold out, you know and like

8:05

I dove deep into

8:07

these liquid templates And it's kind of funny when you're

8:10

diving into something new that you're not really comfortable with

8:12

but I could not figure out Where

8:14

the hell to change that one word of

8:16

unavailable and it's probably maybe you can tell

8:18

me but it's probably in some like internationalization

8:23

API somewhere In

8:25

the localization change it yeah,

8:27

okay sure I was probably really easy

8:30

I'm embarrassed now it still says unavailable

8:35

Liquid is not the most beautiful and

8:37

it's very confusing to look at what

8:39

before you know what you're doing Yeah,

8:42

I had to copy and paste it into my VS

8:44

code to get syntax highlighting for it So I was

8:46

like I need to have some color to let

8:49

me know what's what here but you know once

8:51

you get your handle on does feel like a Familiar

8:54

ask templating language right you can reason

8:56

about it once you yeah understand

8:58

it Yeah, and they're putting a lot more

9:00

before Trudy and I

9:02

both remember the olden days before they

9:04

had like github integration You

9:07

know in when building themes and now they

9:09

have like a VS code extension Which is

9:11

really great that they're improving all the time

9:13

So I think they they are actually trying

9:15

to put a lot of work into the

9:17

dev tooling Which is really nice to see

9:20

because they do rely on the partner ecosystem

9:22

quite a bit So it's it's

9:24

nice to get that from them like who it makes

9:26

our life easier Yeah, totally

9:29

I I have most of my experience in

9:31

liquid from doing email marketing Yeah, because anytime

9:33

I need to to customize one of my

9:36

emails that goes out like for example I

9:38

don't want to put a coupon code for

9:40

a course if somebody has already bought that

9:42

course right so that's just a simple if

9:44

Statement and I can pull data

9:46

from their profile you can put their name

9:48

inside of it right and it's it's it's

9:51

kind of funky because coming from a JavaScript

9:54

language it's it's not the the same

9:56

you're often piping values in and I

9:58

believe that's because Toby

10:00

was Ceo and founder of

10:02

Shopify was a Rails developers

10:04

that, right? Yeah, so it's

10:07

it's. a little bit more

10:09

rails. The. I. Think that.

10:11

With. Liquid specifically. they thought that it

10:13

would be so easy that designers could

10:15

you said? So they made a bunch

10:18

of choices that are counter intuitive to

10:20

a developers minds. My for instance, index

10:22

starts at one day later added in

10:24

Syria really says yeah. Oh wow. Like

10:27

there's a for loop.index and

10:29

as. For this.index Zero.

10:31

haha Oh man. Release.

10:35

And can you make your own methods

10:37

in. Are. You limited to

10:39

what they have. You. Can't

10:41

Snow? Okay, I mean even even

10:44

creating Blake's. Like.

10:46

Working with a raise. Is

10:49

funny and weird and like the

10:51

idea of like an object doesn't.

10:54

Really? Exist like you can kind of

10:56

say get a little that by it's it's

10:58

very as a little hacky gas and I

11:01

have a blog. With that was called

11:03

code Shopify before they may be changed The

11:05

or our Butts and the most popular with

11:07

how to make an array of liquid exist

11:09

as both have heard think. Is.

11:12

A and Treasure Trove The Treaty Have

11:14

these amazing tutorials it's called are too

11:17

many tabs. Dot explains like by

11:19

Sega. Oh

11:21

that's great, That's them. By far my

11:23

most popular blog post every single day

11:25

is how to comment in Reacts You

11:27

know as A as A supports but

11:29

it's It's like everybody has to learn

11:31

that nobody forgets a as great. So

11:33

what does a local Debs experience look

11:35

like? Then I know you notice the

11:37

you mention that there's a theist code

11:39

and get integration. but like let's say

11:41

you are starting a brand new shopify

11:43

seem like what would your process look

11:45

like for tackling it in like. A

11:48

Modern were. Ah,

11:50

Well recently they come out with the see A

11:52

Lie for theme development which is very helpful so

11:55

you can just sort of than up a theme

11:57

which I guess is based on the Don theme

11:59

am I correct? And

12:01

you can connect it. In.

12:03

Your shop fired men directly to a get

12:05

hub repo and so and that kind of

12:08

connects at which the good thing is about

12:10

that which this is all kind of new

12:12

it also like if that. If

12:14

the merchant makes changes, In

12:17

the same editor. It also automatically updates

12:19

it's the Get hub cc keep

12:21

all that size a lot better.

12:23

In theory it's fabulous and I

12:25

love it. Seems that this every

12:27

single merger will somehow disconnected from

12:30

the Get Hub and you won't

12:32

know what they did that her.

12:34

Yes it's just this once you

12:36

start getting birds and since all

12:39

the things you're beautiful them processing

12:41

kind of breakdown because so previously

12:43

the only way to. Sort

12:46

of upload a new seem to install the to

12:48

upload a zip file. As it's

12:50

I'm worried Now they have this get

12:52

integration which is great but as you

12:55

duplicate that ah seem. They

12:57

don't litter is detected so

13:00

oh yeah, That's

13:02

crazy I member with wordpress. I would

13:04

like turn off the theme editor like

13:07

which is wild. That's where press even.

13:09

Let's you edit your oh yeah from

13:11

the admin dashboard and you can break

13:14

the bastard. Here To be far as

13:16

young as Yahoo and like. But.

13:18

People were just like tweak. That and then.

13:22

Your your version control as as day right?

13:24

or you don't notice and you push a

13:26

new version the override inches and as I

13:28

can get really messy. But

13:30

what about like local death Is that

13:32

a thing as are like live reload.

13:34

When I did a was simply just

13:37

copy pasted in. save it, go back

13:39

to the page and refresh. That whole

13:41

cycle was very slow. Yeah.

13:43

So the cel I actually has like

13:45

it'll create like our local on your

13:47

own for you to plant spin up

13:49

a so then it's sort of. A

13:52

matter of like keeping all of your branches like

13:54

article have like a damn and production fresno Ca

13:56

six. am and as a hundred

13:58

local ah so Yeah, it works really

14:00

well. I often find,

14:02

again, because there's often that disconnect

14:05

with GitHub, the alternative method to

14:07

still be able to work locally

14:09

is to use something called ThemeKit,

14:12

which is basically you have

14:14

like a config.YML, it's a YAML

14:16

file, and then that

14:18

will connect you directly so you can push

14:21

to the store. The

14:24

only downside with that, as Trudy was

14:26

saying, is that it doesn't have that

14:28

backwards compatibility. All of

14:30

the content for pages

14:33

and the content for sections is saved

14:35

in these JSON files, and

14:37

what can happen if

14:39

you accidentally save that JSON file or

14:42

do a theme deploy? It's

14:45

replaced with the old version if the merchant's

14:47

been editing things at the same time you're

14:49

working on stuff. Yeah. So

14:52

in the most practical way to

14:54

do it is use ThemeKit and

14:56

work on a development

14:58

theme, and then

15:00

just do all your work there and then publish that theme,

15:03

and then next time you go

15:05

duplicate the live theme and then work

15:07

on that and publish it. That's

15:09

like the most practical way right now.

15:11

The CLI is beautiful, but

15:15

you can't trust some people. Yeah. I

15:18

was gonna say, is this something that Shopify is

15:20

working on or improving, or is this just

15:22

a way of life there?

15:26

Well, the GitHub Chile is the

15:28

improvement. And it

15:30

really works well. And for me as

15:33

an agency, I can tell my clients, train

15:37

them to understand how it works and be like

15:39

make changes to the dev one, because I'll

15:41

usually have two connected. The problem comes in when

15:43

an app, they'll email

15:45

an app and be like, oh, something's not working with

15:48

the app, and the app company will come in and

15:50

just do a duplicate of the theme and make

15:52

changes because they don't wanna touch the live theme.

15:54

So I haven't found

15:57

a way to get everybody on board

15:59

with not this. connecting the GitHub. What

16:05

about typings or anything like that? Does

16:12

it auto complete all the possible

16:14

fields for you there? Can

16:17

you get just a Shopify store full of

16:20

all the possible combinations? A

16:23

shirt with something that's sold out or different variants that

16:25

are complicated. You kind of have to throw the kitchen

16:28

sink at all the possible different layouts to dev against.

16:32

There's a couple ways to do that. When

16:36

you're actually setting up a new development store, if

16:38

you have a partner account, you don't have to

16:40

pay for stores that you're working on. You

16:43

just set up a dev store. They

16:48

now have the option where you can populate it with

16:50

example products and that kind of thing. Previously,

16:54

the way that we used to do it was having to upload a

16:56

CSV that had all those different variations. You can still do that and

16:58

I still have my go-to one. It's

17:04

like all the different variants, but that's usually the

17:06

way that you do it. There's lots of oddities with that.

17:13

What do you hate about Shopify themes? I

17:19

would say the blog frustrates me. Maybe

17:24

because I'm dealing with something right

17:26

now that all I want

17:28

to do is get blog posts,

17:33

like a loop of blog posts that

17:35

are written by a certain author. You

17:40

think that would be super straightforward to

17:42

do, right? But it's not. You can

17:44

loop through all the blog posts. That's fine.

17:47

But there's actually a limit. You can only do

17:49

50. It

17:52

stops after that. The only real way

17:54

to do it is I'm going to have to use the

17:57

storefront API and pull in the

17:59

blog posts. The

18:01

authors and then render them with

18:03

javascript instead as opposed to using

18:05

language and it just feels frustrating

18:07

that he has generally whooping and

18:09

shopify is often because there's no

18:11

sort of the where clause, so

18:13

sometimes the answer. Is like move through

18:15

every single products and if you have

18:17

like thousands of profits in the store,

18:20

this is that a practical answer? Oh

18:22

man. and that all of that's all.

18:24

Liquid happens, server side and then there's

18:26

something you can't do. You have to

18:28

pick it up once the pages loaded.

18:31

City A P I come back and

18:33

then somehow. Additionally, template out

18:35

that extra markup right. Yeah,

18:37

and would you use a you use music

18:40

A React for that? Are you just vanilla

18:42

Javascript? It depends on the cob. This is

18:44

something early as a flakes. Displaying.

18:46

Blog post I'm just using for knowledge as. Know

18:49

if it's something like a little bit more

18:51

reactive. I'll use huge s. Cause.

18:54

You can use a Cdn. Since really does, it's

18:56

easy to bring on to just one page. Outta

18:58

that's great And what about

19:01

every dipped into hydrogen at?

19:03

Also, hydrogen is like shopify

19:05

is. Headless Cms.

19:07

like if you want to build

19:09

a totally custom experience which is

19:11

incredibly difficult because there are so

19:13

many little edge cases in building.

19:15

Ecommerce website on you know says

19:17

simply at making your own cart

19:19

from scratch is like not something

19:21

I wish on on anyone but.

19:24

Have you dipped into hydrogen and all. I. Have

19:27

not, neither has no

19:29

and we we believe

19:31

had internal discussions. About we

19:33

have opinions. We have opinions yeah

19:35

I says they were really pushing headless as

19:38

and probably so far as just like everyone

19:40

needs have less it's that you know site

19:42

speed. everything does are you can has you

19:44

know it's custom you're around so therefore it's

19:46

better for a Ceo in the sort. Of yeah.

19:49

But. They're on virtual reality

19:51

is that? Talking about

19:53

building a custom check out and I

19:55

for anything you need to have a

19:57

dedicated Dev team that knows what's going

19:59

on. The able to build you things rapidly

20:01

that's able to support you and if you

20:04

don't have the budget for that is a

20:06

really. Not agree. It's move to do

20:08

an Ama like I imagine you you

20:10

give up his. The same thing with

20:12

Wordpress is a you build a headless

20:15

Wordpress site year, giving up the entire

20:17

ecosystem of plugins. Yeah, have a yeah

20:19

I like. So you guys run design

20:21

packs and you build components that you

20:23

can slot into your thing, right? So

20:26

you would be giving up. All

20:28

of the options that you have to that

20:30

annoying little spinner that comes up on every

20:32

single shopify web sites you given that operate

20:35

yeah as yeah yeah yeah. About

20:37

that you're also getting up the the

20:39

the content management system that the our

20:41

bills in that rd is there exists

20:43

and shopify so lot of people in

20:45

other use like but and. Content. Fuller

20:47

with all of as options. But

20:49

then you're having to lake completely real, but

20:51

rebuild that aspect of it too. So yeah,

20:53

in like you. Mentioned beyond just having a

20:56

full dedicated to build. You.

20:58

Probably need of home. Or at

21:00

least a team to support long term

21:03

because you ship. Anyhow, we have less

21:05

a year from now. Who knows why

21:07

is it doesn't have that same. Guarantee

21:10

of working that you would have yet managed.

21:12

Shopify you why He? That's true, like you

21:14

have to have it like whatever and also

21:16

like the content managements like you can't swap

21:19

out your banners every single day unless you

21:21

have an unless you're getting a depth to

21:23

do that or somebody who's comfortable but a

21:25

lot of people to are comfortable like going

21:27

into code. I haven't come across a use

21:29

case apart from maybe the you are else

21:31

and certain things that you I can't It's

21:33

built into a liquid beam. Like

21:36

if there's like a really unique. Experience. I

21:38

still didn't react or view. Or.

21:41

that one page and then everything else

21:43

is standard and you don't have to

21:45

like rebuild everything from scratch yeah i

21:47

make sense and is a same thing

21:50

with the wordpress world as well as

21:52

that like yeah you can often you

21:54

have react islands or javascript islands were

21:56

certain parts of the application are built

21:58

in these frameworks and the the rest

22:00

of it can be entirely server rendered.

22:02

Are people building full websites

22:05

in Shopify? Because I know there's

22:07

pages and a blog,

22:10

but I often still see people have

22:12

their app, they have their

22:14

marketing site, and then they have their Shopify

22:17

website. Did you, in your

22:19

experience, ever build just the

22:21

whole website in Shopify? Oh

22:23

yeah, always. I've actually built sites that

22:25

don't even have an e-commerce component. Wow.

22:28

Really? Yeah. Who's

22:31

asking for that? Just because

22:33

the theme editor experience, people really

22:35

like it. Like it's a

22:38

lot more user friendly, not as user friendly

22:40

as some things, but I would argue more

22:42

user friendly than WordPress. So it

22:45

feels a little more square spacey. I

22:48

did one for the Frankfurt Book Market, which was

22:51

like the content management system was good

22:53

because each book was considered like a product,

22:56

but they didn't actually sell it. It was just on

22:58

the site for people to see. So

23:00

it sort of like had the same backend

23:02

ideas, like an

23:04

e-commerce site, but they just weren't selling

23:06

anything. Yeah. Oh yeah. Yeah,

23:09

then you're not linking things together because we've talked

23:11

about this many times. So maybe you have your

23:13

CMS is like a sanity or something like that.

23:15

And then you've got your Shopify. Somewhere

23:18

between the two of those, you probably

23:20

have an input in your sanity that

23:22

says Shopify product ID, right? And you're

23:24

linking that from whatever. If you do

23:27

want to display how many

23:29

are left or all the different variations,

23:31

then you're going to have to make

23:33

external API calls back and forth. So

23:35

I can see that being a benefit. Yeah, the one thing

23:37

is like, if people have

23:40

like a really extensive and

23:42

robust blogging system, you can't

23:44

really get that done in Shopify.

23:47

Like you can have a basic blog, but you

23:49

can't do what you can do in WordPress. So

23:51

sometimes people will have a WordPress blog depending

23:53

on how important it is to their business. Awesome.

23:57

All Right, well, let's talk about apps and

23:59

integrations. the as well. So one thing we've

24:01

learned by having the syntax wags door by

24:03

the way to buy this the next out

24:05

of them go to our swags sorts. Roma

24:07

shot a sign of ice The Am when

24:10

we we learned is that like it when

24:12

there is not a feature. You.

24:14

Gotta You gotta go to the app

24:16

store in shopify and you gotta you

24:18

gotta build something in. This is a

24:21

whole third party ecosystem of apps of

24:23

people have built on to do some.

24:25

One examples we. Want. To

24:27

generate a home as a coupon codes and

24:29

then give them out turn to different people.

24:32

So we had to. Use. Some

24:34

there's no way to mass generate coupon codes

24:36

in shopify so we had to. They get

24:38

some plugin to do it So dry. Impact

24:40

that is a shopify app. Is that what

24:43

that is? How

24:45

does that work? That's not just liquid

24:47

templates writes. Ah, it is kind

24:49

of related. So. It's

24:52

interesting of our people do have this. We've

24:54

gotten pushback from Merchant saying like I have

24:56

so many apps and as as I don't

24:58

want a slow down my store in this

25:01

kind of thing. weed out there because I

25:03

deathly run in south swear they're loading think

25:05

the one after floating to your friend eating

25:07

versions. It's a very. Ah, my

25:09

guys are now so. That

25:11

can happen where you know you

25:13

ads. Like thirty four yaps, all

25:15

the apps and definitive add a lot

25:17

of craft your store. But we like

25:20

to think about design taxes not necessarily

25:22

an app that more of like I'm

25:24

Sex and Delivery tool because within shopify

25:26

the way that a theme is made

25:28

up as these different sections and so

25:30

lose a little with it's and Lance

25:32

next anything so on average. Most scenes

25:34

come with like I don't know send

25:36

the sistine sections and at it So

25:38

if you don't have what you need

25:40

there's your kind of statue, need to

25:42

pay a developer to build a custom

25:44

section or you need to figure out

25:46

how sincere yourself. So our our app.

25:49

Does is it adds in directly

25:51

into the liquid am seen code

25:53

new sections. For historical. And

25:56

it's a lot of these integrations Are these

25:58

things said? People. People are setting up

26:00

their entire, like they have a

26:02

business to sell an integration. Is there a

26:05

whole market of people building paid integrations? Oh

26:07

yeah. Yeah? Yeah.

26:11

Who's the, like I always ask this, like every

26:13

time you get into one of these like really niche

26:17

areas, you always find out like there's a couple

26:19

like millionaires in the space that just like. Big

26:22

dogs. Like there's some guy that made

26:24

guitar riffs and sold them on a

26:26

stock sound website and who has like

26:28

a Ferrari now, you know? Yeah. Is

26:31

there, is there anybody like that in the Shopify app store?

26:33

Please don't tell me it's the whoever created the spinny wheel.

26:36

I mean, they probably are. That is

26:39

what they do very, very well. Yeah.

26:43

I think the really cool thing about it is

26:45

that you can have one or

26:47

two devs and have like an

26:50

entire SaaS business on

26:52

the Shopify app store. The

26:54

one that always comes to mind because they're Canadian is

26:56

bold. They have quite

26:58

a few different apps. I

27:01

don't know how crazy well they're doing. I don't think

27:03

that anyone has IPO'd yet. It's

27:08

interesting that like, like

27:10

Wes mentioned, in any of these communities,

27:13

there's always these niche like situations where

27:15

people are making real money

27:17

off of them. And it goes to

27:19

show, you know, a lot of people when

27:21

we do our podcast, we talk

27:23

about different career paths. There's

27:26

certainly a major career path just by

27:28

getting really good at this kind of

27:31

stuff and getting your stuff into

27:33

the marketplace. Right? Yeah,

27:35

absolutely. And I

27:38

think that, but I, what I

27:40

don't know about Trudy, you can speak to

27:42

this as well, but the biggest sort of

27:44

mind shift for me when I was getting

27:46

into Shopify was coming from just a purely

27:48

web development background. I had to

27:50

learn so much about just e-commerce in

27:53

general, like, okay, what do people actually

27:55

need? You know, conversion rate optimization, just

27:57

about the whole, it's so much more

27:59

than. I used to be agency where a

28:01

site would live for three months and they would

28:03

be taken down. So that's been the thing. You

28:07

got to have to understand the business

28:09

aspect of it as well, right? Because

28:11

that's the thing with these things is

28:14

that if you are helping somebody make

28:16

money or helping them make more money,

28:18

like my email newsletter subscription is silly

28:21

expensive, but everybody pays the

28:23

bill because it makes you money, right? So

28:25

you got to think a little bit more

28:27

about the business aspects behind

28:30

these things. Yeah,

28:32

man, I'm just looking at this Bold. So Bold

28:34

does, they have a subscription product and

28:36

it's 50 bucks a month and 1% of orders so

28:40

they can scrape 1% off of your order.

28:43

So $100 a

28:45

month subscription, they get a

28:47

buck from that. That's pretty sweet. I will

28:49

say some people that come over from like

28:52

WordPress or what have you, they get a

28:54

little sticker shock when they come into Shopify

28:56

because they're like, why is this

28:58

so expensive? Why am I spending this much

29:00

money? But to your point, it's because you're

29:03

running your business off of it. This is

29:05

making you money at the same time. It's

29:07

not just a brochure site where people are

29:09

going to find out your store hours. You're

29:12

actually selling things through here. Yeah,

29:15

totally. When we go

29:17

deeper on design packs and what it really

29:19

gives you, 170 expert built layouts, how

29:24

does that all work? Yeah, so essentially,

29:27

when I worked at the

29:29

theme company, a lot of times we would get

29:31

the support ticket because we had seven different themes

29:34

and people would say, oh, I love this theme.

29:37

I like this section. It looks great.

29:39

But I also like this section from this

29:41

other theme. Can't I just mix and match?

29:43

I want to be able to have everything

29:45

all in one theme. And

29:48

so that's essentially what we've created. It's

29:50

like little extra Lego pieces for your

29:52

existing Lego set. And

29:55

what we've tried to do is, because

29:57

I do know all of the very specific stuff, I'm

30:00

and how to make sure everything's integrated

30:02

properly with existing themes. They just merge

30:05

in as if they've always been there.

30:07

And we make sure that the settings

30:09

aren't overwhelming in terms of what you

30:11

can change, but still give people enough

30:13

control that they can match their branding,

30:15

make sure everything looks seamless. And

30:19

we keep on releasing new sections.

30:22

We also have templates as well as

30:24

the sections. And those are

30:26

pre-built pages. So sales pages,

30:28

landing pages, about pages, FAQ.

30:31

And so someone can add those and

30:33

they're pre-configured. So they just have to

30:35

hop in, add their own images and

30:37

content, and then boom, there you go. Also,

30:42

we really lucked out because about six months

30:44

after we launched our app, Shopify

30:48

changed the way that themes were built.

30:51

So prior to store 1.0 or whatever,

30:54

you could only have flexible sections on

30:57

the homepage. So our sections mostly were just for

30:59

the homepage. But then six months later,

31:01

they finally revealed

31:03

sections everywhere. So now we... Oh.

31:07

So essentially turned our app from something that you

31:09

could put on the homepage to a page builder.

31:12

Nice, yeah, wow. That's

31:14

great. Did you all know that was coming

31:16

or was that a happy surprise, yeah? They

31:18

had announced it five years previous, so we

31:20

were talking about it. We had hoped it

31:22

was coming at some point. That's

31:26

crazy. And so do you have to run... I

31:29

know some Shopify apps have to run their own

31:31

servers to run their own logic.

31:33

Do you have to run servers or is

31:35

it simply just something like you can ship

31:37

the whole application as its

31:40

own thing? No, we run servers. Well,

31:42

we're running on Heroku. So we have a

31:44

Shopify app that does the authentication with the

31:46

store and does the billing and all of

31:49

those sorts of things. It's

31:52

not a very complicated app for that reason

31:54

because most of the logic is in the

31:56

sections, but... Yeah, okay. And how does billing

31:58

work? Do you have... Do you have to

32:00

run your own billing? Do you take credit cards

32:03

or does Shopify just give you a cut? No,

32:05

there's a billing API. So we just kind of

32:07

send them like the amount, the interval or whatever,

32:09

and then take care of it. And

32:12

does Shopify take a cut of that as well? I assume

32:14

so. Not anymore. No,

32:16

really. And then they got rid of that. Also

32:19

about six months into our app, they were taking 20% off

32:22

the top at the beginning when we just

32:25

launched. And then now they don't

32:27

unless you make over a million dollars, then they start

32:29

taking a cut. Wow, that's

32:31

great. Awesome of them. Yeah. Same

32:33

thing with themes as well. Really? Oh, man.

32:36

That's great because they probably realize they

32:39

want people building stuff for

32:41

free for them. Essentially,

32:43

people are adding features to

32:46

Shopify. And if they

32:48

can make money on that, then go for it. Yeah.

32:51

On that note, I used to always describe us

32:54

being kind of like a

32:56

little Remora fish on a

32:58

shark, where we have to be aware that

33:01

we're building in the Shopify ecosystem, and we're

33:03

building our business on this larger business. But

33:05

honestly, these days, I think about

33:08

it more of mutualism because it's

33:11

mutually benefit. It goes both ways. It's not

33:13

like we're just feeding off of Shopify. The

33:15

partners bring a lot to the ecosystem as

33:17

well. Has anyone ever

33:19

been like Sherlock? Do you know what that phrase

33:21

means? No. No.

33:25

Let me look it up. So there was an app

33:27

on macOS many

33:29

years ago that did

33:31

kind of like the Finder pop-up tool

33:34

called Sherlock. And when

33:37

they released the pop-up thing

33:39

in macOS, they got

33:41

Sherlock, meaning like their entire app was made

33:43

redundant because they built it right into the

33:46

feature. So Amazon Basics does

33:48

it as well. Well, a top providing thing.

33:50

Why don't we just build that into our

33:52

product ourselves? So have you ever seen apps

33:54

get Sherlock like that? Yes.

33:58

Unfortunately, a lot of people. Yeah. Which

34:01

ones, do you have any examples of some? Well,

34:04

okay. So what often,

34:07

I'll caveat this with saying that like what

34:09

often happens with Shopify is that they'll build

34:11

something that people have been asking for that's

34:14

been that apps have

34:16

been providing that service for a while. Yeah.

34:19

But oftentimes they'll build

34:21

like an API for it specifically. And

34:23

so it's still not super easy for people

34:26

to use, or they'll have a really basic

34:28

free app that does very basic things. But

34:30

the most recent one I can think of

34:32

recently are like the Stacked Discounts and

34:35

subscriptions. Okay. Yeah. Because

34:38

previously there was no way to natively do subscriptions in

34:40

Shopify. And then they

34:42

changed that. Oh, yeah. Interesting.

34:44

However, I can't be even an example

34:46

of like, I can't think of

34:48

what I'm sure there are of things

34:50

that have completely gone away because

34:53

oftentimes the apps that are offering

34:55

those services will offer a bit more like

34:57

than the basic that Shopify is doing. So

35:00

yeah. And sometimes in the case of they

35:03

had a free product reviews app. But

35:06

then there are of course a ton of

35:08

competitors that were also offering reviews and this

35:10

kind of thing. And what they've actually done

35:12

is they deprecated the free Shopify reviews

35:15

app. So that's just

35:17

kind of the opposite. Yeah, user land

35:19

was doing it better. And

35:21

like in that example, where does

35:24

that data live like reviews? Does

35:26

Shopify have the ability to store

35:28

like custom metadata? Or

35:31

do those reviews sit somewhere else? Sure,

35:34

you just got so excited. I think you should

35:36

do that somewhere. Yeah.

35:39

So like Shopify has actually had meta

35:42

fields for like as long as I've been working on

35:44

it. But you literally, it was

35:46

very difficult. It wasn't like user friendly, like the

35:48

merchants couldn't really access it. And then they

35:50

came out with new meta fields that merchants

35:52

can access in their life easier

35:54

to use. And then they came

35:56

out with meta objects. And so they're really I

35:58

mean, in some instances, it's It is historically

36:02

saved on the app

36:05

servers. But now Shopify is

36:07

encouraging and made it easier

36:09

to store it in meta objects,

36:11

which is kind of flexible data

36:13

that you could use anywhere in

36:15

the store. So that's what they're

36:18

pushing for, which I think is a good

36:20

idea. Because then, again, that'll make apps faster

36:22

because you're living off of

36:24

Shopify's content delivery service instead

36:27

of trying to serve it yourself.

36:30

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

36:32

favorite thing. And

36:35

can you make a custom UI? I

36:37

guess that's probably, does DesignPaks

36:39

make UIs that store in

36:41

that type of thing? You

36:43

said an image upload

36:45

and maybe you type into a box because

36:48

you have a banner component. Is that where

36:50

you're storing that data? Or does Shopify have

36:52

something else for that? For

36:55

DesignPaks, with the

36:57

UI, all of the files are stored

37:00

on Shopify's file system. We're

37:02

not storing that thing. Yeah. And

37:04

then in terms of integrating

37:06

the metadata and meta objects,

37:09

because DesignPaks is built in a way, again,

37:11

as if a custom developer just came in and

37:13

built it for your theme, all

37:15

of that happens directly in a theme editor. So

37:17

in the same way that you could add in,

37:20

connect a meta field with

37:23

a regular section, you can do that with DesignPaks

37:25

as well. And to give just sort

37:27

of a concrete example of why you might do

37:29

it, you could make FAQs per

37:31

product and then store each

37:34

one as a meta object. And then

37:36

you just connect the meta objects. You

37:38

don't have to create a different template. You can have

37:40

different information on the product page without having

37:42

to create a separate template for each

37:44

product. Yeah. OK. And

37:47

that would just show up as, for the user, it

37:50

would just show up as just a

37:52

general text interface that

37:54

somebody could edit if they needed to update that stuff.

37:56

They're not having to get into code. Yeah,

37:59

exactly. It's kind of akin

38:01

to for any WordPress people like

38:03

Advanced Custom Fields. Yeah, that's what I was going to ask.

38:06

Yeah. Cool. Oh,

38:08

that's awesome. I'm pretty sure I

38:10

bought my house on Advanced Custom Fields. You

38:12

know, that was a good one. And

38:16

that one was like, I think you paid like 39 bucks

38:19

for, I had a license for like

38:21

five or six years. And I

38:23

think a lot of people learn in the WordPress world

38:25

is that like, you can make

38:27

a little bit more money doing that type of

38:29

thing and support yourself so you

38:31

can kind of continue things

38:34

on. I just used Drupal and

38:36

I had that baked in. Oh yeah. Yeah,

38:38

that was sweet. What about

38:40

the downsides of building apps on

38:42

Shopify? What do you got there?

38:44

One thing, probably my biggest complaint

38:46

is that they change the APIs

38:48

on a six month basis. Really?

38:53

Mostly for developers like that for the front end

38:55

stuff because they, it's like you could

38:57

see that their goal is to keep the

38:59

front end like the merchant stores stable, but

39:01

for the, they roll out changes to the

39:03

APIs a lot and we have to keep

39:06

up with it. And like last summer they

39:08

decided to change their authentication from Omnia

39:10

to OA and gave us three

39:12

weeks to completely update our app.

39:15

Whoa, really? And

39:18

so when your app, or the Shopify

39:20

apps exist in like a versioned way,

39:24

you have to stay up to date with the modern

39:26

version or do you have to support all

39:29

versions going back to a certain time? Is it

39:31

even possible to host a Shopify app with an

39:33

older version of Shopify? No.

39:36

So, well, I

39:39

mean, at the beginning they didn't even have versions

39:41

of some of the APIs, but now they've versioned

39:43

it. Like when the first, like I used

39:45

to build Shopify apps for clients prior to

39:47

like just private ones and they

39:49

didn't, I don't think they had versioning for their

39:51

APIs for the app. So now

39:54

they do, but they will deprecate

39:56

them probably within a year and a year and

39:58

a half. There's a few versions

40:00

that you can use at any given time, but

40:03

you have to keep up pretty quickly. Wow.

40:06

Yeah, it makes sense. Like, it's a hosted

40:08

service, you know? Yeah. Right. When they change.

40:10

Yeah, so that's what they do. But

40:13

it's good because it forces you to keep up

40:15

with modern changes, but it's bad because you're always

40:18

having to update things all the time. Yeah.

40:21

And it's good for competition, too,

40:23

because it's not wildly

40:25

difficult to sort of spin up an app

40:27

and get it in the App Store, but

40:30

it's more of the maintenance and making sure

40:32

that you can handle the technical debt and

40:34

that kind of thing comes along with it. Yeah,

40:37

yeah, that's true. And you've got to, I

40:39

guess, do support and make sure

40:41

everything is up and running. Yeah,

40:43

support. Oh, that's a whole other topic. Do

40:47

you do all the support yourself? I

40:51

can't imagine back in my WordPress days, the

40:53

clients would ask me questions, and let alone

40:55

you selling something where you're letting people do

40:57

it themselves. They know

41:00

just enough to be dangerous. So what kind of stuff do

41:02

you see there? I

41:04

will say the vast majority of

41:07

the people that we deal with are

41:09

actually lovely, for the most part. But

41:11

it is very interesting to see some

41:14

of the questions that come up because

41:16

they sometimes aren't necessarily related to even

41:18

our app. It's more just the Shopify

41:20

user experience or different things like that.

41:23

Overall, it's actually really great feedback, too. Like

41:25

if anyone that has a SaaS-based business or

41:28

something like that, you're always looking to get

41:30

feedback and improve. And so some of the

41:32

suggestions that people have, like, oh, I love

41:34

a section that does this. Or, oh, do you have

41:36

a setting for this? It's really nice

41:38

because we're so small. We can just be like,

41:40

yeah, sure. We can do that. Yeah,

41:43

and I think at the beginning, we sort of

41:46

had this idea that people would want really design

41:48

opinionated sections. But then it

41:50

turned out that people really

41:52

wanted very generic sections with

41:54

lots of customization options. So it was

41:57

good to get that feedback, or we would have been going down

41:59

a path that made it. maybe wasn't really the

42:01

market fit. Oh, interesting. So you

42:03

give them all the knobs to turn. That

42:05

was actually a question I had, is how

42:07

do you match it to their existing theme?

42:10

Is there variables that get passed in for

42:12

specific colors, light mode, dark mode, or do

42:15

you just give them a whole bunch of

42:17

knobs to turn and they make it look

42:19

similar to their site? So

42:22

there are certain things that we can pull in just

42:25

based on, we're not overriding

42:27

all of the header classes, for example.

42:29

So we'll be able to inherit those

42:32

from the theme. There are

42:34

other things like color schemes, which we

42:36

haven't actually gone down that path too

42:38

much. But what we

42:40

try to do is just

42:42

give specific, like

42:45

a color here, a color there, and

42:48

then we're also, our

42:50

sections have, you can put in your own

42:52

custom CSS snippets for large

42:54

screen sizes and small screen sizes. And so

42:56

that gives us a lot of power on

42:59

support because someone will be like, oh, can

43:01

I do this and this? And

43:03

we've built them in such a way that it

43:05

makes it really easy to be like, yeah, no

43:07

problem, like we're consistent with all of our class

43:10

names and that kind of thing across all the

43:12

sections. So it makes it a lot quicker for

43:14

that. Yeah, that's actually my favorite support. If somebody's

43:16

like, can you make this section look a bit different?

43:18

I'm like, let me see if I can. And

43:21

how does that work? Do

43:24

they add you into the Shopify? Do they just

43:26

send you their password? Are

43:29

you able to reach in? It's

43:31

really nice. It used to be that you actually

43:33

had to create a staff account for

43:36

their store, but Shopify rolled out

43:38

this thing called Collaborator Access. So,

43:41

and as long as they have the app installed,

43:43

you don't need to send like a code or

43:45

anything like that. You literally, there's an

43:47

area in the partner dashboard where you go, you

43:50

say request store access, and then they just have

43:52

to approve it. That's cool. What

43:55

are the most popular blocks? Do you

43:57

even have stats on like the most

43:59

used? blocks that you have? Oh yeah, that'd

44:01

be interesting. We do. We find that

44:03

a lot of people really like video.

44:05

So things like, so there's

44:08

this term UGC in e-commerce

44:10

user-generated content. Yeah. So anything

44:12

that provides social proof, people

44:14

really like adding that to

44:16

their e-commerce store. So video

44:18

testimonials or like how-to videos.

44:21

So those tend to be

44:23

quite popular. Slideshows, carousels, you know.

44:25

Yeah, so our top

44:27

three are video or banner with

44:29

a video background, image

44:31

with text simple, and

44:33

value icons. That

44:36

all tracks. Value icon where you just, what's

44:39

value icon? It's like

44:43

three icons in a row with like some

44:45

text below it. Yeah. Oh,

44:49

it's like the UVP, unique value proposition.

44:51

Yeah. I've used those on my blog tutorials. I've

44:53

used those. Yeah. Every website in the world has

44:56

those. That's awesome. Well, it makes sense that that's

44:58

most popular. And that's the thing that confused us

45:00

because we're like, isn't this part of most themes?

45:02

Like it is. It's just ours.

45:05

It's like more customizable in

45:07

a lot of ways. But

45:10

yeah, that's what confused us. We were like, oh,

45:12

people want something super unique or different, but people

45:14

actually just want the basics. And

45:19

to make them like responsive and

45:21

whatnot, you ship all the CSS.

45:23

Does Shopify have any, is

45:25

there any bundlers, compilers, or anything like that

45:27

for the code that you ship? Or does

45:29

that all have to be done before

45:32

you send it to the

45:34

liquid template? So

45:36

we do minify things, but

45:39

actually doing a technique with liquid.

45:41

Interestingly enough, we don't

45:43

use any type of like

45:46

build tool or compilers or anything like that. We're

45:49

kind of like, was like bespoke artists

45:51

in code. Yeah. Straight up.

45:54

Yeah. Because like I

45:56

worked with a lot of build tools. to

46:00

me what we're doing, it doesn't really

46:02

make that much sense. Especially

46:04

they're actually going to be releasing

46:06

nested blocks soon, where previously

46:08

all of the blocks that you had had to be

46:11

in this giant statement, and

46:13

now those are going to be able

46:15

to be individual liquid files. So there's

46:17

more, everything's basically becoming componentized, which we're

46:19

so happy about. Yeah,

46:22

no kidding. We've talked to the

46:24

folks from, what

46:27

was it? builder.io, and

46:29

they're essentially making a kind

46:31

of a drag and drop

46:34

CMS, but then you build

46:37

the React components that are associated with

46:39

it, and you see WordPress

46:41

has blocks now, and that's certainly the way

46:43

forward with a lot of these types of

46:45

things. So it's kind of

46:47

interesting to see that Shopify is going that way,

46:49

and you guys are going to be way ahead

46:52

because you've built, how many blocks already? Holy

46:57

smokes. You can't even

46:59

think of 170 different blocks. No, that's... We've

47:02

got ideas galore. Really? You just have

47:04

a big lens of what people are

47:06

asking you for, or are you just

47:08

always looking at websites? Both, and working

47:10

with clients as well. Yeah.

47:13

Oh, yeah. So they're asking for specific things,

47:15

and you just make it into a reusable

47:18

block right off the bat. When

47:20

we started, we had 10, and we're like, we're going

47:22

to run out of ideas really quickly, and that is the

47:24

thing that we have not done. We

47:28

have a whole... And there's even on our

47:30

GitHub, we've got just different issues and stuff,

47:32

with all these different ideas, and yeah.

47:36

That's great. And one

47:38

totally other thing I want to ask, Trudy, you

47:41

are a... Would you call yourself

47:43

a digital nomad or just a traveler? A

47:46

little bit of a digital nomad, but pre-pandemic,

47:49

I was going for three months now, I'm just usually

47:51

going for a month. Oh, okay.

47:54

And you're in Colombia right now? Yeah,

47:56

Medellin, Colombia. Oh, yeah. Are

47:59

you at like a... co-working space? I

48:01

am. I'm at the Selena, which is a

48:03

co-working space that they have around Latin America.

48:05

I've also worked out of the Mexico City

48:08

one too. That's so cool.

48:11

That's such a cool part about being a

48:13

web developer is that if

48:15

you want to go either build an

48:17

app or freelance and build out Shopify

48:20

things, you can work

48:22

from anywhere. It's a lot trickier than

48:24

I think people think because you

48:26

got to find a coffee shop and schedules

48:28

sometimes don't line up, but it's pretty

48:31

cool that you can travel around

48:33

the world and still work. Yeah. My

48:35

biggest requirement is just like good internet,

48:37

but at the coffee shop here, the internet's

48:39

like 320 megabits. So

48:41

I'm like, that's not, you know, that's awesome.

48:44

Do you do any research beforehand to find

48:46

out the internet? I

48:48

usually talk to people like

48:50

other digital nomads who know, because

48:52

there's usually additional nomad communities. So

48:57

I find out that way. Yeah. Go

48:59

back and listen if you haven't and you're out there

49:01

and you're interested in this kind of stuff. We did

49:03

an episode on digital nomading with

49:05

Eric Sartorius and he also, he lived

49:07

in Medellin. He lived in Japan. He's

49:11

lived everywhere doing this stuff and he

49:13

recently moved his permanent base

49:15

to Portugal. I mean, the guy's from

49:17

Lansing, Michigan, and now he lives in

49:19

Portugal full time. So they have a digital

49:21

nomad visa. There's a lot more places that are

49:23

having digital nomad visas that give you like

49:25

six months to a year. Really? That's

49:28

amazing. I didn't know that was a thing. Yeah.

49:30

He's doing that like as

49:33

a, it's some kind of digital

49:35

nomad to citizenship thing.

49:37

I have no idea what it is, but

49:39

it's a, it's like a couple of years

49:41

and then he becomes a citizen of Portugal.

49:43

So I haven't been there, but I've heard

49:45

really good things. Anything

49:48

else about Shopify design packs? We didn't touch

49:50

upon for a wrap things up here. We

49:53

also launched another app. Oh, let's hear

49:55

about it. So one of

49:57

the things that we found was that.

50:00

Great, we've got all these sections. Cool. You can

50:02

use them all different pages, but you can't. There's

50:05

like the main product area. Like think about

50:08

you're on a product page, right? And then

50:10

you've got your buy buttons. And then there's

50:12

also usually some information below that, like maybe

50:14

an expander or a video or something. Well,

50:17

sections can't go in there. So

50:19

we launched an app called

50:21

product blocks that are specifically

50:24

sections that go into that

50:26

area. Oh, and how does

50:28

that work? Well, it's

50:30

just so Shopify sort

50:33

of like for app developers offer this

50:35

new type of thing called like an app block,

50:38

which is confusing, but they made a

50:40

way that you can like set

50:43

code that now just lives in Shopify and

50:45

the themes were all updated to allow this.

50:47

So it's just a specific technology that

50:49

Shopify created to allow that

50:51

that's different from how sections

50:54

work. And one of the main

50:56

ones that I was excited about is

50:58

because I've done this for every single one of

51:00

my clients is like what we call like fake

51:02

variants or connected products. Because a lot of times

51:04

like if you have like t-shirts, like you'll want

51:06

to show all the colors, say on a on

51:09

like your collection. Yeah, but

51:11

you want them to look like their one

51:13

product. So basically, you can just add like

51:15

little color swatches or like little product images

51:17

that just are actually links

51:19

to other products that they look like variants.

51:22

Yeah. Oh,

51:24

and that will allow you to build out one

51:26

of those. Yeah,

51:29

yeah. So that's like one of the like app

51:31

blocks. So we have about we have five

51:33

app blocks right now. So the

51:36

thing is we have so many ideas, but they

51:38

have a limitation of first of all, what? 25

51:41

app blocks. Yep, in total per

51:43

app, but they also have a limitation of 100 kilobytes

51:46

of liquid. Oh, and

51:48

that's not a lot, is it? 100? No,

51:51

that's how many characters is that?

51:54

And then that's total too, for like

51:56

all those 25 possible files. Yeah, for

51:58

all 20. So that would Yeah,

52:00

so you can have four kilobytes of

52:02

liquid per block if you're around there.

52:05

Something like that. Oh

52:07

man, that's not a lot at all. So you're

52:09

probably trying to keep your class

52:11

names as small as possible. Well,

52:13

if you want to, yeah. We

52:16

had them all built out. We're like, this

52:18

is great, amazing. And then we ran into

52:20

this. So we had to rebuild everything with

52:22

web components. And so we're actually

52:26

pulling everything in with JavaScript instead

52:28

because there's not the same limitation

52:30

that there is on liquid. Oh,

52:33

that's crazy. So you, oh, so

52:35

you rebuilt them all in web

52:37

components. That's really cool. So

52:40

the web component loads, you go off and fetch some

52:42

data and then you can render it on out. What's

52:45

that experience like? Because we've had a couple of people come

52:47

on the show and talk about building

52:50

web components instead of like a

52:52

React or Vue app. I

52:55

really love web components. I really like them too. Oh

52:57

wow, cool. We were like contemplating, we're like, should

53:00

we rebuild all of our design packs as web

53:02

components? But we're like, that's not really practical. We

53:04

will not. That's our allies.

53:07

Yeah, right. Yeah. Yeah.

53:09

Yeah. You need like the

53:11

web component to liquid transformer or

53:13

some crazy thing like that. But see,

53:15

wouldn't it be cool if Shopify let

53:17

you like server render those web components,

53:20

you know, because I'm sure lots

53:22

of the things you do are SEO is

53:24

important, right? And you kind of give that

53:26

up if it's all in

53:28

JavaScript. Yeah, you can kind of

53:31

do a combo. There's some themes that use web

53:33

components in some interesting ways. So I think we

53:35

would have most of the markup actually. Yeah,

53:38

like, but then extra things like,

53:40

because we go

53:42

into like the full how we're actually bringing in

53:44

JavaScript into the sections, but it would, it would

53:47

be a natural fit to move over to web

53:49

components, I think. Yeah, that's one thing

53:51

you don't think about with web components sometimes is

53:53

that that markup can be just there in the

53:55

DOM, even if it's not hydrated

53:57

with JavaScript or doing anything. Yeah,

54:00

but I yeah after rebuilding the vid web

54:02

components. I have a big fan of web

54:05

components Nice. All

54:07

right Let's move into

54:09

the next section of the show,

54:11

which is sick pics and shameless

54:13

plugs I don't know if

54:15

you can't prepare to sick pic I did. Yes As

54:20

a person with this hair and who likes to

54:22

travel a lot my sick pic is The

54:26

like like bars of shampoo and

54:28

conditioner. Oh Which

54:30

ones do you use? Well, I

54:32

okay, so I'm I'm traveling with another girl with

54:34

curly hair So she's been letting me use her

54:36

because I didn't know so I don't know what

54:38

brand it is But one of our actual users

54:41

like one of the users who these design

54:43

packs is called the black travel box and

54:46

they sell that for like traveling and You

54:49

know, oh good and

54:51

it's a solid so it doesn't count towards your

54:53

liquid, right? Yeah, yeah,

54:55

exactly. Oh, that's nice But

55:05

uh, but I thought with my the amount of hair

55:07

that I had I was skeptical that I would be

55:09

able to use it Like I thought maybe you know

55:11

Wes's hair would work with the bar But I

55:14

didn't think that it would be that easy to wash

55:16

my hair with a bar of shampoo, but it

55:18

works pretty well Wow That's

55:21

cool. I used to wash my hair with a

55:24

bar soap in high school because I wanted that

55:26

like matted I had like

55:28

really long hair and I wanted it to

55:30

be like like matted almost like dreaded and

55:34

Yeah, and like far soap was like

55:36

a like a just a

55:38

gross bar soap was the thing to use because

55:40

your hair got all like

55:42

wiry and disgusting That's

55:47

good And

55:50

what do you got for us? Um, I

55:54

have recently so I learned

55:57

a lot of podcasts and I Although

56:00

not many dev related ones, interestingly.

56:02

I get that. Yeah. Yeah.

56:06

But the one that I have been listening to recently,

56:08

although it's been around for a long time, I've just

56:10

never heard of it before. It's called Ologies. It's

56:14

basically it's just different, like literally

56:16

what it sounds like. So oh,

56:19

cool. Yeah, all it's a very

56:21

science based but the host

56:23

is good. And

56:26

they have kind of like fun, like little

56:28

editing things. I don't know. It's

56:31

good. It's very entertaining. So it just describes

56:33

the different Ologies. Hi, girl. Yeah, the

56:35

interview different like experts and stuff. Like I listened

56:37

to one on like copy bar. Yeah.

56:41

Wes, you know whose favorite podcast this is?

56:44

This is Caitlin from Syntax. It's

56:47

her favorite podcast. She shared this with me a while ago.

56:50

Yeah. Mathemetology. Illustrations

56:52

right away. Oh, this this would be

56:54

a good a

56:57

good game for our live episode. What

56:59

is Garology? Garology? Yeah. Garology.

57:02

Garology. I don't know. The

57:07

study of Gar, which is like a disgusting

57:10

like an alligator fish.

57:14

That's disgusting. Yeah. Alligator

57:17

fish. Yeah. Look it up. I

57:19

don't know if I could refer to an animal as disgusting. I

57:22

just did. I just did. Yeah. Yeah.

57:25

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

57:29

And last thing we have here is shameless

57:31

plugs. Plug away as many things as you

57:33

like for our audience. Design

57:35

dash packs dot com. Love

57:37

it. Also,

57:40

we made a coupon code. Oh,

57:42

yeah. Syntax 25 for

57:44

25% off the monthly subscription. Sick.

57:48

And is that all uppercase or is that is that

57:51

does that matter? Yeah. All uppercase.

57:54

Cool. Beauty. Awesome.

57:57

Well, thank you so much for all your time and laying all the Shopify info on

57:59

us. We really appreciate it. and have a

58:01

good one. Peace.

58:04

Thank you. Thanks.