Shopify Integration Approaches for Wellcome Collection
Research Focus: Evaluating different approaches for integrating Shopify with wellcomecollection.org
Summary
This research outlines five approaches for integrating Shopify with the Wellcome Collection website, ranging from simple embedded solutions to fully headless implementations.
Current Technical Context
The Wellcome Collection website is built as a Next.js monorepo with:
React-based frontend (Next.js)
Styled-components for styling
Prismic CMS for content management
Yarn workspaces architecture
Strong emphasis on performance optimisation and accessibility
Initial Requirements
At first the only things to be sold via the shop will be exclusive Wellcome Collection ranges (wellcome collection books, wellcome collection toys, and exhibition ranges). This may change in the future.
Integration Approaches
Option 1: Shopify Buy Button
Description: Embeds Shopify products directly into existing pages using JavaScript widgets.
Implementation:
Add Shopify-generated code snippets to relevant pages
Products display in pop-up or redirect to Shopify checkout
Minimal development effort required
Advantages:
Quick implementation (hours to days)
Low cost
No complex integration required
Shopify handles all checkout and payment processing
Suitable for testing e-commerce viability
Disadvantages:
Limited design customisation
Checkout redirects to Shopify domain breaking brand continuity
Inconsistent user experience
Limited control over customer journey
Not suitable for substantial product catalogues
Best For: Testing e-commerce concept, limited product offerings, content-heavy sites with occasional sales
Sources:
Option 2: Embedded Shopify Storefront
Description: Creates a separate Shopify store accessible via subdomain or integrated section whilst maintaining primary site navigation.
Implementation:
Standard Shopify theme on
shop.wellcomecollection.orgor/shoppathCreate custom Liquid theme to match brand
Link from main site to shop
Advantages:
Full Shopify feature set available
Extensive app ecosystem
Proven reliability for e-commerce operations
Professional checkout experience
Comprehensive analytics and reporting
Easy to hand over management to a different team if needed
There's only one place to search (no confusion around whether you're searching the shop or the main site)
Disadvantages:
Inconsistent user experience between main site and shop (although this is a common pattern in the sector and unlikely to cause significant issues)
Duplicate navigation/header/footer/component maintenance
Users perceive being taken away from main site
SEO considerations for separate domain/path
Theme customisation limited by Liquid templating
Best For: Organisations prioritising speed to market, those without significant development resources, when complete feature parity with Shopify ecosystem is required
There is a skeleton Liquid theme available here showing how products and categories could be grouped and displayed, with a simple cart and checkout flow (video above). We would have to write seperate css to style a theme created in this way, but we should be able to import and use the existing design system for spacing, typography, grid, and colour variables to help ensure consistency at least.
Probably the biggest advantage of this approach is that it would be the easiest to hand over to a different team to manage in the future, as it would be a more standard standalone Shopify implementation and as such wouldn't need to be unpicked from our existing codebase.
Option 3: Headless Commerce with Shopify Storefront API
Description: Uses Shopify as backend commerce engine whilst building custom frontend using Storefront API (GraphQL).
Implementation:
Shopify manages products, inventory, orders, customers
Custom React components in Next.js fetch data via the Storefront API
Checkout can be embedded or redirect to Shopify
Full control over frontend presentation
Technical Architecture:
Key Implementation Details:
GraphQL API with no request-count rate limits
Versioned API updated quarterly
Public and private access tokens via Headless channel
Advantages:
Complete design control and brand consistency
Seamless user experience within existing site
Leverage existing Next.js expertise
Optimised performance (fetch only required data)
Scalable architecture
Aligns with existing strategies (composable, API-first)
Lends itself to iteration
Disadvantages:
Higher development cost
Requires Next.js knowledge
Ongoing maintenance responsibility
Checkout still redirects to Shopify domain
More complex than out-of-box solutions
Potentially complicates site-search and user expectations
Robert put forward a relatively major concern with this approach:
I'm concerned the recommended approach will add a maintenance overhead that won't be sustainable, and might cause issues in the future if we want to resource changes to the shop outside of the experience team. Adding the shop also adds a slew of product concerns that will come with requirements and requests for changes - if we couple these to our development process tightly I think we risk issues with delivery
If we were to go with this approach, we should ensure:
We have full control of product direction
The experience team will be resourced indefinitely to take on the extra maintenance burden of the new product area
We should consider whether it belongs as its own service rather than being built directly into the content app
It is still unknown if we want to allow for user accounts, or always use guest checkout. Maintaining user accounts ourselves would add a significant amount of complexity and if they were required, we might want to consider using Shopify's customer accounts functionality, which might add some friction to the ux but would be a lot easier to implement and maintain than building our own.
Development Approach:
Set up Shopify Headless channel and generate API tokens
Configure environment variables in Next.js
Create GraphQL queries for products, collections, cart
Build React components for product display, cart, checkout(?) flow
Implement state management for cart functionality
Integrate with existing design system/component library
Add analytics and tracking
Best For: Organisations with development resources, those requiring brand consistency, sites with existing sophisticated frontend, when user experience is paramount
Sources:
Option 4: Hydrogen Framework (Shopify's React/Remix Framework)
Description: Shopify's official React-based framework specifically built for headless commerce.
Implementation:
Use Hydrogen as frontend framework instead of custom Next.js integration
Pre-built commerce components and hooks
Oxygen hosting for global deployment (free with Shopify)
Optimised for Shopify's commerce patterns
Advantages:
Accelerated development with pre-built components
Built-in Shopify integrations and best practices
Optimised for performance at global scale
Regular updates from Shopify
Shopify-specific tooling and conventions
Free global hosting with Oxygen
Disadvantages:
Introduces different framework from existing Next.js
Would require site migration or dual-framework approach
Less flexibility for non-commerce features
Smaller community compared to Next.js
Oxygen deployment limitations (one storefront per store, limited logging)
Learning curve for team familiar with Next.js
Not suitable if requiring extensive customisation beyond e-commerce
Best For: New projects, shops with minimal non-commerce content, teams starting fresh without existing frontend constraints
Sources:
Option 5: Shopify Plus with Custom Checkout Extensibility
Description: Shopify Plus plan with extensive checkout customisation using Checkout UI Extensions.
Implementation:
Shopify Plus subscription (£££)
Custom checkout steps using UI Extensions API
Full Shopify feature set with enhanced customisation
Can maintain brand experience through checkout
Technical Details:
Checkout UI Extensions
Custom functionality for product offers, fields, loyalty programmes
Extensions available for information, shipping, payment, order summary steps
Advantages:
Branded checkout experience on Shopify domain
Access to Plus-only features (scripts, automation, wholesale)
Dedicated support
Can customise checkout with UI extensions
Disadvantages:
Significant ongoing cost
May be over-specification for smaller operations
Best For: Large-scale operations, high-volume sales, organisations requiring extensive Shopify app ecosystem, wholesale capabilities
Sources:
Key Decision Criteria
Technical Considerations
How easy is it to back out/hand over?
Option 2 would be relatively easy to hand over, as it is a standalone Shopify implementation
Option 3 would be harder to hand over, as it would be tightly integrated with our existing codebase and would require significant unpicking to hand over to a different team.
Existing Architecture:
Current Next.js implementation/(and expertise) favours headless approach
Styled-components design system can extend to commerce components
TypeScript throughout supports type-safe API integration
User Experience Priorities
Brand Consistency:
Requires cohesive UX/UI
Headless approaches provide seamless integration
Checkout on Shopify domain is probably acceptable – it is a familiar/trustworthy user flow. Fully customising checkout ourselves (including managing credit card information, shipping, and taxes etc.) feels like it would probably be building in a wealth of future pain
Customer Journey:
Content-to-commerce flow should be natural
Integration with existing site navigation and search
Implementation Roadmap for option 3
Phase 1: Foundation
Set up Shopify backend
Configure Headless channel and API access
Create product catalogue structure
Design commerce component architecture
Phase 2: Core Features
Product listing pages
Product detail pages
Shopping cart functionality
Checkout flow (redirect to Shopify)
Basic search and filtering
Phase 3: Enhanced Experience
Content-product associations in Prismic
Advanced search and recommendations
Analytics integration
Phase 4: Optimisation
Performance tuning
A/B testing
User feedback incorporation
Additional features based on usage patterns
Technical Implementation Notes
I haven’t looked much into integration with existing Prismic content beyond knowing that it exists.
I think/presume additional cookies should be added to the functional/required list in order for cart/checkout functionality to work.
I haven't looked at any Shopify-specific analytics/tracking options.
Proof of Concept
The shopify branch of the wc.org monorepo contains a minimal proof of concept implementation of Option 3 (Headless Commerce with Storefront API). It demonstrates fetching products and variants from Shopify and displaying them on a Next.js page, with a cart and checkout flow.
Sources:
Last updated