Shopify Checkout Extensibility: How Plus Merchants Can Customize Their Shopify Checkout

For years, Shopify has helped merchants of all sizes deliver the most reliable, highest-conversion checkout experience. For example, Shop Pay, Shopify's accelerated checkout, enables a four times faster checkout experience and an 11% higher conversion rate than other providers. The only problem: customizing checkout to meet merchant needs could be a slow and complicated process. But that's over now.

As a Shopify partner, our developers already have access to the new Shopify Checkout Extensibility, which allows us to build public and custom apps to creatively customize Shopify Checkout and Shop Pay for Plus merchants.

In this post, we'd like to introduce you to this new Shopify checkout extensibility so you can get an idea of how it can help you customize and optimize your checkout to get a big step ahead of your competition.

Was ist die Shopify Checkout Extension?

After a customer adds products to your cart, they use Shopify Checkout to enter their customer, shipping, and payment information before placing the order.

Checkout is one of the most important points in the customer journey for a successful purchase. That's why Shopify developed the new Checkout Extensibility to give merchants a way to optimize and customize the checkout to their liking.

With Shopify Checkout Extensibility, Shopify partners, like us at Latori, can create apps for Shopify Plus merchants to add more functionality to the checkout that doesn't exist natively. In turn, merchants can then install these apps in their Shopify admin area to add unique elements like product offers, custom fields or banners, and more to their checkout. This creates a consistent experience for shoppers no matter where they checkout.

The previous method of customizing the checkout

In the past, functional and aesthetic checkout customizations for merchants were done directly in the checkout code by editing the checkout.liquid file. This was a direct intervention in the code, which was only possible for technically skilled users and also entailed risks - such as the store's ability to be updated. Sometimes, customization also required more time and longer deployment times. With Shopify Checkout Extensibility, this changes fundamentally. More about this in the next chapter.

What are the benefits of Checkout Extensibility?

With the new Shopify Checkout Extensibility, it is no longer necessary to change the code to customize the checkout. Instead, it's easy to install third-party apps that allow you to customize your checkout in a variety of ways. Checkout Extensibility is designed to make apps secure, fast, upgradeable, and work seamlessly with Shop Pay.

This opens up many new possibilities for you as a merchant. Now let's take a look at what benefits the Shopify Checkout Extension has in store for you in detail:

1.   Present your brand

In virtually every Shopify store, the look and feel of the checkout is more or less identical. That's not necessarily a bad thing, but it does mean that it's not as perfectly aligned with your branding as the rest of your store. This switch from store to checkout can cause some dissonance with your customers and make it a little harder to build trust.

So this is where said Shopify checkout extensions come into play, allowing merchants to create a consistent checkout experience and customize the flow as they see fit. Here are just a few of the ways you can customize your checkout:

• Change the look of your checkout in the branding section of the Checkout Editor, including logos, custom colors, and fonts.

• Make advanced branding customizations to your checkout using the Checkout Branding API.

• Create a consistent experience between your guest checkout and Shop Pay (any customizations you make will be applied to both).

• Apps that extend Checkout automatically adopt your Checkout branding.

2.   Edit the logic of your checkout flow via Shopify functions

In the past, if you wanted to make changes to the logic of your checkout, you had to do at least a little programming to do so, and yet the scope was still quite limited. Now, you can make changes in a number of ways that significantly increase checkout flexibility.

Shopify functions allow merchants to extend, replace, and modify Shopify's standard checkout logic. Elements like discount offers and shipping logic can be edited to fit specific offers. A use case for functions like these are tiered discount systems (e.g. "$10 off when you spend $50"; "$20 off when you spend $100", etc.).

You can also customize the billing logic of your store. So you can change when and how customers have to pay for orders. For example, you could introduce "buy now, pay later" or installment payment plans. You can also change the general flow and layout of your checkout pages. Whether you want to insert a page somewhere or introduce an upselling offer in the middle of the checkout process, you can do it all with Shopify Functions.

3.   Collect detailed customer data

Behavioral data is worth its weight in gold for e-commerce merchants. The more you know about how your audience responds to different store features and products, the easier it is to design experiences that drive the most sales. With Shopify checkout extensions, collecting customer data at checkout will be easier than ever.

You'll be able to track various events like cart abandonments or conversions, and you can link third-party apps directly to this data. This could be useful for tailoring upselling offers to products that are least likely to experience cart abandonment, without compromising the security of customer data.

4.   Optimize performance

• Save time by securely managing pixels from a single location.

• Reduce cart abandonment with actionable insights and analytics.

• Grow your customer base by understanding customer behavior.

• Achieve the highest possible return on ad spend (ROAS) while keeping your customers' privacy in mind.

Now that we know the benefits of Checkout Extensibility, let's review what tools can help you make adjustments in Checkout to achieve your potential goals.

Customization options with Shopify checkout extensibility

Checkout extension with Shopify apps

Shopify apps let you customize and optimize your online store's checkout process. Here's how you can implement it:

Step 1: Choose the right app.

Browse the Shopify App Store for apps specifically designed for checkout customization. Be sure to check reviews, features, and compatibility to choose the best app for your needs.

Step 2: Install and configure the app

Install the selected app in your Shopify admin panel. Most checkout apps offer a user-friendly interface that allows you to customize various settings. This can include customizing colors, fonts, logo placement, fields, and buttons.

Step 3: Configure checkout pages.

Depending on your app and plan, you can customize specific checkout pages, such as the shopping cart, shipping and payment information, and order summary. You can also make the process more intuitive, collect additional information, or add cross-selling elements to take advantage of upselling opportunities.

Step 4: Test and optimize

After you have made the adjustments, you should test the checkout process thoroughly to make sure that everything works correctly. Make sure there are no errors and that the process runs smoothly. You can also run A/B tests to compare different customizations and optimize the conversion rate.

Step 5: Monitor and update

Keep an eye on the performance of your checkout customizations. Track metrics like conversion rate, cart abandonment, and total sales to see how well the changes are working. Update customizations regularly to ensure they're in line with current trends and your customers' needs.

By using Shopify apps, you can streamline your online store's checkout process and provide a user-friendly shopping experience that increases customer engagement and sales.

Customize checkout form options

Customizing your checkout page fields gives you the option to mark some of them as required, optional, or not included. Note, however, that not all fields are customizable.

Customer Contact Method

The Customer Contact Method section allows you to specify which contact options customers see during checkout. You can change the following:

• Selecting the preferred contact method for checkout, either phone number or email.

• Deciding whether to display a link to download the store app.

• Setting whether customers need to sign in before checkout.

Customer Information

The Customer Information section determines what information customers must provide in the checkout. Here you can customize the following options:

• Full Name: you can display first and last names as one field or separate fields.

• Company Name: If you don't sell to businesses, you can make this field optional or excluded.

• Address Line 2: Customers can enter additional address information here. Depending on your needs, you can set this field as optional, required, or excluded.

• Shipping Address Phone Number: Depending on your payment processor or shipping provider requirements, you can make this field optional, required, or excluded.

• Other form options are always required, including the "Save my information and pay faster next time" option.

When customers select "Save my information and pay faster next time", the contact information and shipping address are stored in the customer's browser. Shopify does not store this data, the customer's browser does. After one year, Shopify deletes this data from the browser unless the customer has done so themselves.

Here's how to do it:

In the Shopify admin panel, go to "Settings" > "Checkout".

Customize the desired changes in the "Customer Information" section.

Click "Save."

Marketing Options

In the "Marketing Options" section, you can specify which login options are displayed in the checkout for marketing purposes. You can enable:

Email signup

• Pre-select email marketing that customers must manually opt out of

• SMS signup

Shopify One-Page Checkout

Shopify One-Page Checkout is a modern and efficient way to make the checkout process smooth and user-friendly for customers. Unlike traditional multi-page checkouts, everything is done on a single page, which can speed up checkout and increase conversion rates. Shopify One-Page Checkout is currently only available to merchants with Shopify Plus plan. To find out if One-Page Checkout is also available for you, go to Settings -> Checkout in your Shopify admin area. If a banner is displayed here, One-Page Checkout can be used.

Here are some other important aspects of Shopify One Page Checkout:

Compact presentation: all relevant steps of the checkout, including contact details, shipping and payment information, are combined on a single page. Customers can simply scroll down and fill in all the required details.

Easy navigation: One Page Checkout enables linear navigation where customers can navigate from one section to the next without having to switch between different pages. This minimizes distractions and helps maintain customer focus.

Visual representation: Customers are guided through the checkout process by a clear visual representation. Clear step-by-step instructions and visual indicators show how far the customer has progressed in the checkout.

Real-time validation: Errors in data entry are immediately displayed as the customer enters them. This reduces the likelihood of errors and minimizes the risk of customers abandoning checkout due to invalid information.

Express Options: Some One Page Checkouts offer the ability to use express options such as saving account information or using saved shipping addresses. This can help avoid repeated entries.

Mobile optimization: As more and more customers use mobile devices for online purchases, One Page Checkout is mobile optimized. It ensures that the checkout process works smoothly even on small screens.

Flexible customization: Shopify allows merchants to customize One Page Checkout according to their needs. They can add, remove, or arrange fields to customize the checkout to their store's specific needs.

Analysis and optimization: The One Page Checkout offers the possibility to closely track and analyze customer behavior. Merchants can identify where customers abandon the checkout process and make adjustments to improve conversion rates.

Shopify One Page Checkout is an effective way to make the checkout process seamless and easy for customers. It reduces the abandonment rate and can help improve the overall performance of an online store.

Shopify Checkout Extensions Updates

With the Shopify Winter Editions 2024 new updates to Shopify Checkout have been announced:

Shopify Checkout Extensions for the entire shopping experience

What was previously only possible on pages such as shipping, information and payment is now being extended. Checkout extensibility can now also be applied to pages such as the thank you page or the order status page. Developers can create customized experiences using UI extensions and web pixels, while merchants can choose from a variety of ready-to-use apps to customize these pages after checkout.

New APIs

As many as 14 new APIs have been released for the checkout extension when using apps, including

• Branding API features: Over 50 new color properties, new color schemes, customization options for headers and footers, style of containers, including borders, shadows and spacing

• Shopping cart and checkout validation API: Create public apps with Shopify Functions, integrate custom validation logic into cart and checkout, restrict items to registered customers, mark certain fields as required

• Support for data protection consent: Apps can now request and query data protection consent in the checkout

At the same time, the following new UI enhancements were announced:

• Map

• ChoiceList

• ToggleButtonGroup

• Payment Icon

• Product Thumbnail

Upgrade to Checkout Extensibility

If you are currently still using Checkout.liquid, you should consider upgrading to Shopify Checkout Extensibility as soon as possible, as Checkout.liquid will be phased out from August 2024. Shopify provides information on the advantages of the upgrade for you and how to carry it out in the Checkout Extensibility Hub.

Conclusion

If you've been looking for a customization option for your checkout for a while, or the previously mentioned examples have inspired you, now all doors are open with Shopify Checkout Extensions. This way, your customers can connect with your brand identity at every step of the customer journey. And that's not all: with the help of pixels, you can collect behavioral customer data for marketing, advertising, and analytics in the future.