Faster Time-to-Market
Pre-built components and patterns get you from concept to launch faster. Focus on business logic, not boilerplate.
Open Source Composable Storefront
Orchestrate your
headless
commerce stack.
SHOPin is a production-ready monorepo that brings your commerce, CMS, search, and payments into harmony. One BFF, one frontend, full control of the code.
- Open source on GitHub
- OSL-3.0 license
- Community driven
Architecture
Four layers,
one composition.
SHOPin separates visual design, rendering, orchestration, and contracts into distinct layers. Swap backends, update your UI, or change rendering strategies—each layer works independently, keeping changes manageable and predictable.
01
Design
Tokens, primitives, and a coherent visual system that your team owns end-to-end.
tokens · primitives
02
Render
Next.js App Router with SSR, ISR, and streaming configured for real-world traffic.
next.js · react
03
Orchestrate
A single Backend-for-Frontend unifies commerce, CMS, search, and payments behind one schema.
bff · graphql
04
Contracts
Zod schemas validate at runtime; TypeScript catches breakage at build. One source of truth.
zod · typescript
Built for AI-driven development
Your codebase,
agent-ready.
SHOPin ships project-specific agent skills that encode its paths, conventions and quality checks — so your AI pair adds components, BFF modules and whole features the way this codebase expects.
zsh — shopin
npx skills add creativestyle/shopin-ai-toolsshopin-add-componentUI component · story · test · i18nshopin-add-bff-modulenew API endpoint through the BFFshopin-add-integrationexternal data source behind the BFFshopin-add-featurefull-stack feature, end to end4 skills installed · works with Claude Code, Codex, Cursor, Copilot & +70 agents
Proven quality
Fast by default.
Accessible by design.
Every SHOPin storefront is audited with the same public tools you'd use to check it — so the numbers aren't a claim, they're a link away.
Integrations
One BFF, many data sources.
The Backend for Frontend orchestrates CMS, commerce, search, and payments into unified API responses. Swap providers without touching your presentation code.
Hover over page elements, BFF, or APIs to see how the connections react.
Demo
See SHOPin in action.
From product listing to checkout—a complete ecommerce experience.
Benefits
Headless complexity,
solved.
Building composable ecommerce shouldn't require a MACH PhD. SHOPin handles the hard parts.
Unified Data Orchestration
The BFF aggregates CMS, commerce, search, and payments into single API responses. No frontend data juggling.
Swap Backends Freely
Change your commerce platform or CMS without touching presentation code. Contracts keep layers independent.
Type-Safe Contracts
Zod schemas validate at runtime, TypeScript catches issues at build time. One source of truth for your API.
Production-Ready Patterns
SSR, caching, error handling, and logging configured out of the box. Infrastructure concerns handled.
Own Your Code
Source code delivery, not a closed platform. No vendor lock-in, no forced updates. Your roadmap, your rules.
Documentation
Everything you need
to build.
Clear guides, comprehensive references, and practical examples.
Open Source
Maintained by
creativestyle.
SHOPin is developed and maintained by creativestyle, a European e-commerce agency with over 20 years of experience building digital commerce solutions for enterprise clients.
We built SHOPin to solve the challenges we encountered building headless storefronts for enterprise clients. Instead of keeping it proprietary, we decided to share it with the community.
We use SHOPin in production for our own projects, which means it stays actively maintained, battle-tested, and continuously improved based on real-world requirements.
FAQ
Frequently asked.
Everything you need to know about SHOPin.
What is SHOPin?
SHOPin is an open source composable storefront accelerator. It's a production-ready monorepo that orchestrates your headless commerce stack—connecting commerce platforms, CMS, search, and payments through a unified BFF (Backend for Frontend) into a Next.js storefront.
Is SHOPin free to use?
Yes, SHOPin is completely open source under the OSL-3.0 license. You get full access to the source code to use, study, and modify it, with copyleft-style obligations when you distribute modified versions.
How do I get started with SHOPin?
Clone the repository, run the setup, and you're ready to develop. The documentation includes step-by-step guides for connecting your commerce backend (like Commercetools) and customizing the storefront.
What technologies does SHOPin use?
The frontend uses Next.js with React and TypeScript. The BFF runs on NestJS. Contracts are defined with Zod for runtime validation. The monorepo is managed with TurboRepo, and styling uses Tailwind CSS.
Can I customize SHOPin for my needs?
That's the point. You own the code. Customize the UI, add integrations, modify the BFF logic, or swap entire layers. SHOPin provides the architecture and patterns—you compose them into your solution.
Does SHOPin work with any backend?
Yes, SHOPin is backend-agnostic. The BFF layer abstracts your data sources, so you can connect Commercetools, Shopify, or any commerce platform as long as it exposes an API. You implement an integration that maps that platform's API responses and commands into SHOPin's shared contracts, so the frontend stay unchanged while you swap providers.
What kind of support is available?
Community support via GitHub discussions and issues. For enterprise projects, creativestyle offers professional implementation and support services.
How does SHOPin ensure performance?
Performance is built into the architecture: Next.js SSR, optimized caching in the BFF, lazy loading, and Core Web Vitals best practices. Thanks to the clear separation between frontend, BFF, and integrations, you can tune each layer independently—caching, SSR strategies, and API behavior—while keeping the codebase maintainable and readable.
Get in touch
Ready to compose
your frontend?
Let us show you how SHOPin accelerates your headless ecommerce project.