At Tenten, our mission is to craft unique eCommerce experiences for brands and retailers using Shopify. Over time, we’ve experimented with various front end architectures to meet diverse business needs. We firmly believe in a tailored approach, as no single solution fits all scenarios. Determining the right front end architecture is a crucial step in our website development process.
We’ve broadly categorized our approaches into four distinct types, each with its unique characteristics and applications:
1. Shopify Online Store 2.0 Theme
In June 2021, Shopify unveiled Online Store 2.0, introducing significant enhancements like sections everywhere, theme app extensions, native metafields management, GitHub Integration, and Shopify CLI. This update heralds a truly modular approach, simplifying the creation, reuse, and management of content sections within the Shopify admin.
This model is our go-to for 70-80% of Shopify projects. It’s well-suited for a wide range of eCommerce scenarios, offering brands the full spectrum of Shopify’s native capabilities in a straightforward, efficient manner.
2. Hybrid Approach: Shopify Theme + React
For more complex requirements, we often adopt a hybrid model, integrating parts of the site with React. This approach excels in managing intricate workflows and states, utilizing the React framework’s strengths while still leveraging the Shopify theme for standard eCommerce functionalities. We’ve successfully implemented complex product customizers using React for the front end, interfacing with middleware APIs and integrating seamlessly back into Shopify.
This hybrid model offers flexibility in balancing Liquid and React components. In some cases, we’ve used the Shopify theme as a framework for a React app, serving as a transitional step towards a fully headless architecture.
3. Hydrogen and Oxygen
We’re advocates for headless architecture, given its advantages in speed, SEO, and front end flexibility. Traditionally, building a headless site on Shopify meant freedom in choosing the tech stack, but also complexities in maintenance and integration.
Shopify’s introduction of Hydrogen and Oxygen, a SAAS headless platform, is a game-changer. It aligns with Shopify’s ethos of simplifying eCommerce for brands, handling the intricacies of infrastructure, updates, and most integrations. This approach combines the benefits of headless architecture with a solid foundation for growth, leveraging Shopify’s evolving feature set. However, it still necessitates an external CMS for comprehensive content management.
4. Custom Headless Architecture
Before Hydrogen and Oxygen, custom headless solutions were prevalent for brands adopting headless strategies. While we now lean towards Hydrogen+Oxygen, custom headless remains relevant, especially when Shopify is part of a broader digital ecosystem. For brands with an existing headless setup encompassing their content and core business logic, integrating directly with Shopify’s APIs for e-commerce functionality is often the most strategic route. This method typically requires an external CMS to manage website content.
In summary, at Tenten, we’re committed to exploring and implementing the most suitable front end architecture for each unique Shopify project, ensuring our clients benefit from the best of Shopify’s evolving technologies and trends."