Preparing Your Business for Success: The Ultimate Guide to Shopify Checkout Extensibility

What is checkout extensibility in Shopify?

Checkout extensibility is a feature for Shopify Plus sellers that allows them to personalize their checkout process in a way that's easy, safe to update, helps increase sales, and works seamlessly with Shop Pay.

It includes a set of powerful tools that let sellers customize their checkout without needing to write code, as well as tools for developers to create more advanced customizations using apps.

Platform features that let sellers customize their checkout without code include:

1. Checkout editor: A simple tool where sellers can change how their checkout looks by adjusting colors, fonts, logos, and adding new features with apps.
2. Shopify pixels manager: A new part of the Shopify admin where sellers can securely add and manage tracking pixels that monitor customer actions.
3. Checkout apps from the Shopify App Store: A selection of apps sellers can install to add features to their checkout, made using Shopify's own tools.
   

Developer tools for making more advanced customizations include:

• Checkout UI extensions
• Web pixel app extension
• Branding API
• Shopify Functions
• Post-purchase extensions
  

Checkout extensibility replaces the need for checkout.liquid, the old way of customizing checkouts. Sellers who currently use checkout.liquid need to switch to checkout extensibility. This means they'll need to recreate any customizations they made with checkout.liquid using the new platform features and developer tools mentioned above.

How long will checkout.liquid be supported?

• From August 13, 2024, it won't work on the Information, Shipping, and Payment pages.
• Then, from August 28, 2025, it won't work on the Thank you and Order status pages, including any apps that use script tags and extra scripts.
  

Is checkout.liquid no longer supported because of its issues with Google Tag Manager?

Not per se, but they want to make the checkout process safer, faster, and easier to customize. So the reasons that make sense are:

Consistency Across Stores: Shopify wants to provide a consistent user experience across all its stores. By controlling the checkout code, they ensure that customers have a similar experience wherever they shop on Shopify. This consistency helps build trust and familiarity with the platform.

Compliance with Regulations: Handling sensitive customer information, such as payment details, requires adherence to various regulations like PCI DSS and GDPR. Shopify can ensure that all stores comply with these standards by controlling the checkout code, without individual merchants needing to worry about it.

Performance Improvements: Shopify has been focusing on optimizing the checkout experience for speed and performance. By controlling the core checkout code, they can implement changes more quickly, ensuring that all merchants benefit from these enhancements.

Security Enhancements: Shopify restricts access to the checkout code to better ensure the security of the checkout process. Allowing merchants and third parties to modify checkout.liquid could pose security risks, as demonstrated by a global outage caused by an issue with Google Tag Manager in 2022.

These reasons collectively support Shopify's move towards a more secure, scalable, and customizable checkout experience, ultimately benefiting both merchants and shoppers.

Is Checkout Extensibility compatible with checkout.liquid?

No. Checkout Extensibility cannot work with checkout.liquid, extra scripts, or apps that use script tags. To use Checkout Extensibility, you need to eliminate or substitute your customizations in checkout.liquid, the thank you page, and the order page.

Will Checkout Extensibility change how we customize Checkout, Thank you and Order Status pages on Shopify?

Yes, Checkout Extensibility will change how merchants customize the Checkout, Thank You, and Order Status pages on Shopify.

With Checkout Extensibility, the traditional method of customization using checkout.liquid, additional scripts, or apps using script tags will no longer be compatible.

Instead, merchants will need to utilize the features and tools provided by Checkout Extensibility to make customizations.

This may involve using the checkout editor, Shopify pixels manager, and other developer tools to achieve the desired customization without relying on checkout.liquid.

Will I have to upgrade to Shopify Plus if I want to use Checkout Extensibility?

Currently, Checkout Extensibility is primarily available for Shopify Plus merchants. However, non-Shopify Plus users can still experiment with basic checkout customization and post-purchase page modifications. There's an option to test these features in developer mode by creating a new development store in your partner’s account.

While this provides access to some extent, full access to Checkout Extensibility features is limited to Shopify Plus merchants. So, if you want complete access to Checkout Extensibility, upgrading to Shopify Plus might be necessary.

How to activate Checkout Extensibility for Shopify Plus?

If you want to activate Checkout Extensibility for Shopify Plus, check out the following steps:

1. Access Your Shopify Admin: Log in to your Shopify admin panel.
2. Navigate to Checkout Settings: Once logged in, find and click on "Settings" in the admin panel. From there, go to the "Checkout" section.
3. Create a Draft Checkout: In the "Checkout" section, locate your existing checkouts and duplicate one to create a new draft checkout. This allows you to experiment without affecting your live site.
4. Customize Your Checkout: In the draft checkout, you can add apps and adjust branding to match your business identity. This is where you can use the powerful tools provided by Checkout Extensibility.
5. Optional - Set Up Pixels and Functions: Depending on your needs, you can set up Web Pixels or additional Functions to enhance your checkout experience.
6. Review Your Changes: Before making your new checkout live, carefully review your customizations to ensure everything looks and functions as intended.
7. Publish Your New Checkout: Once satisfied with your changes, click "Publish" to make your enhanced checkout experience live.
8. Confirm the Change: A pop-up window will appear, confirming that you want to replace your live checkout with the new setup. Click "Publish" to confirm this change.
   

Do I need a Shopify Partner account to activate Checkout Extensibility?

Yes, both Shopify Plus merchants and non-Shopify Plus users need to have a Shopify Partner account to activate Checkout Extensibility. Whether you're a Shopify Plus merchant or not, having a partner's account is essential to access and utilize the new Checkout Extensibility tools.

What can we expect from a new checkout experience?

From the new checkout experience, you can expect several enhancements and features designed to improve customization, branding, and functionality:

• Checkout Branding: Customize the checkout experience by adding your logo, adjusting colors, and changing fonts to align with your brand identity.
  
• Checkout Extensions: Insert components at defined points in the checkout flow to add new functionality or features, such as contact forms, FAQs, trust badges, and upsell modules.
  
• Enhanced Analytics: Improve checkout analytics with the ability to track customer events more effectively along the user journey, such as add to cart, checkout begin, add payment info, and purchase events.
  
• Shopify Functions: Utilize tools to control how Shopify handles various aspects of the checkout process, such as discounts, fulfillment, or payments, providing more flexibility and customization options.
  
• Streamlined Layout: Introduce a new, one-page checkout layout for a faster, higher-converting, and more intuitive checkout experience, inspired by Shop Pay's proven conversion rates.
  

What Checkout Branding tools can we expect

The Checkout Branding tools we can expect are:

• Logo placement customization
• Background color customization
• Font customization
• Checkout form customization
• Order summary customization
  

What happens if I don’t upgrade to Shopify Plus?

If you don't upgrade to Shopify Plus, you won't have access to the full range of features offered by Checkout Extensibility. But, non-Shopify Plus users can still engage in basic checkout customization and post-purchase page modifications.

As we explained, you have the option to test these features in developer mode by creating a new development store in your partner's account.

How to prepare for the Checkout Extensibility setting

Preparing for setting up Checkout Extensibility on your Shopify store involves several steps to ensure a smooth transition and optimal customization experience. Here's a guide to help you prepare:

1. Review Your Current Checkout Customizations: Take stock of any existing customizations you have on your checkout pages. This includes changes made to the checkout.liquid file, additional scripts, or apps using script tags. Make note of the specific customizations you want to replicate or enhance with Checkout Extensibility.
   
2. Assess Compatibility: Understand that Checkout Extensibility is not compatible with checkout.liquid, additional scripts, or apps using script tags. You'll need to remove or replace these customizations to use Checkout Extensibility effectively. Check for any incompatible features or customizations in your current setup.
   
3. Evaluate Your Needs: Determine your objectives for customizing the checkout experience. Identify the specific branding elements, functionality, and user experience enhancements you want to implement using Checkout Extensibility. Consider how these changes align with your overall business goals and customer preferences.
   
4. Gather Branding Assets: Collect any branding assets you plan to incorporate into your checkout pages. This includes logos, color schemes, fonts, and other visual elements that reflect your brand identity. Having these assets ready will streamline the customization process.
   
5. Explore Checkout Extensibility Features: Familiarize yourself with the features and capabilities offered by Checkout Extensibility. This includes Checkout Branding tools, Checkout Extensions, Shopify Pixels, and other customization options available to Shopify Plus merchants. Understand how these tools can be leveraged to meet your customization requirements.
   
6. Backup Your Current Checkout Customizations: Before making any changes, backup your current checkout customizations, including the checkout.liquid file and any associated scripts or apps. This ensures that you have a fallback option in case you encounter any issues during the transition to Checkout Extensibility.
   
7. Educate Your Team: If you have a team involved in managing your Shopify store, ensure they are aware of the upcoming changes and trained on using Checkout Extensibility. Provide resources, tutorials, or training sessions to familiarize them with the new customization tools and workflows.
   
8. Plan for Testing: Set aside time for thorough testing of your new checkout setup before making it live. Test different scenarios, devices, and user journeys to identify any issues or areas for improvement. Address any bugs or usability concerns before launching the updated checkout experience.
   

Where to find the csv file with existing customizations to my checkout? (before i install the Checkout Extensibility)

To find the CSV file with existing customizations to your checkout before installing Checkout Extensibility, follow these steps:

1. Log in to your Shopify admin account.
2. Navigate to the "Settings" section. You can usually find this option in the sidebar menu
3. Within the "Settings" menu, locate and click on "Checkout.
4. Scroll down to the "Checkout customization" section. Here, you should see an option related to upgrading to Checkout Extensibility or migrating your checkout customizations.
5. Look for a link or button that allows you to view or export a report of your existing checkout customizations. This link may be labeled as "View personalized report" or "Export CSV."
6. Click on the provided link or button to generate the CSV report.
   

Once the report is generated, you can download it to your computer. The CSV file will contain details about your current checkout customizations, including categories, descriptions, source files, and code lines.

How to review existing checkout customizations?

To review existing checkout customizations in your Shopify store, follow these steps:

1. Log in to your Shopify admin account.
2. Navigate to the "Settings" section. You can usually find this option in the sidebar menu.
3. Within the "Settings" menu, locate and click on "Checkout.
4. Scroll down to the "Checkout customization" section. Here, you should see options related to upgrading to Checkout Extensibility or migrating your checkout customizations.
5. Look for a link or button that allows you to view details or a report of your existing checkout customizations. This link may be labeled as "View personalized report" or "Review existing customizations."
6. Click on the provided link or button to access the report or details of your current checkout customizations.
7. Review the information presented in the report or details. This may include categories of customizations, descriptions, source files, and code lines.
8. Take note of any customizations that you may need to replicate or adjust when transitioning to Checkout Extensibility.
   

How to review Thank you and Order status page customizations?

To review Thank you and Order status page customizations in your Shopify store, follow these steps:

1. Log in to your Shopify admin account.
2. Navigate to the "Settings" section. You can usually find this option in the sidebar menu
3. Within the "Settings" menu, click on "Apps."
4. Review the list of installed apps. Look for any apps that customize the Thank you and Order status pages.
5. Click on the settings or configuration options for each relevant app to review the customization options available for the Thank you and Order status pages.
6. Take note of any specific customizations made through these apps, such as branding elements, additional information displayed, or integrations with third-party services.

If necessary, reach out to the app developers or support teams for further assistance or clarification on the customizations.

Ensure that you have documented all customizations made to the Thank you and Order status pages, as you may need to replicate or adjust them when transitioning to Checkout Extensibility.

How to create and publish new checkout customizations?

To create and publish new checkout customizations in your Shopify store, follow these steps:

1. Log in to your Shopify admin account.
2. Navigate to the "Settings" section. You can usually find this option in the sidebar menu.
3. Within the "Settings" menu, click on "Checkout."
4. In the "Checkout customization" section, click on "Create draft checkout."
5. Customize your checkout by adding apps or editing your branding. You can adjust elements like logo position, background color, or fonts to align with your brand identity.
6. Review your changes to ensure that everything looks and functions as intended.
7. Once you're satisfied with your customizations, click on "Publish" to make your enhanced checkout experience live.
8. Confirm the change by clicking "Publish" in the pop-up window.
   

Are Shopify Scripts being replaced by Shopify Functions?

Yes, Shopify Scripts are gradually being replaced by Shopify Functions. Shopify Functions are a new addition to the Shopify ecosystem that provides merchants with more control over how Shopify handles various aspects of their store, such as discounts, fulfillment, or payments.

These functions offer greater flexibility and customization options compared to Shopify Scripts. While Shopify Scripts are supported until a certain date, Shopify is encouraging merchants to transition to Shopify Functions for more advanced and flexible functionality.

What benefits come with the Shopify Functions?

1. Enhanced Control: Shopify Functions provide merchants with greater control over various aspects of their store's operations, such as discounts, fulfillment, and payments. This increased control allows merchants to tailor their store's functionality to better suit their specific needs and preferences.
   
2. Flexibility: With Shopify Functions, merchants have the flexibility to customize and adapt their store's functionality as needed. They can create custom logic and rules to handle complex business scenarios, such as unique discount structures or specialized fulfillment processes.
   
3. Scalability: Shopify Functions are designed to scale with the growth of a merchant's business. Whether a store is just starting out or experiencing rapid expansion, Shopify Functions can accommodate increased traffic, sales volume, and complexity without sacrificing performance.
   
4. Integration: Shopify Functions seamlessly integrate with other Shopify features and services, as well as third-party apps and tools. This allows merchants to leverage a wide range of resources to enhance their store's functionality and performance.
   
5. Future-Proofing: By transitioning to Shopify Functions, merchants can future-proof their store's operations and ensure compatibility with upcoming updates and enhancements to the Shopify platform. This helps protect their investment in their store and ensures continued support and functionality in the long term.
   

Do I still need additional checkout apps after setting the Checkout Extensibility?

After setting up Checkout Extensibility on your Shopify store, the need for additional checkout apps may vary depending on your specific requirements and preferences. Here are some factors to consider:

• Feature Coverage: Evaluate whether the Checkout Extensibility tools provide all the features and functionality you need for your checkout process. If there are specific features or customizations that are not available through Checkout Extensibility, you may still require additional apps to fulfill those requirements.
  
• Customization Depth: Consider the level of customization and control you require over your checkout process. While Checkout Extensibility offers robust customization options, there may be specialized apps that provide more granular control or niche features tailored to your business needs.
  
• Integration Requirements: Assess whether your store requires integration with third-party services or systems that are not directly supported by Checkout Extensibility. If you rely on specific integrations for order processing, shipping, or payment gateways, you may need additional apps to facilitate those connections.
  
• Conversion Optimization: If you are focused on optimizing your checkout flow for conversions and reducing cart abandonment, you may benefit from specialized apps or tools designed specifically for conversion rate optimization (CRO). These apps may offer advanced features such as exit-intent pop-ups, abandoned cart recovery, or social proof notifications.
  
• Shopify App Ecosystem: Explore the Shopify App Store to discover apps that complement Checkout Extensibility and address any specific requirements or enhancements you have for your checkout process. Look for apps with positive reviews, reliable support, and a track record of success in similar use cases.
  

Ultimately, the decision to use additional checkout apps alongside Checkout Extensibility will depend on your unique business needs, budget considerations, and desired level of customization and functionality for your Shopify store's checkout experience.

What pre-purchase and post-purchase extensions are available with Checkout Extensibility?

Pre purchase guide

Post purchase guide

What happens if I need to go back to using checkout.liquid?

How to revert to checkout.liquid:

1. From Settings > Checkout, in the Upgrade Status section, click the revert link.
2. Select the pages that you want to revert, and then click revert.
   

Reverting from Checkout Extensibility back to using checkout.liquid should be approached with caution due to several factors:

1. Loss of Upgrade-Safe Features: Checkout Extensibility offers more secure and efficient checkout customizations compared to checkout.liquid, which may result in losing access to advanced capabilities.
2. Future Compatibility Concerns: Shopify is likely to focus on enhancing Checkout Extensibility in the long term, potentially phasing out support for checkout.liquid. Reverting may lead to missing out on future updates and improvements.
3. Increased Development Effort: Recreating customizations made using Checkout Extensibility with checkout.liquid may require more development effort and ongoing maintenance.
4. Risk of Compatibility Issues: As Shopify evolves its platform, checkout.liquid customizations may become less compatible with newer features and technologies, while Checkout Extensibility ensures better compatibility.
5. Limited Support and Resources: Shopify Plus Support and the broader Shopify community may prioritize assistance and resources for Checkout Extensibility, potentially limiting support for reverting to checkout.liquid.

While reverting to checkout.liquid may seem like a quick solution, it may not be a wise long-term strategy considering the benefits and future direction of Checkout Extensibility.

What features stay incompatible with checkout.liquid?

• Checkout UI Extensions
• Web Pixels
• B2B
• Shop Cash
• Try-before-you-buy
• Preorders
• Shopify Functions
• Product bundles
• One-page checkout
• Local currency order editing

What are the overall benefits of Checkout Extensibility?

• Advanced customization options for checkout pages.
• Upgrade-safe customizations that persist through platform updates.
• Improved checkout performance for faster transactions.
• Seamless integration with existing Shopify features and apps.
• Future-proofing checkout experiences with ongoing enhancements.
• Developer-friendly tools and APIs for efficient customization.
• Enhanced branding opportunities to align with brand identity.
• Streamlined checkout process to reduce cart abandonment.
• Greater flexibility in implementing payment and shipping methods.
• Improved user experience leading to higher conversion rates.

What are the flaws of Checkout Extensibility

While Checkout Extensibility offers numerous benefits, there are some potential drawbacks to consider:

• Learning Curve: Mastering the new tools and APIs may require time and resources, especially for merchants unfamiliar with coding or development.
  
• Dependency on Shopify Plus: Full access to Checkout Extensibility is limited to Shopify Plus merchants, excluding smaller businesses on lower-tier plans.
  
• Migration Challenges: Transitioning from checkout.liquid customizations to Checkout Extensibility may involve complexity and potential data loss if not executed properly.
  
• Compatibility Issues: Existing apps or customizations built for checkout.liquid may not seamlessly integrate with Checkout Extensibility, requiring additional development or adjustment.
  
• Limited Documentation: Since Checkout Extensibility is a relatively new feature, comprehensive documentation and community support may be lacking compared to more established tools.
  
• Cost Considerations: While Shopify Plus offers robust features, it comes with a higher price tag, which may not be feasible for all businesses.
  
• Reliance on Third-party Apps: Some advanced customizations may require the use of third-party apps, adding complexity and potential costs to the setup.
  
• Risk of Over-customization: Overly complex customizations can lead to performance issues, user confusion, and increased maintenance overhead.
  
• Dependency on Shopify's Roadmap: Shopify's future development plans may influence the availability and evolution of Checkout Extensibility features, potentially impacting merchants' long-term strategies.
  
• Limited Control for Non-technical Users: Merchants without coding skills or access to developers may find it challenging to leverage the full capabilities of Checkout Extensibility, limiting their ability to customize the checkout experience.

Some of the most important flaws we need to mention are:

1. No ways to extend your checkout with custom designed React components

The inability to extend the checkout with custom-designed React components could be considered a limitation or flaw of Checkout Extensibility for merchants who are accustomed to working with React or prefer its flexibility for frontend development.

This restriction may limit the extent of visual customization that can be achieved, particularly for merchants who have specific design requirements or preferences for React-based components.

2. No way to add custom CSS

With Checkout Extensibility, there is no direct way to add custom CSS to the checkout pages. Instead, basic visual changes can be made through the settings panel, allowing adjustments to elements like logo position, background color, or fonts.

For more extensive customization, merchants are encouraged to explore styling possibilities using the Branding API, which provides a structured approach to styling changes within the Checkout Extensibility framework.

3. No options to add custom HTML elements

With Checkout Extensibility, adding custom HTML elements directly to the checkout pages is not allowed. However, you can achieve most customizations using preset components available in the Checkout UI Extensions library.

These components offer a variety of options to execute different ideas without the need for custom HTML elements. If specific customizations are required beyond the capabilities of the preset components, consulting with a developer to discuss alternative options is recommended.

4. No way to remove, hide or modify default elements.

No, with Checkout Extensibility, you generally cannot remove, hide, or modify default elements directly. However, you can customize the appearance and behavior of the checkout pages using the available tools and features, such as the Branding API and Checkout UI Extensions. These tools allow you to create customizations within the framework provided by Shopify, but direct manipulation of default elements may not be possible.

Wrap up

What are the differences between the Traditional Way to Customize Shopify Checkout and Latest Way to Customize Shopify Checkout?

The differences between the traditional way and the latest way to customize Shopify Checkout are significant and primarily revolve around accessibility, flexibility, and ease of customization:

• Accessibility:

Traditional Way: Access to checkout customization was primarily limited to Shopify Plus merchants who could directly edit the checkout.liquid theme file.

Latest Way: Checkout Extensibility opens up customization options to a broader audience, allowing Shopify Plus brands to customize their checkout experience through apps and branding tools.

• Flexibility:

Traditional Way: Customizations were typically achieved through direct coding in the checkout.liquid file, requiring developer expertise and often resulting in time-consuming and expensive processes.

Latest Way: Checkout Extensibility offers a more flexible and upgrade-safe approach, allowing merchants to customize their checkout experience using robust apps and APIs without extensive coding knowledge.

• Methodology:

Traditional Way: Customizations were made directly to the checkout.liquid theme file, with limited options for app integration or code-free customization.

Latest Way: Checkout Extensibility integrates with Shopify Scripts, enabling merchants to create custom rules for the checkout process and utilize a variety of apps and tools to enhance the checkout experience.

• Ease of Use:

Traditional Way: Customizing checkout through direct coding was complex and required developer intervention, leading to potential errors and compatibility issues.

Latest Way: Checkout Extensibility provides a user-friendly interface for merchants to customize checkout elements, offering drag-and-drop functionality and visual editing tools for seamless customization.

• Compatibility and Upgradability:

Traditional Way: Direct code customizations were often not upgrade-safe, leading to potential conflicts with future updates and requiring manual adjustments.

Latest Way: Checkout Extensibility offers upgrade-safe customization options, ensuring compatibility with future updates and allowing merchants to easily adapt to changes in the Shopify platform.

How to proactively prepare for the new checkout if you are a Shopify Plus Merchants?

Evaluate Current Customizations:

• Review modifications made to the existing checkout.liquid solution.
• Consider how these changes can be replicated using the new checkout approach.

Assess Relevance and Impact:

• Evaluate the significance of previous customizations to the business.
• Assess both visual aspects and underlying functionalities for their importance.

Define Work Scope:

• Clearly outline tasks required to adapt to the changes in the checkout process.
• Identify specific customizations and adjustments needed for a smooth transition.

Utilize Shopify Plus Benefits:

• Leverage Shopify Plus features, such as creating a test version of the new checkout.
• Take advantage of tools and resources available to Shopify Plus merchants.

Prepare for Implementation:

• Ensure readiness before implementing the new checkout solution.
• Monitor closely during the transition phase to address any issues promptly.

Anticipate Differences:

• Understand that not all previous checkout.liquid modifications may translate directly.
• Seek guidance from experienced partners to navigate challenges effectively.

Despite challenges in transitioning from traditional methods, the benefits of checkout extensibility, such as upgrade-safe customizations and enhanced flexibility, make it a valuable investment.

Codersy, with its team of Shopify Certified developers and specialists, offers expert guidance, custom development solutions, seamless implementation, and ongoing support to help businesses leverage checkout extensibility effectively and optimize their eCommerce operations.

With Codersy's expertise and support, businesses can maximize the benefits of Shopify's checkout extensibility, enhance their checkout experience, and drive growth in their eCommerce ventures.