📌Note: Shopyro is an independent project by Websyro. It is not affiliated with, endorsed by, or sponsored by Shopify Inc. “Shopify” is a trademark of Shopify Inc.
- Landing Page: shopyro.websyro.com
- Demo Store: shopyrodemo.websyro.com
- Documentation: websyro.com/docs/shopyro
- Blog: How a Shopify store works with Shopyro
Transform your Shopify store into a fast, modern headless e-commerce site with Next.js. Perfect for developers, tech-savvy entrepreneurs, or anyone wanting a custom, scalable, and responsive storefront.
- Next.js + Shopify: Headless storefront with modern architecture
- Instant Product Updates: Optional Shopify webhook integration for on-demand revalidation
- Fully Customizable: Static pages, banners, policies, and navigation are editable
- Multi-Niche Ready: Works for fashion, electronics, jewelry, home decor, and more
- Vercel-Optimized: Easy deployment with environment variables and hosted URL configuration
- Developer-Friendly: Detailed setup instructions and pre-configured environment variables
✅ Product browsing (listing, filters, sorting, recommendations)
✅ Shopping cart (add/update/remove, mini-cart, totals)
✅ Checkout (Shopify-hosted, guest checkout)
✅ Basic search
✅ Responsive UI/UX (landing page, header, footer, branding)
✅ Static pages (About, Contact, FAQ, Policies)
✅ SEO setup (Meta, Open Graph, sitemap, robots.txt)
Clearly explains how a Shopify store works with Shopyro Headless Commerce Starter Kit/Template, tailored for both technical and non-technical audiences.
- Node.js 18+ and pnpm
- Shopify store (Basic plan or higher - Starter plan won't work)
- Vercel account (for deployment)
git clone https://github.com/BCAPATHSHALA/SHOPYRO_LITE.git
cd SHOPYRO_LITE
pnpm installCreate a .env.local file in the project root:
# ===============================
# Environment Variables for Local Development
# ===============================
# Set the environment mode
NODE_ENV="development"
# Required: Public Shopify storefront domain
# Example: your-store.myshopify.com
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN="your-shopify-store-subdomain.myshopify.com"
# Optional: Storefront API token (recommended for production)
NEXT_PUBLIC_STOREFRONT_ACCESS_TOKEN="your-public-access-token"
SHOPIFY_STOREFRONT_ACCESS_TOKEN="your-public-access-token"
# Required: Secret key for secure on-demand revalidation
# Generate at: https://www.uuidgenerator.net/guid
NEXT_PUBLIC_SHOPIFY_REVALIDATION_SECRET="your-generated-random-uuid"
# Optional: Control Next.js telemetry
NEXT_TELEMETRY_DISABLED=0
# Required: Your site's hosted URL
NEXT_PUBLIC_SITE_URL="https://your-hosted-site.com"- Download the Shopify Headless Theme
- Navigate to your Shopify admin → Themes
- Click "Add theme" → "Upload zip file"
- Activate the headless theme
- Go to your Shopify admin → Apps
- Visit the Shopify App Store
- Install the Headless app
- Copy your Storefront API access token
pnpm run devVisit http://localhost:3000 to see your store!
shopyro/
├── app/ # Next.js app directory
│ ├── about/ # About page with components
│ ├── contact/ # Contact page
│ ├── faq/ # FAQ page
│ ├── privacy-policy/ # Privacy policy page
│ ├── terms-conditions/ # Terms & conditions page
│ ├── return-policy/ # Return policy page
│ ├── refund-policy/ # Refund policy page
│ ├── product/[handle]/ # Dynamic product pages
│ ├── sitemap.ts # Dynamic sitemap generation
│ ├── robots.ts # SEO robots.txt
│ └── globals.css # Global styles
├── components/
│ ├── layout/ # Header, footer, navigation
│ ├── product/ # Product-related components
│ ├── cart/ # Shopping cart components
│ ├── static-pages/ # Reusable page components
│ │ ├── atoms/ # Basic UI elements
│ │ ├── molecules/ # Component combinations
│ │ └── organisms/ # Complex components
│ └── ui/ # shadcn/ui components
├── siteconfig/
│ ├── site.config.ts # Global site configuration
│ ├── static-pages.config.ts # Static page content
│ └── seo.config.ts # SEO configuration
├── lib/ # Utility functions
├── types/ # TypeScript type definitions
└── public/ # Static assets
All static content is managed through configuration files in the siteconfig/ directory:
site.config.ts: Global site settings, navigation, footer linksstatic-pages.config.ts: Content for About, Contact, FAQ, and policy pagesseo.config.ts: SEO metadata and Open Graph settings
- Built with Tailwind CSS for easy customization
- shadcn/ui components for consistent design system
- Responsive design with mobile-first approach
- Dark mode support (optional)
- Atomic Design: Components organized as atoms, molecules, and organisms
- TypeScript: Full type safety throughout the codebase
- Reusable: Modular components for easy maintenance
For instant product updates, configure webhooks in your Shopify admin:
-
Go to Settings → Notifications
-
Add webhooks for these events:
collections/createcollections/deletecollections/updateproducts/createproducts/deleteproducts/update
-
Set webhook URL to:
https://your-domain.com/api/revalidate
Use ngrok for local webhook testing:
# Install ngrok
npm install -g ngrok
# Run your app
pnpm run dev
# In another terminal
ngrok http 3000
# Use the ngrok URL for webhook endpoints-
Connect Repository
- Go to Vercel
- Import your GitHub repository
-
Set Environment Variables
- Add all environment variables from your
.env.local - Set
NODE_ENV=production - Update
NEXT_PUBLIC_SITE_URLto your Vercel domain
- Add all environment variables from your
-
Deploy
- Click "Deploy" and wait for build completion
- Your store will be live at your Vercel URL
-
Custom Domain (Optional)
- Add your custom domain in Vercel dashboard
- Configure DNS settings as instructed
- SSL certificate is automatically provisioned
- Lighthouse Score: 95+ on all metrics
- Core Web Vitals: Optimized for excellent user experience
- Image Optimization: Automatic WebP conversion and lazy loading
- Edge Caching: Global CDN with intelligent caching strategies
- Bundle Size: Optimized with tree shaking and code splitting
- Framework: Next.js 15+ with App Router
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- E-commerce: Shopify Storefront API
- Deployment: Vercel
- Package Manager: pnpm
💎 Support & services: Shopyro
| Tier | Benefits |
|---|---|
| 🆓 Free | Full template access + documentation (DIY setup) |
| 🥉 Bronze | Shopify setup + Vercel deployment assistance |
| 🥈 Silver | Custom design + ongoing support + webhooks setup |
| 🥇 Gold | Priority support + custom features + consultation |
✅ Shopify + Next.js headless setup
✅ Vercel deployment & environment configuration
✅ Custom static pages & content updates
✅ Frontend redesign for niche stores
✅ Webhooks + instant revalidation setup
✅ Ongoing support & consultation
We welcome contributions! Please see our Contributing Guide for details.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the Shopyro Commercial License - see the LICENSE file for details.
- Next.js for the amazing React framework
- Shopify for the powerful e-commerce platform
- Vercel for seamless deployment and hosting
- Tailwind CSS for the utility-first CSS framework
- shadcn/ui for beautiful, accessible components
- Shopyro: Support
- Email: hello@websyro.com
- LinkedIn: Follow Websyro
- Twitter: Follow Twitter
- GitHub: Report issues
- Documentation: Full docs & setup guide for Vercel deployment and Shopify integration.
Built with ❤️ by the Shopyro team
Transform your e-commerce vision into reality with the power of headless commerce.