As Shopify continues to evolve its platform, keeping up with API changes is crucial for maintaining a healthy e-commerce application. In this post, I'll share our recent experience migrating a fashion brand storefront from Shopify's deprecated Checkout API to their newer Cart API using the Hydrogen framework.
Background: Our Headless Setup
Our application was built as a headless Shopify store using Next.js, allowing us to bypass Shopify's traditional Liquid templating system in favour of a more customised approach. We directly integrated with Shopify's GraphQL APIs to handle various e-commerce functionalities, including the checkout process.
The Challenge: Deprecated Checkout API
We encountered several issues with our original implementation:
- Unconventional Cart Handling: We were creating checkout instances rather than carts during the browsing phase which we were keeping in a redux store, this went against Shopify's intended workflow.
- Authentication Complexities: Our setup required a middleware application, using Shopify’s multipass, for customer authentication during checkout. This introduces additional risk and cost us extra time in maintenance.
- API Deprecation: Most critically, the Checkout API we were using was scheduled for deprecation, and a hard shut-off date forced us to find an alternative solution or risk users not being able to purchase products.
Enter Hydrogen: Shopify's Official Headless Framework
Shopify's hydrogen-react package was an easy choice of replacement for our migration. Hydrogen is a purpose-built framework for creating headless Shopify applications, offering several advantages:
- Simplified Integration: Direct integration with Shopify's services reduces setup complexity.
- React Components: The
@shopify/hydrogen-reactpackage provides ready-to-use components and hooks. - Built-in Authentication: Handles cart management and authentication out of the box.
- Reduced Codebase: Allowed us to remove bulky custom implementations.
The Migration Process
Our migration involved two main phases:
- Removal of Legacy Code:
- Stripped out custom checkout implementation
- Removed custom state handling
- Eliminated middleware authentication layer
- Integration of Hydrogen:
- Implemented the useCart Hydrogen React hook
- Integrated new cart management system
- Set up integrated authentication flow
The end result was a significantly streamlined codebase that properly follows Shopify's intended cart-to-checkout workflow.
Looking Forward: Hydrogen vs. Liquid
For those considering a new Shopify implementation, Hydrogen presents a compelling option. It offers:
- Full customisation capabilities
- Official Shopify support
- Simplified development experience
- Integration with Oxygen (Shopify's hosting platform)
However, it's worth noting that some businesses might still prefer Liquid templating for simpler use cases or when deep customisation isn't required.
Conclusion
While our migration was driven by API deprecation, the move to Hydrogen has proven beneficial beyond just maintaining API compatibility. The framework's official support from Shopify, combined with its modern development experience, makes it a strong choice for new Shopify projects requiring headless architecture.
Remember: When building on any platform, staying current with official APIs and frameworks can save significant development effort in the long run.
