It's Ori from One Scales. In today's article, I'm going to cover a Shopify Plus exclusive feature: customizing the checkout page. In my opinion, it's by far the most important functionality that Shopify Plus offers. It's crucial for bigger websites, shops, and online enterprises that need a lot of customization on the checkout page—for promotions, product offerings, gifts, messaging, and more.
I want to show you a little bit about it so you have an idea. As always, if you have any questions, let me know. We're answering every question that we see you guys ask, and we're trying to answer as best as we can.
Standard vs. Customized Checkout Page
First, I want to show you a checkout page on non-Shopify Plus and then an example checkout page that I customized for this article.
Standard Checkout Page:
This is just a basic checkout page—the one you're familiar with. Every single Shopify site has this structure. There's something in the header—your logo, and sometimes even a banner. You can do that in Shopify or Shopify Plus. Then everything below—all of the information the customer needs to fill out, all of the product totals—is set. You cannot change anything. The only things you can actually change are delivery methods and payment methods, but they're the same for everybody, every product, everything. Aside from specific countries that you can customize, the payment and delivery methods are consistent across the board. For example, I have credit card and Cash on Delivery (COD) options.
Customized Checkout Page:
Now, let me show you an example of how a checkout page might look if you customize a lot of things.
- Promotional Banner: I have a promotional banner that tells people, "Hey, you have free shipping on all orders."
- Guarantee Box: There's some kind of guarantee box above my product.
- Modify Variants: I can allow people to modify or change their variant here, which you couldn't do before.
- Upsells: I actually have some upsells. I can sell similar or recommended products with or without a discount.
- Additional Notes: I can gather other notes—for example, delivery notes, gift wrapping, or any kind of notes I want to have here.
- Payment and Shipping Methods: I can change or hide the payment methods or the shipping methods. I can rewrite them or reorder them. For example, for some products, maybe the Cash on Delivery should be first and the credit card second. Or maybe I want to hide the Cash on Delivery option, which we've actually done in this example.
This is really, really beautiful. You can customize so many things, and you can actually write what they call "functions," which are not just using the apps that are available. You can make your own code to completely do all kinds of stuff—automatically add products to the cart like a gift or change something. You can even change some of the content or information below or inside the items. You can do a lot of things with scripts—for shipping, for payment, for products, for promotions, for pricing—a ton of things.
The App I Use: AfterSell
So, this is an example, and I want to show you a little bit about the app I use and some ideas. If you have any questions, let me know.
For this, there are actually a few apps out there—of course, only for Shopify Plus. The one that I like is AfterSell, which I'll link in the description. You can use it; there are a few others out there. There's one that just got bought by Shopify that a lot of people also use—I think it's called Checkout Blocks, if I'm not mistaken. I like AfterSell better because it has some additional features. For example, you can select variant products and some other things. The other one is also good, but it depends on your requirements. You can find the one that's fitting for you. I really like AfterSell because it covers and has the most features that I've been able to find.
Using AfterSell to Customize Your Checkout Page
So, what do you have here in the app? You have—again, you can use different apps—you have something called the Checkout Editor, where you can create all of these things that we talked about. You can add banners, text, modifications, upsells, notes, and stuff like that.
Simply put, this app is very easy to use. Based on what you want—for example, the upsells, which we have down here—you can just click on it, and it'll have... I'll show you a few examples. I just want to first cover this:
- Cart Controls: With modification, you can actually modify the product—either add more quantity, remove, or change the variants.
- Rewards: It's more like a threshold thing—getting people to spend a little bit more. "Hey, if you've reached this amount, you might get, for example, free shipping or a gift."
- Trust Badges: Which a lot of people have.
- Testimonials: Adding customer testimonials to build trust.
- Notes: We talked about the notes right here—for example, delivery notes. But it doesn't have to be delivery notes.
- Images: It could be just your own image, like the one I have right here on the top. Or you can have something like which credit cards you accept or anything else.
- Text: Any text you want, like the guarantee we have right here—getting people to trust you more, to feel, "Oh, this is our return guarantee," or "This is our policy," or whatever you want to promote.
Setting Up Customizations
So, how do you do it? You go to a specific one. Let me show you a simple one right here—for example, Text. You click on Edit; you actually create it. You can create a new one; you can create multiple. And you go here—for example, I'm editing mine—and you can choose the style and when it applies.
Conditional Display:
This is a really interesting thing. I can decide that my banners or my upsells or my content—anything I'm customizing—I can apply it to all customers, or I can apply it to some customers based on:
- Who they are as a customer
- What products are in the cart
- Pricing
- Shipping information (like shipping country)
I can also do other things like that. So, anything that's in the cart—or most things that are in the cart—you can decide when to display these banners, text, upsells. You should really carefully think about it because it really matters. You can actually convert and sell more, and that's a very important thing.
A/B Testing:
The nice thing about this app as well—and we've covered this in another video (I'll link the video of AfterSell, where we've covered some things like post-purchase and other features that are available not just for Shopify Plus but also Shopify)—you can create A/B tests. Over time, you can create two versions and see which ones bring more sales, which ones people like more. You should always use those kinds of things.
I can just change the content right here—'Quality Guarantee'—here's my description, 'Quality Guarantee.' I can just change them, save it, and good to go.
Positioning Your Customizations:
Now, this is not necessarily an AfterSell tutorial, but once you do set up a new customization, you can go to the Shopify Checkout Editor, and you're going to decide where it actually goes in the checkout page.
You can decide that the widget goes here—for example, this image widget goes here—but you can drag it down. It can go here or here. There are some limitations; you can't do it in the middle of some parts, but you can do it on the bottom, on the top. You can view it on mobile to see how it looks, and you should place them well.
For example, the note—I decided to place it right after the shipping because it is, in this case, a shipping note (a delivery note). But you can move these things, drag them, just click on Add, make the block, and then put it. A block is basically the feature that you're doing—for example, an image or an upsell. You're just going to decide where it goes. It's really, really nice.
If you have any questions about this, let me know. I'd be happy to answer as well. You set it up, click Next, and you're basically good to go. You finish here; you can see the ones you've created. You can create multiple of them, and that's it.
Upsells:
For the upsells—I think this is a really important part because a lot of you guys really like upsells—you can promote one or multiple products. You can set up your own products or automatic products based on Shopify's recommendation engine. If there are more orders of a certain product, it'll recommend that more. You can set up different things with or without promotions.
Triggers and Conditions:
Obviously, the trigger—which is, who am I showing these promotions or these products or this text to—is crucial. You should set these conditions because they're very, very important. These conditions include:
- Which products (like we talked about)
- Collections
- Cart totals
- Shipping
- Discounts
- Type of customer
- The language they speak
All kinds of things like that. It's really, really nice.
Final Thoughts
So you have that. This is really, really important. This is basically the overview that you can see for customizing a checkout page. You can have your own functions, which are basically scripts or code, to do a lot more than just the app. This is one way to do it with the app very easily. If you think carefully, you can make a lot more sales, make your customers happy, provide the information they need, and that's it.