Customize checkout: A graphic showing a mobile phone on a wavy blue background surrounded by app icons such as a calendar, award badge, and delivery truck.

At Shopify, we know how critical the checkout is when it comes to converting customers. As a result, we’ve worked tirelessly to ensure that the Shopify checkout is both incredibly fast and easy to use.

However, it’s also key that checkout has the flexibility to present the unique experiences, promotions, and features that brands need to entice shoppers, while keeping orders accurate and compliant with the merchant’s policies and regulations. On the marketing side, this means designing a checkout that boosts conversion rates and maximizes the lifetime customer and average order value. When it comes to compliance, brands can ensure that accurate buyer expectations are set and that orders follow the brand’s business rules and any relevant regulations. This is where checkout extensibility comes in.

With checkout extensibility, you get the tools, functionality, and deployment model necessary to build tailor-made checkouts for all brands on Shopify Plus. In this article, we dive into the specific technology that you can use to build checkout customizations, as well as some key use cases that they can power.

Catch up on the latest developer announcements from the Shopify Winter ’23 Edition

The Shopify Winter ’23 Edition was full of big announcements for developers who work with Shopify. Visit the Shopify Editions website to get caught up on all the product news that impacts your business.

Go to Editions

Checkout extensibility is a suite of powerful capabilities that allow developers to customize checkout. These include:

At the Shopify Winter ’23 Edition, we announced new checkout UI extension capabilities and surface areas that provide major benefits to both developers and merchants.

On the developer side, checkout apps can now be sold directly to Shopify Plus merchants in the Shopify App Store, allowing you to broadly distribute them for easy installation and configuration. App-powered checkout extensions are upgrade-safe, higher-converting, and integrated with Shop Pay.

In-house developers and agencies also have access to all the same platform capabilities to develop custom apps for specific merchants.

Shopify Plus admins can install your app and configure it directly in the new checkout editor. For admins, this app-based model means they can quickly customize their checkout without ever needing to touch a line of code.

10 ways to build a better checkout experience with checkout extensions

Now that you’ve got a high-level understanding of what checkout extensibility means, let’s take a look at how it can help you build unique checkout experiences.

1. Set expectations with custom banner messages

With the rising cost of new customer acquisition, it’s critical for brands to earn and maintain trust with their customers, especially during the checkout process. This trust will help set clear expectations with buyers and ensure that they have all relevant information before completing a purchase.

Custom banner messages allow you to include important information for buyers right on the checkout page, so there are no surprises as they move through the buying process.

Common examples of custom banner messages that brands display in checkout include:

Sharing which items are not eligible for returns or exchanges
Highlighting any potential shipping delays
Notifying buyers about special circumstances to be aware of, such as holiday turnaround times
Showcasing industry-specific trust badges, testimonials, or quotes

By leveraging checkout UI extensions, you can quickly build multiple versions of custom banners that render at the Checkout::Dynamic::Render extension point within the checkout. Best of all, you can choose a specific location in checkout for the banner to show, or give merchants the choice to determine where and how these banners should be displayed using the checkout editor.

Mockup of a customized checkout with two colourful pairs of shoes in the cart and showing a custom banner about a final sale condition — Two different checkout examples, both showing a special field where information like delivery instructions can be noted by the buyer.

To get started building a custom banner, visit our developer documentation at the link below.

Build a custom banner

2. Leverage custom fields to collect additional information

Sometimes, to ensure an order can be properly fulfilled, to personalize the customer’s experience, or to satisfy a business compliance rule, you need to collect additional information from the customer in checkout. To help meet these expectations, many brands leverage custom inputs to collect important information from buyers. For example, they might collect:

Delivery instructions for apartments or office buildings, like buzzer codes
Requests for non-contact deliveries
Special care instructions related to the delivery
Requests for sustainable packaging

Delivery instructions aren’t the only thing you can do with custom fields. They also allow you to capture additional information so you can better tailor the customer experience for the buyer. Some examples include:

Providing gift messages to add a personal touch for the order recipient
Collecting voluntary information on a buyer’s preferences to personalize marketing
Adding membership or ID numbers

Checkout UI extensions can be used to add these special fields, which render at the Checkout::ShippingMethods::RenderAfter extension point.

Mockup image of two different checkout examples side by side, both showing shipping method fields at the top. The checkout on the left has a field to provide delivery instructions and the one on the right allows the customer to add a message for the recipient if their purchase is a gift. — Two different checkout examples, both showing a special field where information like delivery instructions can be noted by the buyer.

To get started building custom delivery instructions, visit the link below.

Build custom delivery instructions

3. Use product upsell offers to increase average order value

The ability to add upsell offers within the checkout is probably the most popular checkout customization for Shopify Plus merchants. Brands from around the world leverage these checkout upsell messages to help increase average order value and to cross-sell relevant items in a collection, like the space-themed shoes and socks in our example below.

At the Shopify Winter ’23 Edition, we made checkout upsells even more powerful by allowing you to access the Storefront API to power the logic behind your upsell. With this capability, you’ll be able to suggest the most relevant items to customers based on the existing product or collection tags from the items in the cart.

You can build pre-purchase product offers that render at the Checkout::Dynamic::Render extension point with checkout UI extensions.

Mockup of a checkout with a product offer of socks to go along with the customer's purchase of two pairs of shoes — An example of a checkout experience with a “You might also like” section, displaying products related to the original purchase.

Visit our documentation to get started building a product offer at the link below.

Build a product offer

4. Highlight important causes with with donation banners and upsells

With more commerce options than ever before, consumers are increasingly looking to buy from brands that support the environmental, social, and governance causes (known as ESG) that they are passionate about. To help quantify this concern, ESG factors will play a role in nearly half of all consumers’ purchase decisions.

As a result, it’s critical that brands let customers know about the causes they support. It’s even better if a merchant can provide a way for customers to also donate to that cause. That’s where checkout extensibility comes into play. With checkout UI components like custom banners and upsell offers, you can build a donation option that displays at the Checkout::Dynamic::Render extension point. These donation options can include ways for buyers to support a specific charity or to let them know how much of their purchase is being directed to a specific cause.

By including a donation option directly in the checkout flow, customers can quickly understand what causes a brand believes in, and easily add their support.

Mockup of a checkout with a custom banner allowing customers to donate to a charity — An example of a checkout with a custom banner allowing buyers to add a donation to their purchase.

Get started building a donation banner at the link below.

Build a donation banner

5. Sell to the right customers by validating purchases

Although the ultimate goal of the checkout is to convert customers, it’s often necessary that they meet certain qualifications before they’re able to complete a purchase. Ensuring that customers are compliant is especially important when selling items that require an age verification, like liquor or cannabis products.

With the Cart and Checkout Validation Shopify Function, you can ensure that customers can only complete a purchase if their orders comply with a specific set of rules, determined by the merchant. Field validation can also be performed using UI extensions. Some of the most common use cases for cart and checkout validation include:

Verifying the age of a customer
Enforcing character limits to ensure checkout data syncs to external systems properly
Requiring a custom field to be filled out before the customer can check out
Ensuring that the item can be delivered to a shipping address that is not a PO box
Checking that the cart doesn’t contain items that shouldn’t be purchased together, like a lighter and lithium batteries
Ensuring the checkout conforms to order minimum or maximums

Mockup of a checkout validation rule warning the customer they are not legally old enough to buy some items in their cart — An example of a validation rule that ensures customers are the appropriate age before purchasing a product.

Visit our developer documentation to build your first validation rule at the link below.

Build a checkout validation rule

6. Create custom discounts to incentivize buyers

Offering unique discount promotions is a key way for brands to attract customers, boost sales, increase cart size, and stand out from the competition. By leveraging Shopify Functions, you can build custom product, order, and shipping discounts that automatically display in checkout. As an added bonus, custom discount rules are configured directly in the Shopify admin and can be viewed in Shopify analytics sales reporting, alongside Shopify’s automatic discounts.

Some common discount ideas that brands have long been interested in include volume discounts based on the number of items purchased, or a free-gift-with-purchase offer when a specific dollar threshold is reached.

Mockup of a customized checkout showing additional discounts the more items the customer buys — A custom volume discount on the product page and reflected in checkout.

Learn how to build custom discount offers at the link below.

Build custom discount offer

7. Display payment and shipping methods with payment and delivery customizations

There’s nothing worse to a brand than seeing a high rate of abandoned carts in the checkout. Although there are many tactics that can help reduce cart abandonment, one of the most successful strategies is to customize the checkout experience to highlight the highest-converting payment options to your customers.

With Shopify Functions, brands can appeal to their target customers by displaying unique shipping options that meet a specific set of criteria. For example, a brand could entice local customers with an eco-friendly bike delivery option to buyers who live within a certain distance, determined by ZIP or postal code, from the fulfillment center.

When it comes to payment customizations, you can hide, reorder, and present custom payment options to your buyers based on a number of factors. One of the most popular payment customizations includes surfacing a “cash-on-delivery” option to customers, as long as the total value of the order is below a specific threshold.

Mockup of a customized checkout giving the customer two delivery options and two payment options — An example of a ‘Cash on Delivery’ option that disappears if the cart value is above a preset threshold.

Get started building payment or delivery customizations via the links below.

Build payment customization

Build delivery customization

8. Reward your most valuable customers with loyalty redemption programs

As customer acquisition costs surge, it’s more important than ever for brands to focus on customer retention. This is especially true when considering the fact that loyal customers are worth 22 times more than average customers. One of the best ways to boost brand loyalty is to offer special discounts to your most loyal repeat customers.

Thankfully, adding loyalty customizations to checkout have never been easier thanks to the new Session Token and Discount Code API for checkout UI extensions. With the new Session Token API, Shopify provides a signed token that can be verified on an app server. This token can be used by apps to ensure secure loyalty points redemption when combined with applying a Shopify discount code in checkout.

Once the buyer’s identity and history has been verified, brands can offer VIP discounts to their best customers.

This update also allows for brands to give buyers the option to redeem loyalty points for a discount code at checkout.

Visit our documentation to start building loyalty customizations at the link below.

Build loyalty customization

9. Build unique brand and shopping experiences

As pandemic restrictions around the world loosened in 2021, physical retail grew faster than ecommerce for the first time ever. Compounding this trend, half of generation Z shoppers favor the in-store experience. In order to combat this shift, brands need to provide a fun and unique online shopping experience.

By leveraging the available suite of checkout extensibility capabilities, you can make online shopping fun by:

Using metafields to identify and display promotions to your most loyal customers
Leveraging the Storefront API to pull relevant results and personalize free gift offers
Use multiple checkout UI components to compose one-of-a-kind experiences unique to your brand, like the trivia question shown below

Mockup of a customized checkout gamified to give the customer a free pair of socks if they answer a multiple-choice question correctly — An example of a unique checkout experience using a trivia question. If the buyer chooses correctly, they can win a free pair of socks.

Start building unique shopping experiences by visiting our docs.

Build unique experiences

10. Inherit a single look and feel that reflects your style

One last capability to highlight is that brands can make advanced customizations to the appearance of their checkout with the Branding API. This API allows you to make customizations, from changing the colors and fonts in the checkout to adding your favicon or adjusting the corner radius on buttons.

Best of all, this branding is automatically applied to checkout, Shop Pay, and is inherited by checkout extensions installed on the shop. That means you only have to install your app customizations once and don’t need to modify code every time you want to update the look and feel of your checkout extension.

Mockup of a customized checkout transforming its appearance using the Shopify Branding API

Warren Pamukoff