Ojos is a Jamstack e-commerce shop template built with Next.js and React that uses Sanity CMS and Shopify as a headless commerce backend for selling handmade, one-of-a-kind items.
What is Ojos?
Ojos is an open-source eCommerce project built for a small Toronto-based business that sells handmade pieces made from deadstock materials. The template runs on Next.js with server-side rendering, uses Bootstrap for styling, and connects to Sanity.io as a content management system and Shopify via the JS Buy SDK for checkout. The live demo is hosted at ojos.vercel.app, and the project is currently noted by its author as a personal test project rather than an actively used storefront.
Key Features
- Sanity + Shopify content management — The store owner can update product listings and content from the Sanity and Shopify admin dashboards, allowing independent management and room to scale without code changes.
- Category-based browsing — Customers can view products filtered by categories, add them to a cart, and check out through Shopify.
- Local storage cart — The cart state is stored in the browser's local storage, preserving the user's selections across sessions.
- Next.js server-side rendering — SSR and built-in API routes improve page load times and SEO.
- Bootstrap styling — The UI is built with the Bootstrap CSS framework.
- Mailchimp newsletter — Visitors can subscribe to a newsletter via Mailchimp integration.
- EmailJS contact forms — Contact and custom order forms are handled through EmailJS.
- Figma design files — Wireframes and interactive prototypes are available in a linked Figma file.
Who is it for?
Ojos suits small handmade-goods businesses that want a low-code storefront with CMS-driven content, developers looking for a reference implementation combining Next.js, Sanity, and Shopify, and designers who want e-commerce wireframes to build from.
What can you do with Ojos?
- Handmade goods sellers: Run a storefront where products and site content are managed through Sanity and Shopify dashboards, giving you flexibility to add inventory without touching code.
- Developers exploring headless commerce: Study a working example of the Shopify JS Buy SDK used alongside Next.js API routes and React Context for state sharing across components.
- Designers: Use the linked Figma wireframes and prototypes to iterate on e-commerce flows like product browsing and checkout.
How does Ojos work?
Ojos pulls product data from Sanity CMS and Shopify, renders it through server-side rendered Next.js pages, and lets customers add items to a local-storage cart before sending them to Shopify checkout. The owner updates products and content through the Sanity and Shopify admin interfaces rather than editing code.
Pros and cons
- Pros: Content and product management live in Sanity/Shopify dashboards; cart persistence via local storage; SSR gives SEO benefits; the project is open source on GitHub.
- Cons: The author notes it is a personal test project, not in active production use; there is no duplicate-item detection in the cart (each product has a quantity of one), no visual cart count indicator (only a toast on add), and the Policy and About pages currently contain hardcoded content rather than CMS-managed content.
FAQ
Is Ojos ready for production?
The author labels this a personal test project, and planned improvements — such as syncing Sanity and Shopify via webhooks, preventing duplicate cart items, and moving hardcoded content into Sanity — remain in the Next Steps list.
How does inventory sync work between Sanity and Shopify?
Product data is currently pulled from both Sanity and Shopify, but there is no automatic webhook sync set up; the author lists adding webhooks to sync product data as a planned next step.
Does Ojos support cart persistence?
Yes, the cart is stored in the browser's local storage, so a visitor's selected items survive page reloads and browser restarts.
What technologies does Ojos use?
The stack is HTML/CSS, JavaScript, Next.js/React, Bootstrap, the Shopify JS Buy SDK, Sanity.io, Mailchimp, and EmailJS, with deployment on Vercel.
