What You Need to Know
Also on YouTube: https://youtu.be/fIDw3fvPPgI
Unpack the intricacies of Shopify's Checkout Extensibility— a feature poised to revolutionize online commerce.
With global commerce evolving, this episode offers a sophisticated look at the future of digital checkouts, where efficiency and innovation converge.
Kurt Elster
My friends, we got new features in Shopify Land and we have deadlines for upgrading to know those new features. So no secret, Shopify should be the best checkout in the world. Certainly uh the world's best converting checkout. These are are claims backed by studies. Uh and that checkout Just like the rest of the platform, always getting new features, always getting upgraded. And now we're at a point where there is a considerable upgrade occurring. An upgrade that has a name Checkout extensibility. Heck, I don't even know what the name means, but I have someone from Shopify, from the mothership, who is responsible for some of these changes, who can talk us through it, explain it to us. Because, you know, I just use the tools. I don't necessarily know why these, you know, why these things are. Uh and he's going to he's gonna break it down for us. So we are joined today by Mr. Michael Elmgreen. You are, how long have you been with Shopify Sir?
Speaker 2
I've been Shopify about five years now.
Kurt Elster
Five years. And what do you do there?
Speaker 2
So yeah, I'm a product director for checkout extensibility. And yeah, so my team uh is responsible for things like the checkout editor. Checkout UI extensions, a couple of Shopify functions, and as well as the Checkout Branding API, which is used for aesthetic customizations and checkout. So a suite of new technologies which will replace checkout. liquid.
Kurt Elster
Well, let's start with the what. Check out extensibility. It sounds like it's a a suite of features. Uh what is it?
Speaker 2
Yeah, so it it's it's really a suite of capabilities that replaces uh checkouts of liquid for customizing checkout It includes a you know a handful of different kind of products, the first of which is checkout UI extensions. uh which is primarily used for adding new content to checkout. So things like new custom fields, upsells, or or other types of sort of um UI rendering customizations. You've got uh the checkout editor, which is used for adding and configuring uh those extensions to checkout. Uh you've got the branding API, which is used for adding uh aesthetic customizations to checkout so things like changing the color styling uh of the checkout uh appearance And then you've also got functions, which are used for customizing the server-side logic of the checkout, uh checkout behavior. And um lastly you've got kind of web pixels extensions which are used for uh for for customer eventing and analytics purposes. So you've got this kind of like basically uh yeah suite of different capabilities which all kind of work together to uh enable a range of different customizations. Um so that's basically it.
Kurt Elster
And each of these, it sounds like it each new feature maps to a a similar but different ability feature approach in the past. What are we getting in? Like previously I checkout. liquid and I could just I could hack that thing up. And I could, you know, whatever the heck I could dream up. If I got creative enough, you could you could attempt it with checkout. liquid. And yeah, that was not without its flaws. So what's the what's the overall, what's the motivation behind developing these new features and moving to checkout extensibility?
Speaker 2
Yeah, so really uh what we wanted to do was create, you know, the world's best checkout, the world's best converting checkout with the kind of highest standards. Like as your uh listeners know there's like no re there's no room for error in checkout there's no margin for error whatsoever um and checkout the liquid to your point was incredibly powerful and very flexible But it had some limitations that are maybe not immediately apparent. So first of all, you you kind of had that frozen, like pinned version of checkout. uh that you would get locked to and you would never benefit from the optimizations or upgrades that Shopify made to the checkout experience until you went through that upgrade cycle. The upgrade cycle itself required extensive testing and of all of the customizations that you've made to make sure that they were cut they were compatible. So like, you know, I've spoken to agencies or merchants who have maintained these spreadsheets of all the customizations they've made and like go through road checking them every time we do an upgrade. I You also had some uh inherent security risk due to the fact that none of the customizations were sandboxed and so all scripts can kind of act have access to the parent window and can also have access to every other customization on the page. And then um, you know, for for customizations that were maybe provided to you by a third party vendor. Often every time you're installing one of those like apps um in in terms of like in the form of a piece of code that's inserted into the file, you'd have to be tweaking the CSS to like make sure it fit with the branding of the particular shop that you're installing it in. And there's no real like, you know, non-technical uh method for installing and configuring those customizations. Like you had to at the very least be able to like willing to open up the code editor. and uh and kind of insert that that code in there. Um lastly I think it was like a couple of things. Like we were um Shopify is unable to kind of like help with the optimization of the performance of some of those customizations. And make sure that they're tied into our uh data governance uh control mechanisms, such as our like permissions and privacy system. So A lot of kind of like I guess maybe not immediately obvious downsides to check out the liquid to Site Spiders, its its its sort of its power. So really like the motivation came from um wanting to sort of think outside the box and come up with a new way of uh to build a high-performing checkout experience which limited some of that overhead, like mitigated some of those downsides. And so really like our our focus was on three main pillars. The first being conversion, like it has to um you know be low latency, high throughput, high conversion, so we maintain that quality buyer experience uh and and keep um yeah, the the highest possible conversion rate. The second being compliance, like the changing regulatory environment, whether you look at the the uh privacy uh regulate regulation changes or things like PCI, DSS version four, we want to make that compliance easier, alleviate that burden for merchants, and also maintain uh lastly, like the composability of um of of the checkout so that um you know you could still realize the customizations that you need that are business critical, whether they're you know ones for uh enforcing business processes like validation or Um, you know, customizations intended to improve average order value like upsells or R or other things. So it was all in all like kind of just this this goal of rebuilding the checkout, um, to ensure that it remained the world's best checkout, but also is like feature-proofed and like mitigated some of the downsides that we saw with checkout. liquid. So that's really where it all began. It all came from kind of that motivation.
Kurt Elster
There there's so much there too. Um, but before I unpack it, I want to know about the name. Check out extensibility. It is an interesting name. Anything Any thoughts behind it? Like why check out extensibility as our name? I would have just been laid and been like, uh check out two point oh I don't super checkout gif Yeah.
Speaker 2
No, good question. Um I mean extensible just really means like capable of being extended. And I think as part of our vision um when we were doing that rethink, it was really imagining uh Checkout being extended with functionality built into apps and so the extensibility of checkout or checkout extensibility was was born. Over time we've actually seen the model that we've applied to checkout now um expanded into other parts of the product like across different services. So we've got like admin extensions, customer accounts extensions, extensions in the POS. And we've got like both client and server-side uh customization technologies. So we've kind of generalized this now to be like Shopify extensions and make it more holistic. Um and and so so that's kind of like where the name came from. Like we did at the um uh at editions. dev, which I I know you were at. um talk about the fact that we intend to sort of revise the name to being checkout extensions uh uh uh over time. Um but we felt checkout extensibility was a good name to sort of encompass the suite of all of the different technologies that are that are going to replace checkout. Liquid and sort of bring them together under one umbrella
Kurt Elster
That makes sense. And I missed that the the name over time would change. But yeah, there is so much that changes there, right? It's like not it's checkout debt liquid and script editor and we get the the branding API um quite a lot going on. It sounds very fancy. Certainly this can't be on all plans. Who is checkout extensibility for or available to?
Speaker 2
Yeah, so the The um the upgrade process that you're talking about, it it really impacts plus merchants only because it's those upgrading customizations made to those like in checkout pages, information payment shipping. uh customizations over to checkout extensibility. And the the reason for like the just historically the plan availability of um uh these in checkout customizations to plus only really stems from um a principle sort of an ethos. I think you talked about a little bit with Harley in your like at editions. dev. So really we try and align the um capabilities that a merchant is exposed to with their merchant journey and their merchant kind of maturity level. And so we want to progressively reveal complexity to them over time in the product. And so, you know, um merchants at the beginning of their journey are really focused on finding product market fit, maybe scaling their marketing to generate enough scale to sort of survive and thrive. And really, we believe like shouldn't really be focused on eking out like additional percentage points of conversion or upsell um you know AOV A AOV points or or what the case whatever the case may be. um and and hopefully can entrust us to handle um you know providing a great checkout experience for their buyers but of course that changes over time As you're kind of reaching sk scale, um, you're getting to that place where you've got that predictable revenue and there's maybe more alpha in making some of those changes. So Um, and then then you know you're doing things like adding upsells to collect donations or um upsell, cross-sell different products or other types of bespoke you know delivery options and and and things like that. So that's that's where kind of the checkout customization really starts to play a true role for these merchants. That being said, outside of this upgrade process, there are some benefits that non-plus merchants uh get from extensibility too. So Shopify functions, like so that you just mentioned scripts earlier. Um, Shopify scripts were previously only available to plus merchants. Now non-plus merchants can use public apps that implement Shopify functions for a range of things to um you know customize uh the back end logic of Shopify's checkout engine, including Payment and delivery options, they can introduce uh bundles using the cart transform function and can also do extra validations using the cart and checkout validation function. We also have post-purchase upsells, which you might be familiar with. They're kind of like an initial upsell page that runs right after the initial conversion and before the thank you page. Um, and then of course you've got like the customization of the fake page and all the status page as well. So ultimately like checkout extensibilities. this the future of customizing checkout and I think all merchants get the get the benefits in some way, shape or form from these changes. Although the the the real material upgrade right now is is really for plus merchants.
Kurt Elster
You know, I didn't realize that functions was available outside of plus plans. I often I play the useful idiot or audience surrogate on this show. In that case, you generally surprise me with that one. I didn't know.
Speaker 2
Yeah, so it's just just for public apps, um, not for custom apps, but yeah, it's available.
Kurt Elster
Pick one one feature. What's uh what do you think is like the primary benefit or maybe even the thing you're most proud of with checkout extensibility?
Speaker 2
I would say that first of all, like apart from all the customization technologies I mentioned, there's there were some material improvements to the actual like architecture of the checkout platform itself that have been made with checkout extensibility. So we've been able to um significantly improve load times, latency, and throughput of the checkout for every like for everyone across the board with checkout extensibility. And that's allowed us to eke out um you know some great user experience improvements. It's also allowed us to deliver things like the one-page checkout. One page checkout um on average decreased completion times of checkout by about four seconds. That's significant. And for for you know some merchants that have been asking for one page checkout for like years and years and years, it's a it's a huge win for them. Um, but really like I think outside of like kind of those baseline, you know, foundational upgrades that we've made, I'm just really proud of the fact that Now you can kind of get all of the customizations that you want to make to your checkout and make those while still preserving the upgrade safety. of the checkout and getting access to the newest features that we've released like as soon as they're out. And that's like that's something which has like removed a lot of the headaches that came with checkout Dol Liquid. Not to mention the fact that they um all those customizations can now interact with and work with Shop Pay. So like in the past, plus merchants used to face this like kind of impossible choice of, you know, I've got these great these checkout liquid customizations which might be business critical, but I've also would love my buyers to have an accelerated experience with Shop Pay. I have this difficult choice now of like whether I forego the ShopPay experience in favor of my customizations or forego the customizations in favor of like creating a better accelerated buyer experience Now you don't have to make that impossible choice because check out UI extensions and the customizations that are made to check out like work in the Shop Pay environment and are compatible across both guest and Shop Pay. Um, and that makes me really happy because the conversion benefits that you get from Shop Pay are then now also available to you on the customized checkout. Um, and so like I think I think that those three things are really the things I'm most proud of. It's like the the the underlying performance upgrades. um improvements, the the the upgrade safety and like the the integration with Shop A.
Kurt Elster
I'm glad to hear you pick those three because those are those are the three that aren't necessarily obvious, even just using the tools. Like it's faster and I don't have to do anything to get it faster? Fabulous. I'm in. I'll take it. Give me the win. Improved shot pay integration I'm fully convinced that that Shopei has a a big conversion benefit. You know, big it it's just it's much less effort uh to use it. And so I'm glad to see that because you're right. There was like there was this this terrible choice you had to make. It's like, all right, which is the way we're gonna optimize this? Now I don't have to go like try and figure out the trade-offs here. Uh and security. You're right. They're um if someone's gonna put in their most precious sixteen digits into your checkout, their credit card number, that requires a lot of trust. And you also, you know, you don't want to be the one who has potentially leaked people's credit card information. And so getting rid of checkout. liquid, that template, does avoid a lot of those problems. It sounds like um our there's a compliance issue occurring here with a new version of PCI. You know, I I don't stay on top of PCI compliance.
Speaker 2
Yeah, that's right. Um, so yeah, I I highly recommend um your listeners like take a look at that. Um essentially it it's you know, PCI DSS um regulations um provide a set of rules that govern how kind of payment uh information is collected and secured as part of like your e-commerce experience. Um and there's some new rules coming in effect coming into effect in April of twenty twenty five which um have increase the burden on merchants to maintain a secure checkout. Um and specifically uh the big thing there is that the compliance um and security requirements they have extend to both the payment like page, which is often like an iframed component in the checkout, but also to the parent page. And so that's a huge thing because all of the customizations that previously were injected into checkl. liquid ran on the parent page as well. So if you have to attest to the integrity of all of the customizations made on both the payment and parent page. Um that's a much higher burden than the PCI DSS rules levered on merchants before. And so um we've we've put out a blog post on this topic, but Um we believe that um extensibility um will make compliance with PCI DSS basically you know, are no like will require nothing from merchants to remain compliant with that uh when it comes in in April. And so like that's a huge benefit. Um and something that I think validates somewhat the kind of approach we've taken here with the change in the way that we're sandboxing and isolating customizations and web pixels and everything else.
Kurt Elster
Yeah, and regulatory compliance, yeah, not the sexiest topic, but so hugely important, right? You really don't don't mess around with with regulatory compliance. Just Go along with it. Um so always thrilling to have uh z someone else helping to handle it for us. The all right talk to me about timeline. These features are available now, but there's also a like an upgrade path. There are deadlines. Old features are going away. Walk me through it. Knowing full well that you know this will be dated in a month anyway.
Speaker 2
Yeah, yeah, sure. So um So yeah, we announced it back in February 2023. Coming up in August on August thirteenth, 2024 is the deadline to upgrade from checkout. liquid to checkout extensions for the information shipping and payment pages. to avoid there's a set of restrictions that will be applied um after that due to the inherently less secure nature of checkout door liquid um versus checkout extensibility which we just kind of talked about Then in in January, on the 6th of January, uh 2025, we're gonna start automatically upgrading shops to checkout extensibility, which will basically remove like strip them of any of the customizations that have been made. Um and uh and we'll be giving merchants like a 30-day um heads up on on that happening for their shop um starting in early December. Uh we obviously don't want to see any merchants in that position unless they truly didn't need those customizations to begin with. Um But we have to um we have to sunset our older technology in order to maintain that standard Um and also in mind like of that uh PCI DSS like uh you know regulation coming in in in April. So um yeah, those are the kind of timelines we're working with uh for the in checkout pages and then Um, we also have uh the the deadline around the thank you page and order status page, which is kind of uh August of the following year, 2025. um to move away from additional scripts um that to check out the liquid customizations to those pages as well. So that's that'll be replacing those same pages with web pixels and UI extensions as well. Um so yeah, that's kind of what we're looking at uh for the t in terms of the timelines here.
Kurt Elster
I have I have an entirely selfish implementation question for you. You mentioned that additional scripts where I could it typically people just put in this is our conversion pixel and it fires on the order status page. If I publish my new checkout, but I have not published the order status and thank you pages. My additional checkout script still gets nuked, doesn't it?
Speaker 2
Uh no, it doesn't, actually. Yeah, no, you can still run additional scripts if you haven't yet published um the thank you page and auto status page uh customizations.
Kurt Elster
Okay. This is that one's been driving me nuts. Yeah. I wonder if I've had merchants publish it. The ordered sta like the thank you status pages and then not tell me. Possibly. We've run into issues with it, but I like I figured out the solutions. In fact, in the Shopify docs it says, hey, it's a you know, and you mentioned web pixels, which in you know the front-facing side of Shopify, they call it customer events. Um The docs say it's important to this is a quote, it's important to look for a pixel app before adding a custom pixel to ensure you're getting the best, most secure integration experience possible. Tell me why. Why do I want to find Yeah, I mean the docs are saying, hey, a a pix uh an app is the right solution, but uh break it down for me.
Speaker 2
Yeah, so I I guess like generally um We we recommend using the a a vendors or partners official app because then you get the benefits of like upgrades and support that they are making to their implementation. Like you're always gonna get the latest best possible version of that implementation. It's like their official, you know, it's their official app. The the second reason is that the um Webworker sandbox used by OutPixels just leads to faster websites as opposed to the iframe sandbox that's um used in custom pixels, it just doesn't perform quite as well. Um, and so like that's really the recommendation where the recommendation is coming from. I don't actually think there's any difference in the security of those two things. They're both very secure. Um, but uh it's it's really about like performance and then just getting the benefits of the the app partners like upgrades and like the the sort of blessed official implementation. And so that's why we always recommend merchants kind of go to that first.
Kurt Elster
I heard that you know what I just heard was the benefit is convenience, man. And that's that's what I'm about. I I have learned time again. If Shopify tells you, this is how we think you should do this. You make your life easier, do it the way it's recommended, because everything else assumes that you did it in the proper method. Like whatever is-if the help doc tells you this is best practice, go with it, don't fight it.
Speaker 2
I I d that would be my general advice for sure. Uh I mean of course there's always exceptions. Um merchants have specific needs or certain things that they really like feel like it's m m must-haves to them. um that can justify an exception to that rule, but um in general, like that would be my advice for sure for most budgets.
Kurt Elster
All right, so with the I obviously I'm sold on it and I've already implemented this many times and played with it and enjoyed it and I I like the convenience. Um Uh and the the familiarity and simplicity of, hey, it's essentially the theme editor you know and love and with app embeds, app blocks. Um very similar experience. So it's like I already know how to use this. If a if someone is is hesitant, they're just like, I'm gonna push off this upgrade as long as I can, what advice would you give them to be like, all right, look? Go ahead, get started on that that upgrade.
Speaker 2
Yeah, so so first of all, like I I just reiterate that like we wouldn't be driving you know, merchants towards uh this upgrade if we didn't fundamentally believe it was better for them, their buyers, and like the broader commerce ecosystem, whether you're selling on the internet or you're selling in physical retail, like it's the right it's the right approach. Um, and you're really gonna get all of those benefits. You're gonna get the benefits of the faster platform, better conversion. uh you're gonna get the security that comes with the checkout uh process and the uh the the customizations being better isolated from the main parent page, which gives you like those better those compliance benefits as well. And then lastly, you're going to get the benefits of all this like upgrade safety and interoperability that comes from using these more future-proof interfaces for customizing checkout. So I just encourage you to um to just go and get started. Consult the um we've got this fantastic uh customization report that we've added to the admin, which uses um some AI technology to to take a look at the customizations made in your checkout. liquid file and give you back a sort of like a summary of what we'd found.
Kurt Elster
I thought that I've used that now several times. I thought it was like I thought it was cool, but I'm like, there's no way it gets it all. And so every time I check it, I've been comparing it and it has yet to be wrong. I was really quite, quite impressed.
Speaker 2
Oh, that's good to hear. Yeah, it's I mean, obviously there's there's there's no there's no perfect um kind of analysis tool when it's it's using that kind of technology, but we found it to be quite accurate. And um it it provides kind of like a summary of of customization of all the customizations we found in your your file. By the way, many merchants find things that they forgot about. Or that they no longer care about and are happy to forego as part of the the migration. But it also provides um app recommendations or, you know, sort of development uh devdoc uh kind of um recommendations on how to re-implement those customizations, um whether they be for UI customizations or or things like tracking um web pixels and analytics. So I just recommend diving diving into that and and making sure you you get on it ahead of the deadlines. Um and yeah, I just I guess like I would just also thank um everyone um who's listening who has upgraded or is in the middle of finalizing their upgrade for all of the efforts they've taken and the feedback they've given us along the way on this journey. Like it's been as you mentioned, like a few years now. Um, we're really psyched about the future, but we're also very appreciative because we know that there's been real work involved for every every merchant and or every plus merchant who's customized checkout. um and you know the agencies they work with and all of the partners that we rely on in the ecosystem. So we're very appreciative of that.
Kurt Elster
See. Well it has it has worked out and it's clearly So much work. I can't imagine the number of man hours, person hours that went into this. Um yeah, quite you should be proud. Can you Can you share? Do we have any upcoming exciting features, enhancements, announcements we can look forward to?
Speaker 2
I think one thing I can share is that um Yeah, if you've if you've taken a look recently at what we announced at the last edition with markets, that's something we're thinking about very carefully for checkout. And so we'd really like to enable you to make um market-specific customizations for checkout so that you can get all the benefits that you've maybe seen in the online store editor when you're looking to customize the experience for B2B or for a particular regional market that you're um you're you're serving. Um we'd love to we we want to bring that functionality as well uh into the checkout editor. Um and so that's something we're we're sort of working on right now and we'll be thinking about. I won't I won't give you a timeline on that one just yet, but um yeah, it's something we're looking really closely at as part of the the broader markets rollout, which is very exciting.
Kurt Elster
I'm thrilled to hear it because markets and just context in the theme editor have been incredibly useful for us, both for internationalization and for B2B. Especially like hearing, oh, you know there's potential that we could change the checkout for B2B users. That that excites me. That's that's good to know. Uh so Michael Elmgreen, thank you so much for taking the time to share to share this product of these features with us and let me pick your brain. I appreciate it.
Speaker 2
My pleasure cut.
Kurt Elster
Where should people go to learn more about the checkout extensibility? Or you, whatever you want.
Speaker 2
Yeah, so I definitely take a look at um all of the comms we've sent out recently on the on the upgrade if you're a part of the the cohort that needs to upgrade. If you want to learn more about Checkout Extensibility, we've also got a bunch of resources available on the Help Center and on shopfire. dev if you're an agency or developer listener Um and and yeah, just like dive right in. Um if you're if you're a plus merchant, get into that customization report that's in the admin. and uh and get working on on your your upgrade 'cause there's there's not much time to go here and we really want all of you to enjoy the benefits
Kurt Elster
And we're uh my friends stick around. We're gonna talk to some sub Shofi partners, some other small folk smart folks who have have experienced it, lived it, implemented it, and I'm going to pick their brains as well on what the experience is, what the features are, and how to approach it. Hey Shopify sellers, listen up. Get ready to unleash your creativity with the brand new landing page builder from Zippify Pages. This isn't just Zipify's biggest update ever. It's a revolution in building Shopify store designs. Say goodbye to Clunky Designs and hello to Total Customization with Zipify's new builder. You're the boss of every pixel on your site. Drag, drop, swap elements, it's all in your hands to craft the most effective layout for conversions. Zippify pages come straight. from the founder of a 180 million dollar e-comm empire. These templates aren't just pretty, they've been tested in the arena with a nine-figure Shopify store. And it's easy to use. A few clicks in your product pages, marketing pages, blog pages, even your homepage will be looking sharp and conversion optimized for maximum sales And because these templates are tested in a nine-figure Shopify store first, you know they actually work. So why settle for the standard when you can have a site that's uniquely yours? You could try Zippify pages and their brand new builder for free for 14 days when you go to zippify. com slash Kurt. That's Z-I-P-I-FY. com Slash K U R T to try Zipify pages for free. And if you tried pages in the past and thought it wasn't for you, you owe it to yourself to try it again because the new Zipify Pages is a game changer. Zipify. com slash Kurt. Check it out. All right, I've got Brit Fish here who has direct hands-on experience with dealing with the fallout of what happens when you implement checkout extensibility. And we'll get into what that means. But uh Brett, so tell me, uh what do you do? How did you get here?
Speaker 3
Uh good, good, good question. Um, so I uh my firm is Tag Hero, and I refer to Tag Hero as our happy accident because um I started a paid social marketing agency six or seven years ago. early stages of the agency, um, we were constantly dealing with technical issues, tracking issues for our clients. It was a thorn in our side. Finally, one day we got fed up, and I'm like, okay, I'm gonna solve this. I'm gonna bring some of these competencies in-house. We started doing a lot of technical work and projects for our clients. And then around that same time, um, we got pulled into a product uh product program with Meta called their technical partners program, where we did implementation and troubleshooting for pixels and tracking code and whatnot as a meta vendor for their advertisers. So we did that for a while. And then when Meta shuttered that program, we had all these capabilities in this portfolio. And that's when I started Tag Hero as a separate brand and line of business. And so we specialize in we call it tech support for digital marketing. Um all the tagging, tracking, pixels, APIs, backend stuff. That makes all these digital marketing platforms work. So that's what we specialize in. And in this application, we've been pretty busy with the Shopify checkout extensibility issues in migration. And so we'll talk a bit about that today.
Kurt Elster
That all right, A, I had no idea that such a service existed. So I as you're talking, I keep a list of like here, you know, here are things that I don't love doing and people who are much better than me at it that I can refer them to. Sure. And so under data layer troubleshooting, you just got yourself added.
Speaker 3
Hey, excellent.
Kurt Elster
Now that all right, so you got the stamp of approval as my expert here. Let's hope you live up to it. Uh yeah, I might have gotten ahead of myself. But So we implement checkout extensibility and then clearly beyond just I set up my checkout Because checkout extensibility, like actually setting up the checkout itself, is very easy. It works like the theme editor, and then I click publish. There's nothing scary about that part. Once I implement it though Some things have to change. Something's going to break. This has been my experience. What is it? What do I break that you end up fixing
Speaker 3
Yeah, um, and and and it sounds like you'll get some information from Shofi on the actual nuts and bolts of like what breaks, but I can tell you like from the lens of let's say a store owner or a marketer agency working with a store, what happens? So um the main the main thing that breaks is In your Shopify settings, in your checkout settings, forever, there's been a text field and input where it says um order confirmation page, and you can drop tracking snippets and and pieces of tracking code.
Kurt Elster
Um a lot of Yeah it's like additional scripts.
Speaker 3
Yeah, a lot of people and there's there's some for like I think there's like a post purchase page section and then there's the order confirmation Thank you page section. Um a lot of people don't like like messing or even going in and editing theme files and liquid files. So it's a it's a convenient little input to drop scripts into. Um and Part of the Shopify checkout extensibility is the checkout liquid file that's been used forever for that is kind of goes away in in favor of checkout extensibility. So the the the quick and easy look is Any scripts you have in that section get nuked and go away. They are no longer there and functional. And I think that's been a big challenge point based on what we've seen with clients because The messaging from Shopify around this is upgrade. Upgrade to check out extensibility, which it is in a lot of ways. It is an upgrade on security and a bunch of other things. What hasn't been really communicated as much are the nitty-gritty details of like what might break or change or go away if you make this change. So we've had a lot of clients coming to us like Hey, last week Tuesday, our Google Ads conversion tracking just completely ended and disappeared. And they have no idea why. They're like, We didn't change anything. And what we've been seeing is is when they upgrade to checkout extensibility, those scripts get nuked and go away. And anything that's being tracked in there goes away at the same time. So a lot of um a lot of brands and stores use that section for Google Ads conversion tracking snippets. They if they're using Google Tag Manager, They'll have their Google Tag Manager snippet. That field is really a way to add anything to that final order confirmation page, which is where you track a lot of your purchase conversions. So um anything in that section goes away as part of this change.
Kurt Elster
Yeah. Usually it is that's where um just quick and dirty I could paste my conversion snippets right in there, whatever they may be You know, if someone ran like an iHeartRadio podcast promo campaign, I'm probably gonna end up sticking that conversion tracking snippet in there or Google Tag Manager, whatever it is, ends up in that slot. When I switch to that new checkout extensibility, immediately those scripts stop firing. But that's not necessarily made obvious to you until the next day when you go, hey, why did my why did that coincide with my conversions conversion reporting going to zero when I'm making sales and that's why. Um and then what makes it confusing when you implement it is You can separately, as part of checkout extensibility, upgrade your order and status thank you pages. And so that really made it seem like, oh well, if I do this, I'm not gonna have issues. But of you know, yes, exactly what you described. So All right, I don't have that field anymore. Even if I'm on plus, I don't have checkout. liquid access. So what do I do? Where does my conversion tracking go now?
Speaker 3
Yeah. Um, so so there's two parts to this answer. One is is if you are using apps, so one of the let's say the most com one of the common ones is in Shopify, using the Facebook and Instagram Shopify sales channel app. for your meta tracking, for your pixel and and cappy tracking. If you're using apps for your tracking, they should not be impacted by this. Now that That mostly goes to like the major apps that we know of. I don't know about smaller nuanced apps. They sh but the apps should be coded uh for this. So if you're using apps, you should be okay and there shouldn't necessarily be any emergent uh action items. Um where this all goes is Shopify has introduced a new section in your settings that says it's called customer events. And when you click into customer events, You will then see a list. So for example, if you're using that Facebook and Instagram app for tracking in the list of the customer events assets, you will see the app there and there'll be like a green check next to it. Like you know, good to go. Um what we recommend and what we've been putting in place for clients is that under customer events, and we any of those snippets that were in that section in your checkout settings. We recommend moving those to Google Tag Manager. That's kind of like a best practice anyway if you're not using an app or an integration for tracking, as opposed to kind of hacking in individual scripts. We recommend running those through Google Tag Manager. And then creating a Google Tag Manager, what what they call a custom pixel now in their customer events section, creating a Google Tag Manager pixel there. dropping some code in and then running all those scripts out of Google Tag Manager. If they've if they've only been in the that checkout um order confirmation scripts, you're only firing them browser side anyway. It's it's just like they would come from Google Tag Manager. So that's what we recommend. And Shopify actually has a help article that goes through how to set up and implement GTM through this new structure through the customer events. uh section.
Kurt Elster
Did you attempt this? It is not for the faint of heart.
Speaker 3
No, no, no. Yeah. I I can tell you, like we do this stuff all all day uh at Tag Hero and it took us Some time, some connecting with some other people who are trying to figure it out at the same time to get like the structure and the code. Because one of the things is in that Shopify Help doc. They do provide you some example code that you can use to push all the events of the funnel and the store to the data layer and then be able to pass some stuff. But one of the notable things that's missing is there's no product data in that sample code that they shared. So um like for Meta or Google or some of the platforms where you want to send back product data with like a purchase event, um that's not there. And so It it took some tweaking and hacking and finessing to get that to work the way we wanted. But yeah, it's definitely not like super straightforward and easy. But that's how it's being done now. And we recommend. Any of those kind of one-off, like you mentioned, like you drop a script in for something specific. We recommend doing all those through Google Tag Manager, which is kind of best practice anyway. But that's kind of the prescribed path that Shopify has presented as how they want that done as opposed to dropping in all these individual snippets as custom pixels in Shopify is kind of consolidating that and streamlining that and doing that through Google Tag Manager.
Kurt Elster
And you know, the the larger reasons for all of this is like it's more performance, you have more control over it, it's uh it's gonna be better for privacy rights, like when people opt out of cookies, all that stuff. Right. So there's good reasons to do it. Right. We have to do it. But it yeah, it's work to be done. So recapping here, when I move to that checkout extensibility, it's gonna break where I used to put my uh my confirmation pixels, regardless of what they were, or my conversion pixels, regardless. And so instead I should use an app where possible. Like, you know, meta and Facebook, that's got or meta and Instagram. Meta, the meta channel, Facebook and Instagram. What do we officially call this thing? That channel, you know, they've got a channel to plug in. There's the like the Google and YouTube channel will pop in, but that doesn't load GTM necessarily. Um Yeah. Is there any way to just have it?
Speaker 3
It does not load Google Tag Manager though. So if you had Tag manager installed on that order confirmation page and that scripts firing via GTM, it won't do that. You'll have to go through that process we were talking about about setting that up through through customer events. Um the other thing is that there's some brands and stores that for a multitude of reasons, um, can't necessarily use apps or don't use apps. They have a lot of you know, those apps are very good for just pure out-of-the-box like You view a product, you add it to cart, and you purchase and check out, but anything outside of those kind of out-of-the-box e-com functions aren't available. So there's a lot of brands and stores that that don't use the apps and use more custom applications that would have would have to do this as well as part of the process.
Kurt Elster
So really it sounds to me like if I want the most flexibility, I think the the right way to do this is use that Shopify customer events feature to directly implement Google Tag Manager and then I could just load everything I need through tag manager, assuming it is set up properly in customer events. And this is there's so there's like one big difficult step I have to do here. But once I get past that, then you know, just messing with GTM like I'm used to. Not that GTM is particularly Yeah. It's like moderately painful.
Speaker 3
Yeah. Yeah.
Kurt Elster
It's not easy, but it's well documented.
Speaker 3
Moderately painful is a great way to put it. Uh there's the and there's two things on that. Number one is You know, this should only impact your lower funnel events, like maybe an initiate checkout event and a purchase event. So if you have a current data layer in place on your site and you're already tracking like product detail page views and add the carts and things like that, this should not impact those things. It would be the primarily focused on the like especially The most valuable usually is the purchase, like a purchase conversion. Um, so so that's that's part of it. Um Yeah, yeah, you'd want to implement it via GTM. Then the other nice thing is with the code, even that sample code they do provide in that help article that you can use. They give you code that does push a lot of great things. So you get all like the event ID and session data. You get um like on a purchase event, you get all the user PII that like Meta uses for advanced matching and Google uses for enhanced conversions. All of that is pushed into the data layer as part of that code. Uh the the one thing that's really was missing was the product data and we had to do some finagling to get that to work. But All of those things can be fairly easily. If you're familiar with GTM or watch some tutorials, you can pretty easily pull all that data into your GTM tag. So There is some like um uh sunshine through the clouds as far as like what's there and what's available to you. But but yeah, once you do some of that finagling. There are some like decent things in place for it, but um it just it just it takes a little wrangling to get it to get it to all work.
Kurt Elster
Do you all right, given the I gotta to set up the customer event for Google Tag Manager in Shopify is largely a bunch of copying and pasting. I'm not writing this code from scratch. I don't know what I'm doing. Um it's so it's copying and pasting. Shopify gives us examples, but it's not entirely complete. Do you do you have a resource for this where it's like just plug in your variables and go? And if you don't, I just gave you the like there's your SEO strategy for the week.
Speaker 3
Um, I might have to take you up on that. Uh we we we have the code. I mean we spent some time and I like I mentioned we collaborated with some other people who are working on this. as well, or we were all kind of trying to figure it out at the same time because it kind of hit all of a sudden. Um we do have a resource on it right now. That's a like a proprietary thing that we built, but maybe we'll put it out there for SEO and and get it up and have it be something that's like downloadable through our site or something like that. But um yeah.
Kurt Elster
Or sell it to me is digital download templates, 40 bucks, just make my life easy. And then it's like a hundred percent profit.
Speaker 3
I like that.
Kurt Elster
Yeah.
Speaker 3
We might have to do that.
Kurt Elster
I'm just full of brilliant ideas.
Speaker 3
This is all and to your point, this is all so new. Like we're not talking I gave a presentation on this for the first time, I think, at the beginning of June. So I mean it really hasn't been and that was like right at the i beginning of what we were seeing. It's only been like maybe six weeks of like figuring this out. So this is still fairly like new cutting edge and and we're seeing it more and more as people are getting these notifications and prompts from Shopify to upgrade. We're seeing the the the issue come up more and more and so Then we kind of dive dove in and more aggressively, you know, looked for fixes. So you know, this is still very early on the early end of this, but we're seeing more and more brands and stores be impacted.
Kurt Elster
Okay. All right. Well, this is Oh man, I'm just gonna tell people to go like what cause I'm gonna get so many questions about this. I'm just gonna tell people like go to Tag Hero, just let Brett at Tag Hero take care of this for you.
Speaker 3
Shameless plug, we do offer migration. So we do offer a service that we've built recently where We'll take care of all the Shopify side stuff. We'll get the code in. We'll go into your Google Tag Manager if that needs to be configured, whatever. We'll get all the tags and triggers in place for this so it works for you. So Um we do offer that as a service. We're glad to help. But hopefully the conversation and some of the other resources, if you're savvy enough, you can do it DIY. But we're here to help if you get stuck.
Kurt Elster
All right, per beautiful. Uh Brett, this is I I feel a lot more confident than I than I did before having you know been able to talk it through with somebody. Sure. So thank you. Uh what's your website? If we want if I'm like, look, I don't want to deal with it, I just want to hire Brett.
Speaker 3
Uh taghero. io is our URL. And I'm my email is Brett B R E T T at Taghero. io. So uh feel free to drop us a note through the website or me directly. Uh we have a form on the website and uh we'd be glad to help.
Kurt Elster
Taghero. io. Thank you, Brett. Appreciate it.
Speaker 3
My pleasure. Thanks, Kurt.
Kurt Elster
This episode is sponsored in part by Cleverific. How many times have you had to deal with the headache of a customer needing to change their order after it's been placed? Isn't it a hassle to manually adjust order details like shipping addresses or hand sizes? Well what if I told you that those days could be over? Is That's where Cleverific comes in. With Cleverific, you can empower your customers to make their own changes through a self-service portal or make it easier for your team to handle those complex adjustments directly from the back end. Peter Manning, New York, cut their order support queries by a staggering 99% after integrating Clever Ific. And they're not alone. Cleverific is designed to reduce customer support tickets. Ship orders faster and even reduce returns and lost packages. Listeners of this show get fifty percent off Clever Effix Pro Plan, dropping s your cost to just $49 a month with full access to all of their features. Just go to cleverific. com slash unofficial and use the promo code podcast50 At checkout to claim your discount. Streamline your operations with Cleverific, dramatically cut down on customer support inquiries, expedite shipping, and minimize returns. Cleverific. com slash unofficial. So we've heard about the the thinking behind checkout extensibility and it it Shopify's vision for it and what it means for us. But I also want to hear about the the direct partner experience. You know, people who have to to live and work with it on a day-to-day basis for clients for their job. And so we've got someone here, a Shopify partner. Uh Blake Waldron, who is going to walk us through that and talk to us about his experience with Checkout Extensibility. Um, and he his his experience is extensive. Blake, uh for for our benefit, give brag a little bit. Let's hear about your background.
Speaker 4
Uh yeah, so um I'm based in Melbourne, Australia. I'm the head of engineering of of an agency called Convert Digital. Um and also the founder of a Checkout Extensibility app called Checkout Components. Um been working uh with Shopify for a number of years, but uh my experience with uh checkout extensibility actually goes back Probably almost close to two years or maybe a little bit more. Um, I was very fortunate enough to lead one of the first checkout extensibility extensibility deployments um in the world. So I was part of the beta program with a couple of merchants. Um so yeah, we launched uh ganda. com, uh which is also a headless build, which was one of the first headless builds on Shopify. Um And uh they were a great merchant to go through that experience with. Uh and uh yeah. So it was it was pretty interesting. The migration process, obviously that that early on was very new. Um so it was great to work really closely with Shopify and and go through those steps.
Kurt Elster
There could be anything hiding in check out that liquid. What are the things you're typically replacing? You know, like what's it the the most common you know, hey, there's a piece of JavaScript sitting in the old checkout This is our replacement. I imagine there's a a few very uh uh consistent replacements you have to do here.
Speaker 4
Absolutely. So I think Styling was one thing. Um, and the branding API that's available now is fantastic because every extension that you add inherits the styling of the branding API. Uh so any app that you install from the app the Shopify app store will look how you would want it to look in accordance to your brand, which is great. So All the CSS stuff, we knew that that was going to be blown away because you can't just add CSS into checkout extensibility. It's all powered by that branding API setting. So we knew that that was going to be an aspect of it. Tracking scripts as well. So some people had hotjar or GTM, custom GTM implementations in their checkout. We knew that that concept of having a block of JavaScript running in checkout wasn't the best way to move forward. And I I don't know whose idea it was or who to g give the credit to. But Shopify uh released another product called WebPixels or feature called WebPixels, which basically exists for that sole purpose. Um so developers can create custom pixels which can be installed now either on the storefront or in the checkout exc uh exclusively um to to handle that tracking so if you're a agency developer like myself Um, you know, you can create those bespoke uh for merchants, um, pending, you know, whatever requirements they have, or there's apps that you can install as well. Um, so yeah, branding, um, any analytic-based uh tools, and then some content stuff as well. So like, you know, having a banner. you know, displaying important information um and whatnot. But interestingly, one of the things that I've seen with checkout components, um is the value of having upsells. Like that wasn't something that was possible with checkout. liquid. And if you look at a number of different apps that are on the app store now, um, a lot of them are are uh are utilizing upsells. And like just by having upsells and checkout uh actually has a considerable lift on average order value, which I was quite surprised to see, but it makes sense.
Kurt Elster
Yeah, having well, if you've got the right offer, but yes, certainly.
Speaker 4
Yeah, yeah, absolutely.
Kurt Elster
the that cross-cell offer in the order summary or is is part of the cart display or checkout display definitely helps raise AOV. Uh you're talking about web pixels. Similar to a part of how is that different the than customer events?
Speaker 4
Ah well I mean so customer events is the terminology that's used in the Shopify admin. So if you go to the settings you can see customer events. What you see in customer events, that actually is uh the the the code that you would create there um or any app that you would install which would appear under customer events, they're actually technically called pixels.
Kurt Elster
Okay. Yeah, we we've done the checkout extensibility upgrades and our experience is similar to yours, like we did the branding API, which that was the first time through that was was tough. We got it, but it's like it cut your felt like cut your teeth. Um and then the I did that one. Yeah, it just finding like replacements uh early on was tougher, just you didn't necessarily have as many options. Now it's easier, there's more options out there. to find replacements that have or apps that support checkout extensibility. Um and then the one that would it was still giving us trouble is like what is the what's the right solution here? was uh customer events and web pixels because that additional scripts and checkout where we used to just paste our conversion pixels go away. Um and so the approach I think there is like, hey, can you get Google Tag Manager to load Okay, now just load everything through Google with Tag Manager, or can you find apps that support customer events or web pixels? Agree or disagree, I think I'm on the right track here.
Speaker 4
No, I but I I agree and I think like, you know, when I when I was referring to, you know, early days, it was kind of Wild West a little bit, like there was not a lot of supporting documentation, there wasn't a lot a lot of apps in the space. I remember looking at the migration uh for a number of merchants where they were using particular services which were in checkout. liquid and they were really married to it or engaged commercially, you know, they had a contract signed with that third party. And a lot of the migrations that we were working with at the time the they were put in a halted state We had to wait for that third party to come up with a extensibility uh offering. Um, and I feel like probably the last three months is when a a lot of the stragglers have finally um, you know, arrived at the station, so to speak. Um so we've been able to move forward. But yeah, I think um, you know, if you've got a product uh and you and you want to integrate with Shopify um and you your business is checkout or you have something to do in checkout, like you need to have an extensibility option. Um, like it that's a non-negotiable. So it's good to see that there's more out there. Um uh for sure. Um but uh yeah, definitely in the early days it was kind of like, well, we can't migrate that merchant yet because you know they're married to this address validation service and we can't not use that.
Kurt Elster
Yeah, okay. It's good to I good to hear that because I I had a similar experience where it's like, hey, we could upgrade this, except you absolutely have to have like this one loyalty app that just doesn't have a timeline on when they're gonna get around to it. Yeah. And eventually like like you said, suddenly as we got closer to it, uh that that deadline, a lot more apps started supporting it. Um so good, you know, life gets easier. And you've got, I want to talk about checkout components. Your your app, what is checkout components? How does that work with checkout extensibility?
Speaker 4
I feel like I was very fortunate because a as I mentioned, I was able to participate in their closed beta of uh check out extensibility. And uh it was actually Gander, the merchant, that said, hey, we want upsells in our checkout. And they use a search and merge platform called Search Spring. Um, so uh and like at Convert Digital from from an agency perspective, you know, we're a big believer in if you're already using something in part of your tech stack. you know, try and use it everywhere. Like, you know, get every uh every outcome possible from, you know, the merchant paying for some sort of third party service. You know, so if they're using Search Bring to power recommendations in the product page or cart page, and the um you know the collection pages and they do upsells well let's try and get the upsells and check out and they were like yep we want it how do we do it so we built this one off uh extension for them we got it live Um, it was very exciting to see. Um, but the one consistent theme was we want to have banners show on this specific type of cart or this type of customer. And we want to have additional input fields which are easily mapped to meta uh meta fields on the order or attributes on the order. And I was like, well, this keeps popping up. So I went, okay, well, I'll build something for that too. And extensibility is such a great area from an app developer perspective because every machine's got different requirements. So it's kind of like, you know, if there's a couple of merchants that are wanting the same thing, it's like, okay, well, that's a new feature. I'll build that out. Um, you know, and then like uh checkout components has got its own custom analytics system. You know, merchants started saying, hey, we know that we're getting upsells and that people are buying it because every upsell's got a little uh line item property against it, um, saying this product was added by checkout components. A lot of your apps that operate in checkout extensibility have the ability to create dynamic content blocks. What I noticed was a lot of merchants just want to be told what looks good and what works good and what, you know, they don't want to break it. Uh so uh the app's got a number of templates uh for content. Um it's got dynamic forms for inputs, so you can create your own form and checkout, hide up behind a checkbox if you want. It's effectively a no-code. Check out Extender.
Kurt Elster
Yeah, they're hard to get. That's the tough part is w if you have an app that like the install process is straightforward and the onboarding works and makes sense. you never hear from anyone, you never have problems to solve for merchants. And so you never get to ask for reviews. Like honestly, you should have an app that just like has a little a speed bump intentionally so that you could fix it. Be like, oh we fix that for you quickly. I've seen apps do stuff like that where they're like, oh just DM us if you want to unlock that feature for free. And then when you do it, oh, well, could could you leave a review? And then those apps have like a hundred reviews in a month.
Speaker 4
Yeah, I mean I have I haven't done that, but I I do Neither have I, but Yeah, the the the typical way that I I guess a review occurs, and this is something that I've been uh trying to figure out. Like there's a there's a very small app developer community in Australia. And I've you know befriended a few others that have got relatively successful apps and we catch up probably every month or so and we go, hey, like what are you seeing? You know, what are the trends? How's your growth going, etc. ? And um one of the things that I I kind of realized was that, you know, Reviews when your product's great, it's like when you go to a restaurant. If you go to a restaurant and it's great, uh people will go, Oh, it was a great meal. And you know, that but they pay for it and they leave. When it's really, really bad, they'll leave a negative review. But it's gotta be something absolutely spectacular for them to go, I'm gonna leave a five star review on that. And I think every single review that's there at the moment, um, I think I've got about ten, um, which is not great. Which is not great. I think that's like five percent of the total installs, but um You got ten five star reviews though.
Kurt Elster
I mean even that not easy to do. You know, and the the tough part about working in software in an an internet space where essentially your output is virtual, right? It's code on a screen. Um you don't have it it's tough as a tool using human because you don't have anything physical to show for your work. And so it's very satisfying to to collaborate people and then like see real results. The well, all right. This has been everything I hoped for. Thank you so much for sharing the the checkout um the checkout extensibility experience with us. And check our components, which looks really good. Where could folks go to learn more about you?
Speaker 4
Uh yeah, well I'm I'm on LinkedIn. So I'm you know, if you search my name, I'll I'll pop up. Um I have a website as well. uh beweldron. dev. I try to write when I can. Um I've been pretty poor on that uh recently. But um yeah I'm on LinkedIn. Um so feel free to reach out. And if you have Any migrations or anything like that that you want to run, reach out to Convert Digital. We'll give you a hand. Beautiful.
Kurt Elster
Thank you so much. I appreciate your time.
Speaker 2
Thank you.
Kurt Elster
Crowdfunding campaigns are great. You can add social proof and urgency to your product pre-orders while reducing risk of failure. But with traditional crowdfunding platforms, you're paying high fees and giving away control all while your campaign is lost in a sea of similar offers. It can be frustrating. That's why we built Crowdfunder. The Shopify app that turns your Shopify product pages into your own independent crowdfunding campaigns. We originally created Crowdfunder for our private clients. And it was so successful we turned it into an app that anyone can use. Today, merchants using Crowdfunder have raised millions collectively. And With Crowdfunder, you'll enjoy real-time tracking, full campaign control, and direct customer engagement. And it's part of the Built for Shopify program, so you know it's easy to use. So say goodbye to high fees and hello to successful store-based crowdfunding.
Speaker 5
Start your free trial and transform your Shopify store into a pre-order powerhouse today. Search Crowdfunder in the Shopify App Store to get started.