Unlock Customization: Extend Your Checkout with Shopify Apps
Table of Contents:
- Introduction
- Problems with Customizing Checkout Using Liquid Templates
- Introducing Checkout Extensions
- The Architecture of Checkout Extensions
- The Three Central Concepts of Checkout Extensions
5.1 Extensions
5.2 UI Components
5.3 Branding API
- Security Measures in Checkout Extensions
- APIs Available for Customization
- Using UI Components for Visual Customizations
- The Checkout Branding API
- Conclusion
Introduction
Welcome to the Unite developer session on Checkout Extensions. In this session, we will discuss the new capabilities coming to Shopify checkout that allow developers to customize and extend the checkout experience using apps. We will explore why Shopify is building checkout extensions and how they work. This article aims to provide a deeper look into checkout extensions and address the problems they solve. So, let's dive in and explore the world of Shopify checkout extensions.
Problems with Customizing Checkout Using Liquid Templates
Before we explore checkout extensions, let's understand the limitations and challenges of customizing the checkout experience using liquid templates. While liquid templates provide some flexibility to make visual changes and customize a few parts of the checkout workflow, they come with significant problems and risks. The tight coupling of liquid templates with the implementation of checkout makes it hard to evolve the checkout without breaking merchant customizations. This leads to a lose-lose situation where stable checkouts miss out on new features, and changing checkouts force merchants through a painful upgrade process. Additionally, the workflow for developing and integrating changes using liquid templates is cumbersome, prone to bugs and regressions, and requires repetitive work during checkout upgrades. Another concern is security, as injecting third-party JavaScript in the checkout creates a significant security risk, especially during the checkout process, where sensitive information like personal and credit card details are entered. To address these challenges, Shopify has introduced checkout extensions.
Introducing Checkout Extensions
Checkout extensions are a new way for app developers to customize and extend the purchase experience for merchants. They allow developers to contribute functionality to specific parts of the checkout page, called extension points. There are three types of extension points: augmenting existing parts of the checkout experience, replacing elements of the checkout page, and adding entirely new elements to the checkout flow. By decoupling extensions from the implementation of the page, Shopify ensures adaptability to different checkout experiences, even when enabling features like Shop Pay. With checkout extensions, JavaScript code executes safely within the checkout, thanks to a unique architecture that combines the security guarantees of iframes with the feel of a fully integrated web app. This new approach shifts the focus to the client-side, resulting in faster buyer interactions, improved conversion rates, and customer satisfaction. Now, let's explore the architecture, concepts, and benefits of checkout extensions in more detail.
The Architecture of Checkout Extensions
Checkout extensions adopt a browser-client-side-centric architecture, unlike the server-centric approach of traditional liquid templates. By running extensions in web workers, which are separate background threads with their own origin and security context, Shopify ensures the security of the checkout page. The extensions' JavaScript code is packaged alongside framework code, running inside one of these web workers. This framework code takes care of loading and executing extensions at the right time, as well as passing data back and forth between the extension and the main page over a secure message channel. The main advantage of this architecture is the ability to build dynamic and interactive customizations with a seamless visual integration into the buyer's checkout experience.
The Three Central Concepts of Checkout Extensions
Checkout extensions are built on three central concepts: extensions, UI components, and the branding API. Let's take a closer look at each of these concepts.
Extensions
Extensions are created by third-party developers to add functionality to specific parts of the checkout page, known as extension points. They come in three varieties: augmenting an existing part of the checkout experience, replacing an element of the checkout page, or adding entirely new elements to the checkout flow. The use of extension points allows easier integration of multiple extensions and ensures stability as the checkout experience evolves. Developers can build extensions using either a declarative React component coding style or plain JavaScript, depending on their preference and the complexity of the customization required.
UI Components
Checkout extensions have access to a rich library of UI components that enable developers to build interactive checkout functionality. These components, similar to those available through HTML or JavaScript libraries like React, provide a wide range of visual customization possibilities. The advantage of using these components is their seamless integration with the default Shopify checkout experience, ensuring snappy performance and a consistent user interface.
Branding API
The new checkout branding API provides merchants with fine-grained control over the visual style of the checkout page. It allows customization of the appearance of both the default checkout components and third-party extensions, without directly overriding CSS styles from Shopify's checkout implementation. This higher level of customization stability enables merchants to create a cohesive and branded checkout experience for their customers.
Security Measures in Checkout Extensions
To address the security risks associated with customizations in the checkout process, Shopify has implemented several measures in checkout extensions. The use of web workers ensures that extension code executes in a sandboxed environment, providing the necessary security guarantees. Although iframes may still be utilized in the sandbox implementation, all visual elements, including default checkout elements and extensions, are rendered together in the main host page. This approach allows for a fully integrated web app feel while maintaining security against malicious scripts. With these security measures in place, merchants can confidently customize their checkout without compromising sensitive customer data.
APIs Available for Customization
Checkout extensions provide flexible APIs that enable a wide variety of checkout customization workflows. These APIs allow developers to access and modify line items, customer information, shipping and billing addresses, custom meta fields, and buyer journey information. By leveraging these APIs, developers can create powerful customizations that enhance the buyer experience and automate business processes. Customizations can range from adding free gifts or samples to the buyer's order to applying complex business logic based on buyer actions during checkout. The APIs provided by checkout extensions ensure that built-in checkout behavior remains intact and are not subject to the checkout upgrade cycle, as experienced with liquid-based checkout customizations.
Using UI Components for Visual Customizations
To create visually appealing customizations, checkout extensions offer a library of UI components that can be utilized through JavaScript or React syntax. These components provide a consistent and seamless user interface, integrating with the default checkout experience. Developers can leverage these components to add extra text fields, buttons, or any other visual elements required during the checkout process. The flexibility of using either plain JavaScript or React syntax allows developers to choose their preferred coding style and build complex nested elements with ease.
The Checkout Branding API
The checkout branding API empowers merchants to have more control over the visual style of the checkout page. With this API, merchants can customize fonts, colors, and other visual elements to align the checkout page with their brand identity. The branding API allows customization of both default checkout components and third-party extensions, ensuring a cohesive visual experience for buyers. By decoupling customizations from the underlying checkout implementation, the branding API provides stability and flexibility as Shopify continues to evolve its checkout features.
Conclusion
Checkout extensions revolutionize the way Shopify merchants can customize and extend their checkout experience. By addressing the limitations and challenges of liquid templates, checkout extensions offer a more flexible and secure solution. The architecture of checkout extensions, with a focus on the client-side, ensures faster buyer interactions and improved conversion rates. The three central concepts, extensions, UI components, and the branding API, provide developers with the tools to create powerful and visually appealing customizations. With a comprehensive set of APIs and a library of UI components, developers have the flexibility to build unique checkout experiences while maintaining stability and security. As checkout extensions continue to evolve, Shopify welcomes feedback from developers to further enhance the platform, providing a seamless and personalized checkout experience for merchants and buyers alike.
FAQs
Q: Can checkout extensions be used with liquid templates?
A: No, checkout extensions are a separate system that allows for more flexibility and customization than liquid templates. Liquid templates are still available for simpler visual changes, but for more advanced customizations, developers should utilize checkout extensions.
Q: How do checkout extensions impact the checkout upgrade process for merchants?
A: Checkout extensions decouple customizations from the underlying checkout implementation, reducing the impact of checkout upgrades on merchant customizations. Merchants no longer need to go through a painful upgrade process every time a new checkout version is released.
Q: Can checkout extensions be used in combination with other Shopify apps?
A: Yes, checkout extensions can be combined with other Shopify apps, allowing for comprehensive customization and functionality in the checkout process. Developers can leverage the extension points and APIs to integrate with other apps seamlessly.
Q: Are there any limitations on the number of extensions that can be used in the checkout process?
A: There is no hard limit on the number of extensions that can be used in the checkout process. However, it is important to consider the overall impact on performance and user experience when utilizing multiple extensions.
Q: How secure are checkout extensions?
A: Checkout extensions utilize web workers and a sandboxed environment to ensure the security of the checkout process. Malicious scripts are isolated and cannot access sensitive customer data. Shopify continuously monitors and updates the security measures in place to safeguard the checkout experience.
Q: Can checkout extensions be used on mobile devices?
A: Yes, checkout extensions are designed to work seamlessly on both desktop and mobile devices. The UI components provided by Shopify are responsive and adapt to different screen sizes, providing a consistent checkout experience across devices.
Q: Are there any additional costs associated with using checkout extensions?
A: Shopify does not charge additional fees for using checkout extensions. The pricing depends on the individual app or extension utilized, as determined by the app developer or provider.
Q: How can merchants find and install checkout extensions?
A: Merchants can browse and install checkout extensions from the Shopify App Store. They can search for specific functionalities or explore featured extensions to enhance their checkout experience. Once installed, merchants can configure and customize the extensions based on their requirements.
Q: Can I develop checkout extensions for Shopify Plus merchants only?
A: No, checkout extensions are available for all Shopify merchants, including both Shopify and Shopify Plus users. Whether you are targeting small businesses or enterprise-level merchants, you can develop checkout extensions to cater to their specific needs.
Q: Can checkout extensions be localized for different languages and regions?
A: Yes, checkout extensions can be localized to support different languages and regions. Developers can utilize internationalization techniques to provide localized text and ensure a seamless checkout experience for buyers worldwide.
Q: What kind of support is available for developers building checkout extensions?
A: Shopify provides comprehensive documentation, developer resources, and support channels to assist developers in building checkout extensions. Developer forums, webinars, and tutorials are also available to facilitate the development process and address any challenges developers may encounter.
