Shopify

Shopify Checkout Extensibility: how to customize your Shopify checkout to improve conversion by Linda Bleijenberg

The fastest, best converting checkout in the world is continuously getting better - and Code is here to help you leverage its range of new possibilities to your benefit. Now that the Shopify Checkout has become more customizable, what can you do to optimize it for your audience? In this blog we will explain how to customize your Shopify checkout, get you up-to-date on Shopify Checkout Extensibility, and show you a number of checkout customizations to be inspired by.

Shopify-checkout-2.0

What is Shopify Checkout?

The Shopify Checkout is the fastest, best converting checkout currently available to e-commerce merchants. As such, it has huge value to all its users: a frictionless checkout experience improves conversion rates, prevents abandoned carts, increases customer satisfaction and leads to repeat purchases.

At Code we have always admired Shopify’s checkout-first approach, and their constant devotion to making it one of the best, safest and most trustworthy checkouts out there. 

Shopify typically invests a lot of money and resources in their checkout. In 2023 they implemented some major improvements: a platform-wide one-page checkout, and a range of tools to customize its layout and functionality. Merchants now have a lot of flexibility designing their checkout to meet their customers’s needs, and drive conversion.

The importance of a good checkout
We don’t need to tell you that your checkout is arguably the most important bit of your entire online store. This is where conversion has to happen, or your business will suffer the consequences. As our co-founder Bob Rockland likes to remind people: “You can build the most incredibly expensive product configurator, spend a fortune on branding or acquisition campaigns - but if your checkout has friction you will still not make a healthy revenue.” 

What keeps people from completing a checkout, after having gone through the trouble of selecting products and adding them to their cart? The Baymard Institute, a UX research firm, has published a diagram showing the most common reasons

cart-abandonment-stats (1)

As you can see, a too long or too complicated checkout process is the fifth most common reason for people to abandon their purchase plans. This is where Shopify’s one-page checkout makes a noticeable difference for your store’s conversion rate, and gives the platform and its users yet another competitive edge.

How to customize your Shopify checkout

What tools do merchants have at their disposal to customize their checkout? As usual, there is a lot to choose from for Shopify merchants - and even more for Shopify Plus users. Let's dive in.

Drag & drop checkout editor
This is Shopify’s straightforward, code-free tool to make adjustments to the Shopify checkout, found under Settings > Checkout > Checkout customization. Using the editor merchants have a lot of room to customize the checkout themselves, by adding the functionality they want. 

Read more about how to work with the checkout editor

Shopify checkout apps
Before you can start using the editor, you need to acquire the functionality you want. You can do this by installing checkout apps from the Shopify App Store. Alternatively, if you are on Shopify Plus and can’t find what you are looking for, you can have a Shopify development agency (like Code) build or configure checkout functionality for you. 

The Shopify App Store offers a lot of versatile, allround checkout apps that cover a lot of much-requested checkout additions. A popular app is Checkout Blocks: a free, Shopify-owned app that offers dynamic content blocks to Shopify users - and a lot more functionality to merchants on the Shopify Plus plan. 

→ Check out their YouTube channel to see what Checkout Blocks has to offer.   

Via Shopify Functions, merchants also have the opportunity to adjust the standard, built-in features of the Shopify checkout with apps from the App Store. Offer automatic discounts, free gifts, extra payment methods and shipping options - or hide and reorganize them as you see fit.

Last but not least: for code-free tracking pixel management, merchants can now install tracking apps that integrate with Shopify's web pixel API.

Shopify Checkout Extensibility - for Shopify Plus users
To enterprise brands using Shopify Plus, Shopify offers even more room to adjust their checkout. In addition to the checkout editor, Shopify Plus merchants and their agencies have access to Checkout Extensibility: a number of tools to build and deploy tailor-made checkout customizations. They can be custom built for a specific client, or publicly available in the Shopify App Store.

Checkout customizations

What are those tools, and what can you do with them? Some of them are aimed at developers, who can use the tools to either build some specific checkout functionality for their clients, or build a public app that is listed in the App Store. Some of the tools can be used by merchants themselves, usually after having them configured by their agency.

  • Add extra content blocks and fields for your customer to fill out, in addition to the standard fields in the checkout. Have your agency build these Checkout UI Extensions, as they are referred to by developers, or download public UI Extensions from the Shopify App Store. You can install them using the checkout editor.

  • Track customer behaviour across your site with the Web Pixel Extension API. The pixel manager is a new section in the Shopify admin where merchants can add and manage tracking pixels from the App Store.

  • Customize built-in Shopify features using Shopify Functions: add or hide shipping methods or paying methods, or rewrite the rules for combining discounts. Can't find an app for what you have in mind? Have your agency build it for you.

  • Apply your branding to all checkout components with one click. Have your Shopify agency set up your branding rules once via the Checkout Branding API, and apply them to all existing components as well as future additions.

Shopify checkout optimization inspiration

Are you looking for inspiration for your own store's checkout? At Code we see a lot of creativity in Shopify checkouts now, as merchants and app developers are catching on to Shopify's latest checkout adjustments. What additions would you like to see in your store? Here are some ideas for you to try.

Manage customer expectations with banners

  • A BFCM banner with a message that shipping times are longer.
  • A note explaining you don’t deliver to postal boxes because of fraude-sensitivity.
  • Display your brand's USP in the checkout.
  • Add trust seals and security badges.

Collect crucial information with custom fields 

  • Add a field where business clients can enter their VAT number
  • Add a field where customers can enter extra information on delivery, for instance that the package may be handed over to a neighbour.
  • Add an address validation field: does the address exist? This prevents failed deliveries to non-existent addresses.
  • Add an age-check (if you sell alcoholic beverages).
  • Add a field for a customer's membership or ID number.

Give your customer additional options

  • The option to add a donation with a payment.

  • The option to giftwrap a product and add text for a handwritten note with a delivery.

  • A checkbox to add a free gift to an order.

Donation-page-kinderpostzegels
Gift-wrap-option-rosefield

Create custom discounts

  • Use Shopify Functions to build custom product-, order- and shipping discounts that automatically display in the checkout, such as volume discounts or free gifts with a product.
  • Give customers the option to combine various discounts and loyalty points.

Adjust payment and shipping methods

  • Adjust payment methods to the chosen shipping method: customers who choose local pickup can pay in person or by card.

  • Add a cash-on-delivery option for customers in countries where this is common.

  • Exclude deliveries to PO boxes.

  • Offer local last mile services such as Budbee and Ingrid.

  • Add the option to use express payment services like Shop Pay or its Dutch equivalent, the new iDeal.

Integrate your checkout with upselling- and loyalty apps

  • Add personalized upselling and cross-selling to the checkout with Rebuy.
  • Allow customers to validate their loyalty points with LoyaltyLion or Yotpo.
Namuk-checkout-faq
Sports-loyalty points

Have different versions of your checkout
You can set up different versions of your checkout and temporarily switch to another one, for instance at Black Friday or another special occasion. There are also apps that allow you to A/B test different checkout variations: Checkout Pro is one of them.

checkout versions (1)

Your own unique checkout extension
Do you have an idea or requirement for your checkout that is not in the list above, and are you curious if it can be done at all? Get in touch with Code: we'd love to help you either find an app that suits your requirements, or if there is no such app, we can build it for you from scratch. We look forward to seeing what you come up with! 

A final note on express checkouts with Shop Pay

We very briefly touched upon it earlier in this article: the trend for express payment services that enable customers to complete checkouts even faster. 

Shopify's own express payment service is called Shop Pay, which is coupled to the Shop app - an app for signed-in shopping where users can do all their online shopping in one place. The app only lists products of merchants who have Shop enabled, whether they are on Shopify or not - so this might be an interesting extra sales channel for brands.

How does Shop Pay work? Customers can use their Shop account to complete a checkout. Clicking the button ‘Buy with Shop Pay’ leads them to their Shop app, where they can complete the checkout in an instant by entering a five-digit verification code. Because the app has their checkout data stored, they won’t have to fill out any fields anymore - making the Shop Pay checkout extremely easy to use and as friction-free as it gets.

A downside to Shop Pay for Dutch customers is that iDeal isn't (yet) available in Shop. For them, using ‘the New iDeal’ might be a better option: iDeal's very own express payment service.

The Shop app and Shop Pay have been rolled out in a number of European countries, including The Netherlands. Some of our clients already have Shop Pay enabled and see promising results. Want to know more about it? Get in touch, we’d love to help you setting up Shop and Shop Pay.

Optimize your Shopify checkout with Code

The Shopify checkout is continuously improving, and with the latest round of checkout features Shopify has yet again made a big step forward. Leverage the platform's high-converting, freely adjustable one-page checkout to your advantage by using Shopify Checkout Extensibility, and get creative with its many options to build the checkout that fits your brand best.

Are you looking for an experienced Shopify Partner to help turn your Shopify checkout into a highly converting asset? Contact Code for a free checkout audit or checkout consultation to discuss your options.