With Shopify’s shift to Checkout Extensibility comes a whole new suite of tools and functionalities to learn about and leverage to make their store’s checkout page work harder for them.
In this article, we’ll explore the ins and outs of Shopify Checkout UI Extensions, focusing on their capabilities, customization options, and how to manage and utilize them effectively.
What are Shopify Checkout UI Extensions?
Shopify Checkout UI Extensions extend your store’s checkout page functionality by allowing access to additional resources within the checkout system. With Extensions, you can build apps that interact directly with Shopify's checkout service, enabling deeper integration between your storefront and the checkout process.
Checkout UI Extensions allow stores to add what are essentially building blocks above or below key checkout page elements to further customize them beyond what Shopify natively offers. With the shift from checkout.liquid to Checkout Extensibility, Checkout UI Extensions are another feature built to allow a high level of customization while still remaining upgrade-safe.
Available for everyone on plans above Starter as of May 2024, merchants can now also use extensions on the Thank you and Order status pages so they can implement retargeting tactics, use referral links, generate engagement with social group invites, add post-purchase/post-fulfillment surveys or reviews, and add download extensions to fulfill digital products immediately after the customer completes the order.
How Shopify Checkout UI Extensions Work
Checkout UI Extensions are inserted between other elements of Shopify’s default checkout to add custom workflows and functionality to the page. For example, a merchant might want to include a “you might also like” box above the “Contact” section of the checkout to nab some extra sales/upgrades before the customer completes their order. This can be achieved with a UI Extension.
There are two ways for Shopify merchants to access these extensions:
- By downloading pre-made ones from the Shopify App Store.
- By developing their own or hiring a developer/agency to do so.
While many native Shopify checkout elements can’t be modified or reordered, using Extensions is a great way to customize your checkout experience to your store’s and your customer’s unique needs.
While you can’t completely overhaul the entirety of your checkout page, using a combination of Extensions can get you pretty close.
Why Focusing On Checkout Optimization Matters For Ecommerce Stores
Efficient checkouts are extremely important in ensuring a smooth purchasing journey for shoppers. A well-designed, streamlined checkout process has been proven to increase conversions significantly by reducing friction points, encouraging repeat purchases, and improving overall trust between buyers and retailers.
When someone makes it to your store's checkout page, it’s important to use every tactic and tool available to ensure they make it through the finish line and complete their orders. Good CRO through strategically placed Extensions directly correlates with more sales and return customers.
Setting Up And Managing Checkout UI Extensions
Implementing Checkout UI Extensions primarily involves selecting compatible extensions from the Shopify App Store and following each application's installation instructions. Once configured correctly, these additions will appear in the areas of the checkout flow that they were built to extend. Merchants control which extensions remain active at any given time, allowing easy experimentation and fine-tuning to find optimal combinations aligning with their business objectives.
It is worth noting that Shopify is the central "token manager" responsible for securely storing sensitive data such as credit card information, shipping addresses, and other personally identifiable details. Due to this, users benefit from heightened privacy controls while enjoying enhanced functionality by trusted extension developers.
When choosing your Extensions, consider factors such as ease of setup, alignment with brand values, positive reviews from other Shopify users, and tangible improvements in key metrics such as average order value (AOV), abandonment rates, or return visits. Ultimately, striking a balance between feature richness and simplicity ensures a cohesive, enjoyable shopping environment for your customers.
Now, let's look at the primary regions eligible for customization within Shopify's revamped checkout framework.
Areas of Checkout Eligible for Customization with Shopify Checkout UI Extensions
While the list of locations where UI Extension blocks can be inserted into the checkout is quite long, developers must still create Extensions that fit into pre-determined checkout locations, called Extension Targets.
Static targets are tied to core checkout features such as shipping methods, contact info, etc., while block targets can be displayed at any point during checkout. These targets exist in the following checkout locations:
- Information: Extensions can be rendered below the contact form at checkout or on the customer information sections of the “Order status” and “Thank you” pages. If you have received access to the post-purchase checkout extensions, you could consider rendering a timed upsell block on your “Thank you” page. This would also be a great place to create a survey block to ask customers how they found your store or add a block that prevents customers from completing their purchase if they verify their age and are under 18 or 21, depending on your country or what you sell.
- Shipping: Within the shipping section of the checkout, blocks can be rendered before/after the delivery address or shipping option sections, as well as in the headers of these areas. A good use of this space would be adding a custom field below the “Shipping method” section for customers to provide you with specific delivery instructions (if applicable).
-
Payment: Blocks can be inserted below your store’s list of payment options or between the payment heading and payment method list. Add a block that renders icons of all the payment methods you accept to add a visual example of all the cards and payment methods available.
- Order Summary: The Order summary section summarizes the cart’s contents, discounts, and order totals. Elements can be inserted above or below any of these. This would be a great place to render a pre-purchase product offer based on what’s in the customer’s cart or include a banner to alert customers that something in their cart is final sale. You can also render an extension after all line items of the “Thank you” and “Order status” pages.
- Shop Pay: If your store has Shop Pay enabled, you can create/add checkout extensions after the header, before the delivery address, or above/below the shipping method selection box(es).
- Local Pickup: You can render an Extension before your list of eligible pickup locations and after each individual one.
- Pickup Points: Similar to Local Pickup, you can render Extensions before or after your list of pickup points. Consider rendering a map block that displays the locations of all of your available stores here so that users can easily choose the closest location to them.
- One-page Checkout: You can render all the same UI Extensions here as you can with the old, three-page checkout configuration, as all the blocks are the same but appear on one single page.
Developers can implement a wide variety of Shopify Components in their UI Extensions. These include custom banners/fields, buttons, maps, overlays, alerts, media, etc. To view the full list of components, head to Shopify’s Component Library.
Benefits of Using Shopify Checkout UI Extensions for Ecommerce Merchants
Since the deprecation of Shopify’s checkout.liquid file, Shopify has made it easier for merchants to take control of how their stores and checkouts look and behave without requiring a developer to write code for them. While merchants can still create their own custom Extensions, they can also browse the app store to find pre-made ones that they can easily add and set up without much difficulty.
The tradeoff of being slightly more restrictive than what checkout.liquid offered Shopify users lies in how, since where users can add Extensions is determined by Shopify, means that anything they add to their checkout is upgrade-safe and won’t break when Shopify regularly rolls out releases including refinements and new features.
These extensions are also higher-converting, as integrated elements feel natural and intuitive since they blend harmoniously with Shopify’s native checkout page's existing design language. Similarly, since they’re made to work alongside Shop Pay, merchants can further benefit from the increased conversion rates gained from using this already-accelerated checkout method.
How to Get Custom Checkout UI Extensions on Shopify
Even though there are many great Extensions available in the app store for download, stores may occasionally need a custom solution. Why spend time trying to make something that wasn’t made for you work for you when you can build something custom instead?
Since many small-to-medium-sized businesses likely don’t have a dedicated developer on staff, your best bet for getting the most out of Shopify’s Custom Checkout UI Extensions is to leverage a Shopify Plus Partner agency to take on your project and build you something truly unique and custom.
At Blue Badger, we have the experience and know-how to turn your idea into something that’ll set you apart from any other Shopify store in your niche so that you can better serve your customers and increase your conversion rates.
Conclusion
With endless customization possibilities, Shopify merchants can improve the overall user experience, drive growth, and enjoy the increased sales that come with the proper implementation of Checkout UI Extensions. Don’t miss out on this opportunity to strengthen your brand, connect with your audience, and grow your business with yet another exciting feature from Shopify.
As a certified Shopify Plus Partner agency, we at Blue Badger have the experience and expertise needed to make your checkout page work harder for you. Whether you need help selecting Checkout UI Extensions or want to build a custom app or theme, we can ensure that your store’s checkout experience is both beautiful and functional. Get in touch with us today to learn more.
