Shopify theme expert Anne Thomas answers your theme questions
In this episode, we'll talk to one of the most experienced Shopify theme developers on the planet: Anne Thomas.
You'll learn...
Anne Thomas is an experienced web developer who has helped create some of the best Shopify themes in the market. She spent almost 5 years at Out of the Sandbox as the Technical Director working on themes such as Turbo and Flex.
Her knowledge of the Shopify platform runs deep and she's recently started her own company, Shop Critique, where she works directly with merchants to help them makeover their shops and make sure they are using their themes and apps in the best ways possible.
Kurt Elster: Today on The Unofficial Shopify Podcast, we are going to talk themes. Oh my gosh, themes are one of the most important, stress-inducing decisions you make for your store. Because once you’ve selected a theme, you’re going to put a ton of time and effort and possibly money in the form of development into it. So, it really… It’s a high stakes decision for a lot of people. And then every Shopify merchant discovers, well, you’re gonna learn at least a little bit of theme development, otherwise you’re gonna be tearing your hair out. It just makes life easier when you understand your Shopify theme as a merchant, because with eCommerce, as you scale, some days it feels like a game of whack a mole where it’s like, “I got this issue on this one browser, on this one device. I gotta fix that. Oh, I need this app to fix… Oh my gosh.”
So, today I have found for you one of the smartest people on the planet when it comes to themes. Our guest today is Anne Thomas. She’s spent almost five years at Out of the Sandbox as their technical director working on a few themes you may have heard of, like Turbo and Flex. Yes, what? Turbo! My gosh, we’ve used that more than any other theme in the last three years. So, her knowledge of the Shopify platform runs deep, and she has recently started her own company, Shop Critique, where she works with merchants to help them make over their shops and make sure they’re using their themes and apps in the best ways possible, and it’s certainly… She has an offer for you at the end of this. She’s gotta plug herself, of course.
But today, I am going to ask her your burning theme questions and we are gonna talk through some theme issues. All right, enough of me. Let’s get into it. Anne, how you doing?
Anne Thomas: I’m doing really great. That was such a wonderful intro. Thank you for that. My goodness.
Kurt Elster: Oh, my pleasure.
Anne Thomas: I’m so excited to be here.
Kurt Elster: So, how long… When did you get involved with Shopify themes? How long have you been getting down and dirty with theme code?
Anne Thomas: Oh, gosh. I built my first Shopify theme, custom theme, I believe it was back in 2014 or… Yeah, it would have been 2014. 2013 or 2014. Back when I was working at an agency. And then working for Out of the Sandbox, I started working there in 2016, so it’s been a while. Yeah.
Kurt Elster: And you spent five years there, huh?
Anne Thomas: Yeah. So, almost five years. I just left this past year, but yeah, spent a good, long time there, and it’s just been… The Shopify ecosystem is just a fantastic place to be, I think. There’s really great developers and people doing really cool things, and so yeah, just was time to go on and start my own thing.
Kurt Elster: No, absolutely. And especially like in this industry, spending five years anywhere, that’s an eternity compared to maybe some other industries. Just tech moves so fast and this industry is so young, like realistically, very few of us have any idea what we’re actually doing. It’s just we’ve not been doing this that long.
Anne Thomas: Oh, it’s true, and I actually… So, I’ve been doing web development, not just Shopify but web development for over 12 years now, and you know, when I started it was ActionScript and Flash, so yeah, a lot’s changed.
Kurt Elster: Yeah, absolutely. Well, let’s talk about your time at Out of the Sandbox. What were you responsible for? What did you do there?
Anne Thomas: So, I was the third full-time employee that was hired and when I actually initially started, I was doing development and then also helping a bit on support, as well, which honestly was fantastic, because it really gives you that insight into what merchants are struggling with and what we never got questions about in certain themes, and then things that we got questions about all the time. So, that really helped a little bit informing our product roadmap, and where we were going, and that kind of stuff.
So, yeah, from there the team grew and I became technical director, and then had a team of six people, and yeah, it was a really fantastic journey.
Kurt Elster: So, are you directly responsible for some of these themes we know and love?
Anne Thomas: I mean, I worked with Brad and a lot of other great people on them, but I would say that… So, when I came on with Turbo, it was at a point where it was looking good, but there were definitely some things that I helped contribute to, so that was really fun to be able to work on new features, and then I would say we released in between Flex and Turbo, which not a lot of people know about, we released Artisan, as well, and that was in the theme store as opposed to selling off the theme store.
But I would say that the theme I probably have the most, that I was the closest with, would be Flex. In terms of building the platform and really coming at it from the angle of, “Okay, if I were a developer working at an agency back in the day, what would I have kind of wanted to sort of get up running quickly and sort of get something out the door?” And that’s where the inspiration for Flex came from.
Kurt Elster: When you were there, and you said you were doing support, what’s the thing that surprised you most? Like what’s the thing where you’re like, “Wow, I can’t believe that this is the thing that is making people pull their hair out.”
Anne Thomas: Oh. It’s hard to pin down just one. I would say… Well, it would probably be the theme updates. I think that one of the things that is tricky with Shopify themes is that unlike in other spaces, if you have an iOS app, or if you have a WordPress theme, you can do something called continuous deployment, where you’re sort of constantly pushing updates, and that’s totally fine, and people can just update and it’s easy breezy. That’s not the case with Shopify themes, unfortunately, so we have to be very careful about how often updates are released and also making sure that they’re as bug free as possible, which isn’t… QA is not perfect.
So, theme updates are definitely something that’s a pain point in Shopify, and then the other thing that we would also hear about quite a bit on support was just people wanting to customize things in terms of, “Oh, I want this button to be a certain color, or I want this font to be slightly larger or smaller.” Anything that we sort of left out and we made more of an opinion design decision about, those are generally the things that people would write into support about saying, “Well, I want to be able to change this.” And that’s always tricky to accommodate, because you either have to send them a little CSS snippet or build it as a setting into the theme.
Kurt Elster: Absolutely. And one of the things that’s gonna make this easier in the future, when we’re able to more completely separate content and code, is gonna be Sections Everywhere. And it’s been announced. It’s been announced at the last two Unites. We’re looking for it. It’s a huge… It’s a big paradigm shift, right?
Sound bite: Mindset shift.
Kurt Elster: So, what… Tell me about Sections Everywhere. It’s not available yet. We’re hoping and dreaming. What’s this thing potentially going to look like?
Anne Thomas: Yeah. I think that Sections Everywhere is gonna be great for a couple of reasons. One is obviously going to be having the functionality of on the homepage, for example, you have sections that you can add. Now, you can’t do that on other pages unless you’re using… You can kind of mimic it with blocks on a page.details section, for example. Or page.details page. But the nice thing about Sections Everywhere is this idea that okay, you can have that control and that unique content on a product page, or a blog page, or just like a regular page. Like being able to create a landing page that you can use for Sales or what have you, right now that’s actually not very easy to do in Shopify unless you’re using a page builder, or you get some custom development.
The other interesting component to it will be app sections, so how apps can actually have functionality in the sections, as well. So, I’m really interested to see how that gets put into place, but Shopify is generally fairly cloak and dagger in terms of you usually don’t know until you know. So, I’m trying hard not to make any sort of assumptions about what sections everywhere is going to fully look like until I have all of the details officially from Shopify and the announcements.
Kurt Elster: Yes. That is the safe bet. Because it’s software. Like it can change, and it has to accommodate… A feature like this has to accommodate literally a million individual use cases, right? And so, that makes it really complicated and subject to change.
Anne Thomas: Oh yeah, definitely. And even just from a development point of view, it’s a lot more difficult to store that amount of unique data that’s going to be across all those different page templates, and blogs, and that kind of thing without slowing down stores, so there’s a lot of things to take into account, for sure.
Kurt Elster: So, we’ve got Sections Everywhere coming down the pipe in the future. It will be fabulous and amazing.
Anne Thomas: Yes.
Kurt Elster: One of the recent updates we got was the Performance Report.
Anne Thomas: Yeah.
Kurt Elster: Which I’m happy to see a focus on performance. I was admittedly disappointed that the first version is just giving me Google Lighthouse PageSpeed scores, but I’ve already seen a few updates where it’s like okay, it is getting better and further from just… From “just” Google Lighthouse. But in keeping performance in mind, are there any obvious things to do or top fixes you see that merchants should look to or implement to make their stores faster? How, if I’m a merchant and I’m worried about PageSpeed score, what can I do to make my store faster?
Anne Thomas: Oh, gosh. Yeah, such a big question. You see it a lot these days, that’s for sure. And it’s interesting, because I remember working on Turbo back three years ago, and Turbo was actually… I think it was if not the first, one of the first themes to actually implement lazy loading and lazy sizes library in a theme, which is where it’s using responsive images to make sure that you don’t… You aren’t loading a 1,200 pixel image on your mobile phone.
So, we were very, very heavily investing in performance back when we were developing Turbo, and obviously the interesting thing too is that in three years, a lot of stuff changes in web development. That’s a very long time. So, I would say that in terms of currently making their stores faster, images make a big difference. I know if it is… It’s one of those things where you have to way what you’re doing to improve performance and also waying, “Okay, but you also want to make your store look good,” right?
Because if you strip out all of the images on your shop, it’s gonna load really, really quickly. But then your customers aren’t gonna actually see what your product looks like, and you have no lifestyle images, and you have no branding, so I would say the low hanging fruit is I would recommend doing a bit of a sort of self app audit. So, I don’t know if this is too technical for sort of average merchants, but I feel like a more savvy merchant can totally handle it. So, I’d actually recommend using something called a domain blocker to test out your store.
Kurt Elster: I don’t even know what this is. Run this past me.
Anne Thomas: Okay. Okay, okay. So, if you’re using Chrome, there’s a Chrome extension called Domain Blocker, and what it does is… And this is really, this is advice for merchants that are running let’s say 15 to 20 apps in their store. If you’re not running apps in your store, this is not for you. This is only for shops that have a lot of apps and they know that, okay, they have the most up-to-date version of their theme, so they’re like, “Cool, we’re good there.” And they’re really trying to figure out where are the bottlenecks? Why is might site not loading as fast as possible?
So, when you run it through a speed tool, so whether it’s Google Lighthouse, or WebPageTest is my personal favorite. I also think that TestMySpeedScore.com is quite good. And so, when you run it through any of those tests, what you’ll find is you’ll get back all of these URLs. You’ll be like, “Whoa, that’s a lot of information.” But you’ll find that some are sort of being identified as slowing down the store, so whether they’re in red, whether you can see that oh, it’s taking a really long time to load, or what have you. And then what you want to do is actually match up those… Look for keywords in that little string of letters and numbers that you see there, the little domain. Look for keywords that say like, “Okay, this says something related to this specific app.”
So, then what you’re gonna do is you’re going to install this domain blocker, and then you’re going to actually look at all the different domains that are being loaded on your shop, and what it’ll actually allow you to do is to block certain domains. So, what this does is you can then reload your shop and see, “Okay, is my shop significantly faster now?” And this is not… I wouldn’t recommend looking at all the numbers and this kind of thing. It’s more just sort of a perceived performance, because there are some apps out there that can slow things down quite, quite a lot.
Kurt Elster: Oh, I want to ask you to name some offenders, but I know I shouldn’t.
Anne Thomas: No, no. Yeah. Right. I want to keep all my friends. Yeah, there are definitely some out there, but it is good, I would say, with Shopify’s new emphasis on performance, because it does highlight and merchants start writing in being like, “Oh. I’m doing an audit of all of my apps, this kind of thing, and it’s slow. What’s going on?” So, they’ll kind of follow up, which is great, and then it puts more of an accountability on app and theme developers.
So, any who, with this Chrome extension, then what you can also do is if you right click on your page and go to inspect element, you’re gonna open up your web inspector, which I know is again, we’re getting kind of technical here, but open up your web inspector and you’ll see something called the network tab, and then in that network tab, this is actually will show you all of the files that are getting downloaded when you are… So, they’re going to servers and they’re grabbing these files and they’re coming back and putting them all together, and that’s sort of how your website is created, essentially.
So, you’ll see a little disable cache button when you’re on that network tab, and what that’ll do is when you refresh the page, it will not use the images and the files that are cached in your web browser. Instead, it’ll refresh everything, sort of so you can get a better sense of how your site is actually performing. Because when you’re just refreshing on your own, you’re actually not getting a very accurate view of it. You can get it a little bit better if you open it up in private mode, so like privacy mode, so if you’re on your phone or that kind of thing, it just gives you a better sense of where you can improve your performance. Like is your product page really slow? Are your collection pages really slow?
So, I know I’m talking a lot about how to test for speed, but I think it’s important to kind of arm yourself with more knowledge in terms of identifying, okay, there’s this one app that is wildly slow. They’re loading way too much JavaScript or something like that.” Then you know you can either go back to that app developer and say, “Hey, what the heck?” Or find a better app that doesn’t have those same issues.
Kurt Elster: I know you’re right and I know that it will become misguided for some people. We’ve got four apps in the app store and we intentionally made them 99% Liquid, so they run on Shopify server side and render before it ever hits the customer in the web. And a few times now I’ve had people go, “Hey, I really like your app, but I had to uninstall it because it was really slowing my site down according to this one tool that…” And like I know they’re misreading it, so I flat out… A couple times, this is neither here nor there, but I’ve told them. I said, “Hey, I know it looks like that. I know you think that. Do me one favor. Test the store without my app and test it with my app installed and see what the difference is.”
And then I never hear back. To date, I don’t know if anyone has ever taken me up on that challenge. And it’s like with one… If you have one conspicuous app that’s a really straightforward way to do it, but you’re right. If you’ got 30, 40 apps, which increasingly I see that. A store that will have 30 to 40 apps. I think doesn’t the average store have seven or eight? If I see less than double digits, I’m like, “Oh, wow. You only have a handful.”
Anne Thomas: Yeah. It’s true. There are so many. And that’s kind of why this Chrome extension is quite nice, because the worst thing you want to do, that you don’t want to do as a merchant, is go in and just start willy nilly just deleting your apps, just delete, delete, delete, because sometimes that doesn’t actually delete the code from your theme. So, don’t-
Kurt Elster: Yeah, that’s a real problem.
Anne Thomas: Yeah. Don’t do that.
Kurt Elster: Yeah, so the issue, so the Shopify app can install code directly into the theme. And honestly, I like those, because that’s Liquid code. It’s much more performant than say JavaScript, usually.
Anne Thomas: Usually.
Kurt Elster: You know, it can also go wildly wrong. Which we… The slowest site we ever built would take 30 seconds to load a collection, and it turned out it was just a loop issue that we fixed and suddenly the site loaded in two seconds.
Anne Thomas: Yeah. Loops are-
Kurt Elster: Anyway. Yeah. All right, so you install an app, and it adds a bunch of Liquid code, and then when you click uninstall, uninstall is such a misnomer. What it really does is just end the billing and the app’s connection to your store. And it’s done intentionally, so I’m told, so that you don’t have malicious app developers break the theme because it got uninstalled or try to remove their own code and then unintentionally break the theme. So, you… What I would recommend is A, make backups of the theme before you install and app, and then that way you can switch real quick.
Anne Thomas: Yeah.
Kurt Elster: If it slows down your store. Or use like a Rewind to run backups, so that you can restore it, or most… If people message me or submit a support ticket and they say, “Hey, I uninstalled your app. I just want to make sure all the code’s removed.” I’ll tell them, “All right, absolutely.” And we even trigger an email. On uninstall, they get an email that’s like, “Here’s how to remove all the code.”
Anne Thomas: Yeah. That’s great. I wish more theme developers did that.
Kurt Elster: No. Yeah, it would certainly be helpful. We were talking about performance. Shopify recently implemented WebP. Are you familiar with this change?
Anne Thomas: Yes. It’s been… I’m trying to think when they actually made that change, but I was really, really-
Kurt Elster: It was this year.
Anne Thomas: Yeah. It was definitely this year. I was really, really happy to see that.
Kurt Elster: Well, what is it? Why should I care and how does it work?
Anne Thomas: Okay, so the way that WebP works is… So, the goal with any type of image format is that you want it to load as quickly as possible, right? That’s the thing is that images are something that takes a long time to grab from server and so they also can be quite large, so it’s not uncommon to see really large images on a site, and the bad thing about that is not only for performance, but also for people’s data plans. So, I know that up in Canada, we have our phone bills and this kind of thing for data, it’s very, very expensive.
Kurt Elster: I know. What’s the deal with your Canadian cell phones?
Anne Thomas: Oh, they’re so expensive. They’re so expensive. And the worst thing is, is let’s say you only have 500 megs of data or something like that, which is not uncommon. I know that sounds ridiculous, but so you might… I’ve heard this before, where let’s say you’re testing, you’re not on a Wi-Fi network, for example. You’re just testing. And then you’re reloading the page and maybe you have on private mode, because you’re testing something out or what have you. You could actually kill your data plan very, very quickly doing it that way.
So, WebP, they are similar to .pngs in the fact that they’re lossless, but they’re actually 26% smaller. Did I just Google to see how much smaller they were? Yes, I did. But they’re really great. Basically, they’re what you want to be serving your images as, and there are lots of other apps and that kind of thing where you don’t even need an app. You can run them on your desktop instead for your images, so a lot of times with images, they might be saving certain things along with them. So, metadata, for example.
So, what these apps will do is they’ll go in and they’ll actually strip out all of that extra metadata. The goal at the end of the day really is just to make everything, whether that’s your images, whether that’s your files, whether that’s your .svgs, whatever, to make them as small as possible so that when they’re flying along those different tubes of the internet, they’ll actually get there faster. That’s why we use CDNs, for example, which is the content delivery networks. Shopify has one. It just means that you’re actually hosting those files on a server that gets closer to you.
Kurt Elster: Okay. Sweet. And to take advantage of WebP, my understanding is I have to do nothing.
Anne Thomas: Correct. Yep. Shopify handles it all for you.
Kurt Elster: And it just switched over and happened magically in the background.
Anne Thomas: Yep.
Kurt Elster: Oh, that rules.
Anne Thomas: Yeah. It’s pretty great.
Kurt Elster: So, we have an instant win. All right, I think my last performance question here is talk to me about video’s impact on performance, because video is an odd, a strange animal the way web browsers handle it, and it’s I’m sure in part that Google has a sizable investment in a certain streaming platform.
Anne Thomas: Yeah. Yeah. Definitely. You know what, it’s funny. I actually don’t have a huge amount of knowledge on this specific topic, video, to be perfectly honest. I do know that there are ways in terms of lazy loading your videos is always a good thing. Same thing with maps, so maps on the page, because what can happen is you might have a video that’s further down on your theme, or on your shop, or what have you, and if you haven’t sort of properly got those libraries set up so that maybe they’re being deferred on load and what have you, if they’re all loading right away, it basically just slows things down.
So, if you can kind of wait until the user has scrolled down to actually that area of the video, or what have you, it’ll actually help with performance in that regard.
Kurt Elster: Okay. Oh. Yeah. No, you’re right. So, we’ve done a lot with video and what saves you with video over photo and why a photo is way more likely to be detrimental to performance than a video is the video streams and it’s loaded asynchronously. Like I don’t… The page will render and then the video plays is what happens, and so by virtue of that, especially if you have like a fall back image and you do it as like the first frame of the video, no one will ever feel it. They won’t notice that it’s having to load a first stream. It’ll just look like it works.
So, counterintuitively, video way less of an issue for performance than anyone might think. So, if you’re holding off on video because you’re scared of its impact on performance, oh my gosh, don’t! I’d rather have an extra video than an extra photo on my page.
Anne Thomas: Yeah. And actually, on that topic, a lot of people think that .gifs are gonna be better for performance than videos.
Kurt Elster: Oh, no!
Anne Thomas: And that is not the case.
Kurt Elster: Yes. No. .gifs are a comically non-performant format. Like often when we do performance optimization or a site calls for a .gif, what Paul will actually do when he’s developing it is convert the .gif to video, to MP4 video. It’s called GIFV. It’s just a container format for video, but it is literally video with no controls, auto play looped, muted. And so, it looks and performs exactly the same as a .gif but in a fraction of the size. Isn’t that funny? That like a .gif is way bigger?
Anne Thomas: Oh, totally. But yeah, there is… I’ve definitely run across people are like, “Oh, .gifs, they’re so small, and ha ha.” And I’m thinking, “No!”
Kurt Elster: What are some of the biggest mistakes merchants make with themes? What do you see merchants doing that drives you crazy? Where you’re like, “Ooh! So close! No cigar!”
Anne Thomas: Oh, yeah. I think the biggest one, and this is mainly because I feel like merchants are hurting themselves when they do this, is when people use a free theme and they just use all of the monthly recurring apps for any extra functionality, rather than just paying the one-off cost for a premium theme. Because-
Kurt Elster: Yeah. That one’s penny wise and pound foolish.
Anne Thomas: Yeah. Yeah. Exactly. Because you know, a theme, it’s a one time cost, and then you have updates for a long, long time, and what I don’t think a lot of people realize is that themes, especially when they’re in the theme store, although we also did this at Out of the Sandbox for Flex and Turbo, which aren’t sold in theme store, but we still did the same thing, where any functionality that Shopify releases and says is mandatory for all the themes to get this update and what have you, all the merchants get that all for free. That’s just great. That’s fantastic.
So, I would say that there’s definitely times where I’ve seen people relying on apps where they could be getting it for free right from the theme. So, like a good example of that is the currency converter. So, if you’re using a theme, or sorry, if you’re using Shopify Payments, then all of the themes that are on the theme store have now, they’ve been updated to include language translation, which you do need an app for that, but then also currency converter, which as long as you have Shopify Payments, that currency converter is built right into the theme. So, if you’re paying a monthly fee for a certain currency converter, and you’re just using an old version of the theme, it just doesn’t make any sense to me, so that drives me crazy when I see it.
Kurt Elster: Yes. Yeah, I’ve seen that too, or yeah, you can see it’s like Debut theme with a million and one apps installed, and a lot of them are like… It’s like $3, $5 just to add a simple feature, which is… It’s great, but that also… I often tell people, “Hey, the best part about Shopify is the app store. The worst part about Shopify is the app store in that you can get access to just about any feature you want as an app. Also, you can get access to too much stuff.”
So, you know, it’s like in the food pyramid, it’s like dessert. You gotta balance those things out.
Anne Thomas: On the other hand, I do have sympathy for merchants, as well, because I know it’s not an easy thing to update themes-
Kurt Elster: Or learn theme development to be able to do it yourself.
Anne Thomas: Right. Exactly. So, yeah, I’m coming from at a place where I’m like, “Oh. Well, of course. You just update your theme.”
Kurt Elster: Right.
Anne Thomas: And you know, so yeah.
Kurt Elster: Yeah. As soon as you go, “Just.” Oh, well just do this. Just go open the theme editor and get dangerous with it.
Anne Thomas: Right. Exactly. It is that-
Kurt Elster: What? You don’t know HTML CSS JavaScript and Liquid?
Anne Thomas: Right. Right.
Kurt Elster: Okay, so tell me. Let’s say I’m that merchant and I want to be more dangerous with my theme. I really want to get dirty and break some stuff.
Anne Thomas: Sure.
Kurt Elster: What are some good resources for learning about Shopify theme development?
Anne Thomas: Okay, so I would say the best resource off the bat is to duplicate your existing theme, for sure, and there’s a very scary little button called edit code. So, now I don’t know if this is more just from my background in terms of I like to go in and break things. You know, you break it and then you sort of figure out what broke, and then go in and try to fix it. As long as it’s your duplicate theme, so as long as it’s an unpublished duplicate theme, what I recommend is going in and edit code.
And honestly, just sort of taking a lay of the land. Look at where you have certain settings, so if you see something that says section.settings.heading and then you see that lives between two divs and what have you, or an H1, or whatever, and compare what that looks like on your actual site. And then maybe add an exclamation point after those little curly braces and see, and then refresh the site and see what happens. It’s sort of that like, “Okay, you’re getting…” You have to not be afraid to kind of go in and tweak things a bit.
But for actual official sources beyond just kind of going in and looking yourself, there’s a couple ones. So, depending on what stage you’re at, the Shopify docs themselves, I feel like they’re actually fairly… They have some issues sometimes, but they have some really good layouts of the actual filters, the different Liquid filters, tips and tricks, that kind of thing. Shopify.dev is a good spot. Coding with Jan on YouTube is actually a really good channel that… He’s been putting out a lot of content.
For more advanced-
Kurt Elster: How do you spell it? Y-O-N?
Anne Thomas: Jan, so it’s J-A-N.
Kurt Elster: Oh, J-A-N. Okay.
Anne Thomas: Yeah.
Kurt Elster: I would have been like, “Oh, coding with Jan.” Oh, I found it. Okay. I will… Oh yeah. Coding with Jan, Shopify developer. I will put that in the show notes.
Anne Thomas: Yeah. I would say that in order to really get comfortable with Shopify theme development, you’re gonna need to be comfortable with HTML and CSS, so I would actually recommend… There’s all these great Liquid tutorials and that kind of thing, but for someone, especially for a merchant that’s just starting out, I would start at the very, very basics in terms of okay, what is HTML, what is a tag? What is an HTML element? What is the dom?
Kurt Elster: I agree, because if you know HTML, that rich text editor in Shopify that will inevitably if you get too fancy with it break something or get weird, or even just like editing emails, or like a little snippet, HTML’s really simple. It’s just a markup language. And once you know it, it becomes dramatically easier to like… A common complaint in Shopify is, “Oh, I can’t make the blog do what I want. My blog doesn’t look like I want. How do I do this?”
Well, if you know just the base… If you know HTML, and maybe just the tiniest amount of CSS in case you gotta throw something in line or mess with a float, it’s like a superpower. I mean, just knowing HTML and a tiny bit of CSS levels you up dramatically. And HTML’s a thing, like you can figure that out in half a day.
Anne Thomas: And the-
Kurt Elster: That’s the easy one.
Anne Thomas: Yeah, and the thing too is that the great thing about web development just in general is there’s so many free resources. So, some other ones would be Free Code Camp is really fantastic. It’s a great community. Frontend Masters I’ve heard is excellent. That’s more advanced, I would say. Oh, a really good one, and I don’t know if you have this. Have you heard of Lynda.com?
Kurt Elster: Yes. Yeah.
Anne Thomas: Okay, so Lynda.com has, and it depends if you like videos or not. Lynda.com is videos, but at least here in Toronto, it’s actually free if you have a library card. So-
Kurt Elster: Oh, cool.
Anne Thomas: Yeah, so I’m thinking probably there’s other areas that have free resources and that kind of thing. Sometimes even people have at local community colleges and that kind of thing. It really is just the basics of HTML and CSS, I love development, and I think that a lot of people get scared of it because it’s like, “Oh, it’s too technical,” or, “Oh, there’s math.” No, it’s very-
Kurt Elster: There’s no math.
Anne Thomas: No, there’s no math. There’s I think a lot-
Kurt Elster: CSS Calc was a thing, but we’re not gonna get into that.
Anne Thomas: That’s true.
Kurt Elster: A few developers were like, “Ha, ha, ha, ha, ha. CSS Calc.”
Anne Thomas: But I would say that I would probably avoid places like Stack Overflow unless… But it can be helpful, but in terms of just that introduction, places like Smashing Magazine, CSS Tricks, Dev.to. I find dev.to has been… It recently came about. And then I’m gonna do a little personal plug. I actually also do teaching and consulting, so on Shop Critique I do one-on-one consulting, so if anyone’s also interested with that, I love teaching development and that kind of stuff. Yeah.
Kurt Elster: Oh, cool. All right, let’s go back to the trash talking. What’s your biggest pet peeve with Shopify themes?
Anne Thomas: Ooh. I really like developing Shopify themes, but it was a struggle. I think the biggest one, if I had to choose one, would be not being able to actually have a proper local environment where you can build an entire site without needing an internet connection. That one is very annoying, especially… Yeah, and I understand why they do that, because I don’t really want to manage multiple databases and that kind of thing, but yeah, I’d say that would be a pain point in terms of development.
The lack of child themes, so for anyone that is familiar with WordPress, again, this is development related, but in terms of the maintainability of themes, especially when you’re taking let’s say a premium theme and then customizing it in some way, maintaining that over the long run can be a huge pain point.
And then I guess probably the lack of metafields. That would also be… Sorry, that’s a couple. That’s not really the biggest. Those are a couple of the few that I would say.
Kurt Elster: Yeah. No, I could definitely see those. Yeah. Mine is I really… This is probably more like Shopify admin in general. I wish metafields were just like a native feature that I didn’t have to use an app to power.
Anne Thomas: Yeah. Yeah. Oh-
Kurt Elster: I think that would, like more support for metafields would make themes more powerful. I think it would empower more merchants. I understand like it would be a more advanced option. I don’t know. I would like to see that down the road some day. And I’m sure it’s a thing they’ve discussed, like there’s no way they haven’t.
Anne Thomas: Oh, for sure. Yeah. And as a theme developer, I would adore that, because there’s so much cool functionality that you can build with that, so yeah, that would be amazing.
Kurt Elster: So, when you’re looking for inspiration, where do you go? Is there a gallery site, an award site, are there certain stores you look at? Where do you get your inspiration from?
Anne Thomas: I have a massive Pinterest board that I use for inspiration. So, yeah, that’s probably where I save most things, like if I just see a site that’s really cool, I’ll pin it or what have you. As far as like eCommerce in general, I think we’ve chatted before about our mutual love of the Baymard blog.
Kurt Elster: Oh, I love Baymard.
Anne Thomas: Yeah, so they’re absolutely fantastic. In terms of sites that… eCommerce sites in general, I gravitate towards anything that has really interesting animations, or just those subtle little interface kind of effects are… I’m a huge fan of that. We actually have a Slack channel that’s called Nice Shops, where we post stores that we’re like, “Oh, this is really cool. This is really neat.”
So, I would say that yeah, there’s some really cool ones out there. I mean, I grabbed some from the… I don’t know if you want specific names. I did grab some from the Nice Shops channel. Not all of them are actually Shopify, but they’re just kind of neat.
Kurt Elster: Okay.
Anne Thomas: Um-
Kurt Elster: I mean, I’m sorry. Wait. Did you say they’re not all Shopify?
Anne Thomas: No, they’re not. No, no.
Sound bite: Eww!
Kurt Elster: All right. Hit me with a few.
Anne Thomas: Letterlab.co. Faculty.com. Birdies.com. Beeswrap.com.
Kurt Elster: You know what’s interesting, is I’ve not heard of a single one of these.
Anne Thomas: Yeah. Frankbody.com. Yeah. Those are… Oh, and as far as one, like a more of a curated site, I love Site Inspire. Big fan.
Kurt Elster: All right, so when you or anyone is considering theme development, how should they prioritize where they put in their effort? Like should my number one focus be page speed, in which case let’s just make a text-only site and strip out all the images? Should my focus be just pure aesthetic? It’s gotta be beautiful and end up in one of these showcase sites. Like poor usability, just build it high contrast, big font. Where… I know it’s a balancing act, but try and give me some way to prioritize it, because really there is a lot of competing interests in designing and developing a website.
Anne Thomas: I guess my question would be it’s different if you’re building a theme for the theme store versus a custom theme.
Kurt Elster: I’m gonna say custom theme.
Anne Thomas: Okay, got it. So-
Kurt Elster: Good question, though.
Anne Thomas: Yeah, so I would say that yeah, unfortunately performance is gonna be quite high there in terms of what you’re gonna have to prioritize, but I think something that also is worth prioritizing, even it is a custom theme, I mean this is a huge priority if it’s a theme in the theme store, but if it’s a custom theme, as well, is thinking about how your client is actually gonna be managing that theme on a day-to-day basis. So, that means making sure that all of the settings are really clear, you don’t have any confusing UX in terms of how you set things up, so it’s manageable if they like going in and updating their banners and stuff like that.
I would say that in terms of the actual code that you’re writing when developing a custom theme is keep it simple. So, that fancy, like, “Ooh, this is a really nifty piece of code. It’s great.” That logic, whatever you thought when you were having that moment where you were like, “Oh yeah, I’m gonna make it super fancy and I’m not gonna comment it at all.” You know, you might have… Whether it’s yourself or someone else six months from now, two years from now, whatever, they’re gonna have to come back and look at that code, which is gonna be legacy code at this point, and try to figure out what was going on.
So, I think for themes, because they’re products… To me, anyway. This is my own philosophy. But to me, themes are products, and they’re gonna be around for quite a while, and so they need to be maintained. So, coming from agencies where it’s like, “Oh, you build this site and it lives for a month, and then that’s it, and it no longer exists.” That’s not really the case for Shopify themes, so to me, keeping it simple and making sure that your code is readable, and maintainable, and understandable, is a super big priority, I would say.
Kurt Elster: No, absolutely. And it’s really, it’s you’re investing in thanking future… Things that future you will thank you for.
Anne Thomas: Yes.
Kurt Elster: Like don’t just put something in there, like, “Oh, here’s a quick fix. I’m just gonna apply that and set important for it and hope for the best.” And then not mark down why that was.
Anne Thomas: Oh my gosh.
Kurt Elster: And then pretty soon you end up with what my cohost, Paul, lovingly calls a Jenga tower theme, where you don’t want to knock over the Jenga tower, but there’s so much going on, and there’s so many hot fixes for various issues when you are playing eCommerce whack a mole that you change one innocuous thing and five other things break.
Anne Thomas: Oh my gosh.
Kurt Elster: And the downside with that, that’s what happens when you’re not careful and you don’t comment the stuff, and you don’t keep everything living, like all my changes should live in custom CSS at the end of the file, that kind of thing.
Anne Thomas: Yeah. It’s a really scary feeling to think, “Oh, I don’t know what’s gonna happen if I change this.” So, yeah, it’s also about being able to… Well, development in general, it’s you have to write things in a way that’s not super hard coded, but at the same time is specific enough that it will work for that use case and isn’t too broad. I mean, it’s… And then hey, you know what else is really important is naming things. That’s always a tricky part in development, is what you’re gonna name that specific variable so that it makes sense when you come back and look at it. Yeah.
Kurt Elster: Do you have any experience with user testing?
Anne Thomas: I do, actually.
Kurt Elster: Oh my gosh!
Anne Thomas: Yeah.
Kurt Elster: Can you give me the like five-minute crash course?
Anne Thomas: Yes. Okay.
Kurt Elster: Wait. Four minutes.
Anne Thomas: Okay. Yes. I can. Definitely. User testing, get users to test your site. I can make it less than that. Make sure that you’re actually talking to people and getting feedback on your site. Don’t live in a vacuum. Don’t assume everything is wonderful because you looked at it on your devices and you think it’s fine. Make sure you’re actually actively asking people.
In an ideal scenario for user testing, you’re actually gonna give them tasks. They’re gonna run through example, add something to a cart, et cetera. Again, in an ideal world, you would get them to talk through that process. You can record it. Ideally video, see where their mouse is going. But at the end of the day, the most important thing is just get that feedback. Don’t live in a vacuum.
Kurt Elster: And you make it sound simple, yet I would say a rare few merchants actually do this.
Anne Thomas: Oh, yeah. Well, a lot of people just send it to their friends and family and their friends and family are like, “Oh, it looks great.”
Kurt Elster: Yeah. Which, part of the problem is that they have a vested interest in your relationship. You need the honest feedback. I mean, some of the… On one of our largest sites, I mean some of the feedback we get from users via the support ticket… Oh, they do not hold back on when they’re like… I mean, everything is like, “This is the worst website I’ve ever used.” Like, “Calm down, buddy.” I don’t think it’s the worst.
But I mean you want the person who is not… who’s going to be unbiased about it.
Anne Thomas: Yeah.
Kurt Elster: And really, it’s just a matter of like ask someone who is not going to sugarcoat it to try and buy something on your website, or if they run into any issues, and you want a wide variety of people, because they’ll have a wide variety of devices. There’s how you think people are gonna use your website and how they actually use it.
Anne Thomas: Yeah. Definitely. I have one last tip, which is a little out there and weird, but… So, I don’t know if you know with artists what they’ll often do is they’ll look at their art in a mirror, because it gives you a different perspective on things. So, this is a really odd one, but what you can actually do yourself is try to navigate your site but look at it in a mirror. It’ll give you sort of a fresh perspective on where things are, what stands out, what colors, what fonts, something looks odd. Anyway, just an idea.
Kurt Elster: You know what I do? I lean back and then I blur my vision.
Anne Thomas: Yeah. Yeah.
Kurt Elster: If I unfocus my eyes and I can still figure out like, “Okay, this is where these elements are and this is the layout,” then I know it works. If I blur my vision and I don’t know what the heck I’m looking at anymore, okay, probably went too subtle and designers like subtle. Subtle is sophisticated.
Anne Thomas: It’s true.
Kurt Elster: It’s also not terribly usable.
Anne Thomas: With the tiniest, tiniest font.
Kurt Elster: Yeah. Oh, remember Pixel fonts from your Flash days? That was a good time. Okay, so lastly, lightning round, I had asked in our… Some of these questions were from our Facebook group, and search Unofficial Shopify Podcast Insiders on Facebook. And I wanted to ask you a few of the questions that were in here. So, actually, off the top of your head, this is from James Cirkl, any good example of a drawer cart? Who’s got the best drawer cart? I know for me, it’s Chubbies. I think Chubbies’ drawer cart is top notch.
Anne Thomas: Oh. I mean, in terms of what’s in the drawer? You know what’s funny? I actually really like Brooklyn. It’s just like a classic slide out. It works well on mobile.
Kurt Elster: You’re referring to Shopify’s Brooklyn theme.
Anne Thomas: Yep. Free theme. Yep.
Kurt Elster: And has a fine, fine drawer cart.
Anne Thomas: Yep.
Kurt Elster: Well, here’s a variation on a question I asked you earlier. What’s your number one priority when developing a theme? Speed, UX, conversions, or something else?
Anne Thomas: At the moment, speed.
Kurt Elster: Okay. Another one from the same gentleman, Taylor Page. How important are animations?
Anne Thomas: So, there’s a really cool CSS media query where you can actually say if the user has determined they don’t want animations, they can have that setting in the browser for less animation, so I would say go ahead. I love animations personally, but make sure that you’ve also got the ability to turn them off for people that don’t want them.
Kurt Elster: Yes. I would use them sparingly, but when implemented well, I think they really… They can add a lot of subtle sophistication to a site.
Anne Thomas: Totally. Can totally elevate a site. Yeah.
Kurt Elster: Or you can just abuse them silly and make like a Geocities-esque disaster.
Anne Thomas: Which may be the vibe you’re going for. We don’t know.
Kurt Elster: Yeah. Yeah. Some sites pull that off, like sites that are anti-design can probably do that, like Pit Vipers is anti-design. I’m sure they could come up with some really garish animations that I would love.
James Circle asked, “What’s the best way to implement SVG?” Which, we… On the rare occasion a client supplies a vector logo, I love it.
Anne Thomas: Yeah.
Kurt Elster: SVG is so cool.
Anne Thomas: Oh, SVG is amazing.
Kurt Elster: Scalable vector graphics.
Anne Thomas: Yep. So, yeah, there’s no way to upload an SVG to… at least within the actual editor. You can upload it to the files section or what have you. I would say that if you’re building it specifically for a client and they have a bunch of different SVGs that they want to be able to upload on their own, you can technically set up a text area setting so that they can copy and paste the entire SVG into it. The benefit of doing something like that is that you can then display it in line on the site, meaning that you can change the color, and there’s less HTP requests, because it’s like right in there.
But I feel like for most situations, it would probably be fine to just have it uploaded to the files section, then you’re referencing it there, or upload it also to assets. Basically, wherever your client wants it.
Kurt Elster: Okay. Yeah. Yeah, generally… Well, Google PageSpeed would tell us, “Oh, you should just put it in line in the page.”
Anne Thomas: But see, if it’s in line, then it can’t be cached, so…
Kurt Elster: That’s where it’s part of the issues with Google PageSpeed, is it makes these conflicting suggestions.
Anne Thomas: Yeah. You have to take it with a grain of salt sometimes, because if you have like a massive SVG file, and they can get quite large, especially if you have… Sometimes they can have like embedded images. That’s a whole other thing, but yeah, so just take… One piece of advice I would say is that if you’re debating between using a font icon set, that used to be the go-to way for having icons, is with fonts. Now, use SVG instead.
Kurt Elster: Okay. Larry has a highly opinionated question-
Anne Thomas: Oh, dear.
Kurt Elster: … that I’m gonna run past you verbatim.
Anne Thomas: Is it more of a… than a question?
Kurt Elster: When are mobile-focused themes coming? We look at teardowns on desktop and lots of functions for desktop, but 80% of sessions are now on mobile. Eh, it’s more like 90. Let’s rock out a mobile-focused theme. Amazon rocks it. When will Shopify? Okay, so Amazon does not have a responsive website. That’s… You’re confused there. It loads two different websites. One for mobile, one for desktop. Oh well.
All right, so this concern about that these themes are not mobile first. What do you think?
Anne Thomas: Yeah. I mean, so with themes, a lot… I think it actually comes back to performance, because I think… Well, performance and also UX, so there are a lot of things that you can do to make a better UX experience on mobile, 100%, but I think the other thing to keep in mind, especially when I know we ran into this when building themes, is that you also have to support a wide variety of different browsers. Not just mobile. I’m not making excuses, but just saying that when you’re building a native iOS app, for example, you can do some cool things that you can’t do as easily if someone is using a really old version of the Safari browser, for example. It just won’t work as well.
You know, we had lots of issues with like fixed bottom bars, and how those displayed, and that kind of thing, so I don’t know what… I don’t want to shove blame on browser, but I feel like it’s partly just sort of some limitations. But all that being said, yeah, I think there’s lots of room for improvement in general with thinking about looking at mobile first.
Kurt Elster: Okay. Do you have any experience with AMP?
Anne Thomas: A small amount. I wouldn’t say I-
Kurt Elster: AMP. Accelerated Mobile Pages. So, what’s all the fuss here and excitement with this thing? And does Shopify support it in any way?
Anne Thomas: So, this is so interesting. We would get a lot of support questions actually about this, and there are some apps that purport… That’s a word.
Kurt Elster: Purport.
Anne Thomas: Purport. Purport.
Kurt Elster: I think.
Anne Thomas: Yes. You know what I mean.
Kurt Elster: Yeah. Now I’m second guessing.
Anne Thomas: Yeah.
Kurt Elster: We’ll go with claim. Some apps that claim-
Anne Thomas: The whole idea is that you’re serving static content. So, similar to if you’ve heard of Gatsby or something like that, where rather than having sort of that like, “Oh, you’re contacting the server and having things built server side,” and then also there’s client side, and that kind of thing. It’s basically just like a static page that gets served, so it runs very, very quickly, and it loads super fast.
My understanding, last time I checked, but this was a while ago, with AMP is that it didn’t have great support for JavaScript or dynamic elements, and so having that with Shopify… I haven’t seen any great implementations of it just yet. Please, if anyone knows of any, let me know.
Kurt Elster: So, currently, if I want to get AMP to work, I really… My best and only option is an app?
Anne Thomas: Yes.
Kurt Elster: Okay.
Anne Thomas: I believe.
Kurt Elster: That was my understanding, as well.
Anne Thomas: Yeah.
Kurt Elster: And you know what? That’s all of them. That is… There’s a few other questions, but I think we covered the others just in our conversation. Okay, finally, you… Obviously, you have gone out on your own. You have hung out your own shingle. Please, plug it. Tell me about what the heck you’re doing now and why we should care. What’s Shop Critique?
Anne Thomas: Yeah, thanks. So, Shop Critique is… The easiest way to describe it is it’s a home inspection for your site, for your Shopify store, so obviously I bring the technical theme and UX knowledge, and then I have partnered with two other people, Laura and Jess, they’re both fantastic, for SEO and marketing, as well. So, we kind of cover those three areas and we have a variety of different audits that are available, so we also do one-on-one consulting, which I mentioned. Yeah, it’s basically a service where if you’re looking at your site and you’re thinking to yourself, “Okay, I just need some help. I don’t necessarily want to have a huge overhaul or anything, I just need to make it better, but I don’t know where to start and I don’t know what to prioritize.” We come in and we say, “Okay, here’s how you prioritize for you performance. Here’s what you prioritize for your email marketing. For SEO.”
And things that they can do themselves, too, which is nice. You don’t always have to hire a developer to do the stuff that we recommend.
Kurt Elster: So, it sounds like every store is different and there’s a million and one ways to spend your time and money on improving your theme. So, if I’m wondering like, “Okay, where do I begin to improve my theme? What do I do? How do I prioritize my efforts.” I can pay you, the expert, to come in and work with me and give me a personalized roadmap for that.
Anne Thomas: Yeah. Exactly. And we also do user testing, too. So, you know how you have your… Obviously, you know. You have your awesome test drives that you do, so we do that, but for people’s individual shops, so we’re not looking at like these big brands or anything like that. We do it specifically for their shop.
Kurt Elster: And what would this cost me?
Anne Thomas: So, it ranges. Currently, our lowest package that we have is $500.
Kurt Elster: And do you have any special offers for our listeners?
Anne Thomas: I do, in fact. So, for anyone that is coming that heard about this on the podcast, if you just let us know that you heard about it on the podcast, you will get 10% off.
Kurt Elster: Oh. What’s 10% off 500 bucks? 50 bucks. I will take those savings. All right. Anne, this has been insightful, fantastic, and you are a pleasure as always. If I wanted to find out more about you, where should I go?
Anne Thomas: You can check out ShopCritique.com and we have lots of contact forms all over the place, and just drop me a line there.
Kurt Elster: So, if you want to get in touch with Anne, head to ShopCritique.com!
Anne Thomas: You got it.
Kurt Elster: Fabulous. All right. We’ll leave it there. Thank you.
Anne Thomas: Oh, thank you. This was a blast.