New Shopify Checkout Customization Options

New Shopify checkout customization, particularly for Shopify Plus stores, has undergone a significant transformation with the introduction of Checkout Extensibility. Previously, engineers could directly manipulate the checkout.liquid file, allowing for solutions despite fragility and compatibility issues. However, the shift towards Checkout Extensibility, necessitating a more structured approach, brings both challenges and opportunities for customization.

Checkout Extensibility’s Impact on New Shopify Checkout Customization

Previously, customizing a Shopify checkout for Shopify Plus stores had very few limitations. Developers could add code directly to the checkout.liquid file. Although engineers found it useful to hack together solutions using Javascript, this approach created fragile, unoptimized systems. These were highly likely to fail during updates from Shopify or third-party apps.

Shopify’s upgrade to a checkout compatible with Checkout Extensibility involves more limitations. It requires a less direct approach than simply adding code to a single file. However, these limitations are diminishing as the deadline to upgrade is quickly coming up on August 13, 2024. Many third-party apps had to undergo updates to be compatible with Checkout Extensibility. Shopify has also released numerous tutorials on how to migrate custom functionality. 

The ‘hacky’ nature of previous solutions used in checkout.liquid no longer exists to increase compatibility with Checkout Extensibility. This has drastically improved the Shopify ecosystem as a whole. It hopefully leads to positive impacts on the conversion rates of Shopify stores. Consequently, merchants will have to abandon subpar solutions that can negatively affect customer experience.

How to Add Checkout Customizations Moving Forward

You no longer style a checkout through CSS & DOM manipulation in checkout.liquid. Instead, you change the styling of checkout pages through the Checkout Editor. You can also do it by making mutations to the branding API with the GraphiQL app. Styles are not tied to specific pages and are global across all checkout and customer account pages.

To install tracking on checkout and subsequent pages, you no longer need to add a script snippet in checkout.liquid. Nor you need to add it to the Additional Scripts textbox in a store’s settings. Instead, create Custom Pixels through the Customer Events tab in a store’s settings. Add a Custom Pixel for each tracking code you want to include across the entire Shopify store. As once connected, a Custom Pixel will be installed globally on a store. This means you must remove any duplicate tracking installed through an app or directly in the theme code.

To add custom functionality to checkout, you no longer need to add liquid and JavaScript in checkout.liquid. Instead, create checkout extensions through custom extension-only Shopify apps. Shopify provides tutorials for common use cases. Additionally, you can find some great tutorials made by Shopify engineers. They walk you through the entire process and help fill in the gaps left by the official documentation.

How to Improve a Shopify Checkout

Each third-party app or script customization added to a Shopify checkout has the potential to negatively impact the speed and performance of a user’s journey through the checkout experience. As such, it is important to audit the benefit and importance of any third-party apps and Custom Pixels added to a store.

When using complicated third-party apps to accomplish minor changes to functionality that might be covered by one of Shopify’s tutorials for common use cases, it is recommended to try creating a more basic checkout extension instead. Trellis has created their own collection of useful checkout extensions & Shopify functions for Trellis Shopify engineers as they bring their Shopify projects up to date to be compliant with Checkout Extensibility.

Shopify gives the option for a three-page or one-page checkout, which provides the opportunity to test both and see which version resonates more with a store’s customers. Regardless of what option a Shopify store is using, here are a dozen tips to optimize a Shopify checkout.

Lessons Learned While Upgrading Shopify Checkouts

1. Customer account checkout extensions are not available yet for live stores (as of 4/25/24). They can only be installed on development stores.
2. When creating a custom app, if installed on a development store initially, a duplicate new app will need to be created to be installed on a live store.
3. Tracking with Custom Pixels does not make it easy to verify GTM data flowing into Google Analytics due to not being able to use GTM Preview.
4. Cart & checkout validation is not compatible with all non-Dawn 2.0 themes.
5. During development, changes made to a checkout extension’s code are not always reflected in the store unless the checkout block is removed and re-added through the customizer.
6. When adding fields to an extension, organizing fields by group and/or under a descriptive header is not an option.

Conclusion

Despite the hurdles encountered during the upgrade process, the shift towards Checkout Extensibility heralds a new era of robust and standardized checkout customization on Shopify, promising enhanced performance and flexibility for merchants and developers alike. With August quickly approaching, contact Trellis today if your Shopify store has not yet successfully made a checkout upgrade to use Checkout Extensibility!

Contact Trellis to talk about how we can transform your ideas into reality with our web development services.