On the 14th of August 2023, both Shopify Scripts and Shopify Checkout Liquid that has enabled the Plus developers to alter the Shopify checkout flow was deprecated. Shopify Scripts were substituted with Shopify Functions, & the checkout. The liquid which was previously used was replaced by the new Shopify Checkout Extensibility toolkit.
No interrupted Migration to the New Checkout Extensibility
This article can be useful to Shopify Plus merchants who require a breakdown of the process of promoting the new version of the checkout. While there will be some things you can do by yourself, there will be some changes that will need the help of a developer.
However, if you want to avoid problems or risks in difference between old and new checkouts and want to migrate it in risk-free manner then it will be our pleasure to provide you our professional services of Shopify Plus developers.
What is checkout.liquid and why Shopify is depreciating it
Checkout.liquid is a file coded in liquid, it is the one that determines the display of the checkout page. For the other plans that are below Shopify Plus, it is uneditable, which implies that it cannot be changed. Shopify Plus merchants could previously open this file and make changes (primarily through the developer), thereby endangering the fact that a key part of the service was vulnerable to mistakes and outages.
Thus, with the new version of Checkout (One Page Checkout), the owners of Shopify stores have chosen to expand the possibilities of changing this e-commerce slice with many more options. However, certain of the changes can be done without the assistance of a programmer today. For developers though, that is where the opportunities will be significantly more than previously.
Checkout Extensions on Shopify: What are they?
If you follow to our contents or you read the market news of the ecommerce platforms you would know about this policy of Shopify regarding the impossibility of editing the checkout. It is one of the advantages which has been specified as a disadvantage, nevertheless, the further analysis revealed that it is the best checkout in the world, if to compare it to major CACs platforms.
Currently, the concept of checkout extensions refers to a few of the solutions that will contribute to the further development of the customization options. The presented solutions will be met with interest from both parties of interest, namely merchants and developers. First, let’s discuss the changes you can introduce independently of your development team.
Some of the code-free features included in Shopify admin panel
First of all, let’s discuss what ordinary, non-developer, can do in relation to the modifications to the software.
Checkout editor
Checkout Editor is a new instrument for the checkout’s visual customization – its use is possible only after implementing Checkout Extensibility in the shop. It can be accessed from two levels:
- Settings > Checkout (you can create a couple of checkout versions here and use them for example for staging and production environments)
- Sales Channels > Online Store > Themes > Customize
💡 Find out more about the all-new drag-and-drop checkout editor
Checkout apps from the Shopify Apps store
It can be seen that from the checkout editor, one can launch the Shopify app store and install checkout apps.
Shopify App developers are proving themselves right on this; there is no dearth of ideas on how to enhance the shopping experience and work on the KPIs like CRO, AOV, LTV, or ROAS.
What then results is that the checkout editor of the installed applications can then be arranged and specifically the configured modules of the installed applications can be taken or shifted from the checkout editor.
Shopify pixels manager
Pixels are short pieces of Javascript code that execute on your online store which includes checkout. You can deal with them in the Customer Events section of your administrative panel. Their main purpose is to exchange information about customers’ activity. Primarily for advertising and tracking of consumer interests of the clients. But not only. The other advantages are another layer of protection (what data I am disclosing and to whom), no possibility of executing the third-party’s JavaScript code, and integration of privacy-related tools.
Additional developer tools
Now let’s get into the customizations that only developers can do.
Branding API
If you want to further customize the look of your checkout, the Shopify Branding API can help. The ability to edit using code allows us to change the appearance of elements like fields, layout, border radius, and website icons.
The changes made by the Branding API not only affect the look and feel of the delivery, but also the customer pages and attachments that are a lifesaver. It’s really easy when it comes to design control; you have full control over all the apps in one place.
Checkout UI extension
The Payment UI extension allows developers to create the custom app block you see in the Payment Editor section above. You can add custom actions or reasons for all or individual steps of your checkout process: product details, shipping, payment, and order.
Here’s a list of quick ideas and tweaks that can create:
- Upsell section
- Product subscription
- Collecting additional information from customers – enter a gift message
- Additional messaging and alerts
- Additional form elements – e.g. checkbox pack as a gift, send to someone else
- Redeem a gift card or discount code – display information if it is valid
- Verify the buyer’s identity in order to assign him or her points in the loyalty program
The best thing from a developer perspective is that the UI extension now has access to the Storefront API, meaning you can use some additional data like customer or product identifier name in your custom logic.
Web Pixel App Extension to track Customer events
Web Pixel app extensions work similarly to UI extensions. Developers can now write their own code to track user behaviour (customer events). It’s a good idea to check if there are other presents that have been tested and are stable before building your own Pixel. Keep in mind that the more pixels you add, the slower your site will be.
Shopify features
Shopify Plus users who upgrade their accounts to the extension can now create custom apps using the Functions API. Simply put, Shopify Functions allow developers to modify Shopify’s backend logic. Here are some examples of what you can do with Shopify Functions:
- Creating new discount types for users
- Customize payment – hide or show payment method depending on some parameters (e.g. user’s special tag)
- Rename delivery option offered at checkout
- Create product bundles – combine a couple of products into one single product with a new SKU
- Adjust your fulfilment rules
Developers write features that can be installed by vendors after the implementation is done. Most importantly, this feature provides the flexibility of an open source solution with the reliability, security, and stability of SAAS.
Post-purchase payment extension
Finally, some of the payment extensibility is still in beta; post-purchase extensibility. These can be turned on immediately in the store upon request.
After the payment process is completed, but before the thank you page, the following pages will appear. Here are some ideas for what you can do at this stage:
- Upsell – add more products to your order
- Some survey or feedback requests – users who have already completed their shopping experience are more likely to share additional information
- Offer users a discount code for their next order
- Sign-up for a loyalty program or create a user account
What happens after August 13, 2024?
As mentioned at the beginning of this article – Starting August 14, 2023, Shopify Scripts and Shopify Checkout Liquid will no longer be supported by Shopify. This means that all Shopify Plus merchants who customize shipping, delivery, or checkout pages will need to update to an extended subscription.
How to perform the upgrade to checkout extensibility
This article aims to provide a simple first step to understanding scalability analysis.
Another way is to check the existing checkout.liquid custom configuration and recreate it by checking the extension to resolve all the required functionality. First, evaluate whether you need all the existing changes (even if they will increase your business costs) and then incorporate them into the new processes and tools. You need to do a visual assessment and review the code.
One thing to keep in mind is that you need to check if the functionality you want to use is possible with the new device. It’s a good idea to talk to a partner who has done a lot of modifications. Define your project scope and manage stakeholders. Build and test the new version of Checkout. Remember, you can create a design that can be safely tested in the workplace.
Test it thoroughly and put it into production. Then test again after you go live, checking key metrics (CRO, AOV) to make sure there are no bottlenecks for customers.
The checkout process is an important part of eCommerce and changes at this stage can be risky and frustrating; if you want to take the burden off your shoulders, experienced people like us are here to help.
