{"id":31405425,"url":"https://github.com/bcapathshala/shopyro_lite","last_synced_at":"2026-04-11T01:20:20.384Z","repository":{"id":316907250,"uuid":"1059991180","full_name":"BCAPATHSHALA/SHOPYRO_LITE","owner":"BCAPATHSHALA","description":"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.","archived":false,"fork":false,"pushed_at":"2025-09-27T12:54:14.000Z","size":3877,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-27T14:42:58.620Z","etag":null,"topics":["e-commerce","ecommerce","ecommerce-site","ecommerce-store","graphql","nextjs","shadcn-ui","shopify","shopify-apps","shopify-nextjs-shopyro-template","shopify-partners","shopify-storefront","shopify-theme","shopify-themes","shopyro","tailwindcss","vercel","websyro"],"latest_commit_sha":null,"homepage":"https://shopyro.websyro.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BCAPATHSHALA.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-19T08:28:05.000Z","updated_at":"2025-09-27T12:54:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"e56ae094-8628-4ec2-8171-f30899138d0a","html_url":"https://github.com/BCAPATHSHALA/SHOPYRO_LITE","commit_stats":null,"previous_names":["bcapathshala/shopyro_lite"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/BCAPATHSHALA/SHOPYRO_LITE","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BCAPATHSHALA%2FSHOPYRO_LITE","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BCAPATHSHALA%2FSHOPYRO_LITE/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BCAPATHSHALA%2FSHOPYRO_LITE/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BCAPATHSHALA%2FSHOPYRO_LITE/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BCAPATHSHALA","download_url":"https://codeload.github.com/BCAPATHSHALA/SHOPYRO_LITE/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BCAPATHSHALA%2FSHOPYRO_LITE/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277560728,"owners_count":25839103,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-29T02:00:09.175Z","response_time":84,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["e-commerce","ecommerce","ecommerce-site","ecommerce-store","graphql","nextjs","shadcn-ui","shopify","shopify-apps","shopify-nextjs-shopyro-template","shopify-partners","shopify-storefront","shopify-theme","shopify-themes","shopyro","tailwindcss","vercel","websyro"],"created_at":"2025-09-29T17:51:39.091Z","updated_at":"2025-09-29T17:51:40.657Z","avatar_url":"https://github.com/BCAPATHSHALA.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Shopyro - Next.js Headless Commerce Template\n\n[![Next.js](https://img.shields.io/badge/Next.js-15-black?logo=next.js)](https://nextjs.org/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-4.9-blue?logo=typescript)](https://www.typescriptlang.org/)\n[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-3.3-blue?logo=tailwind-css)](https://tailwindcss.com/)\n[![shadcn/ui](https://img.shields.io/badge/shadcn_ui-Component-red)](https://ui.shadcn.com/)\n[![GraphQL](https://img.shields.io/badge/GraphQL-API-E10098?logo=graphql)](https://graphql.org/)\n[![Shopify](https://img.shields.io/badge/Shopify-Storefront-green?logo=shopify)](https://shopify.com/)\n[![Vercel](https://img.shields.io/badge/Vercel-Deploy-black?logo=vercel)](https://vercel.com/)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow)](LICENSE)\n[![npm](https://img.shields.io/badge/pnpm-7.31-blue?logo=pnpm)](https://pnpm.io/)\n\n![Websyro](./public/shopyro.png)\n\n📌**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.\n\n## 🚀 Live Demo \u0026 Resources\n\n- **Landing Page**: [shopyro.websyro.com](https://shopyro.websyro.com)\n- **Demo Store**: [shopyrodemo.websyro.com](https://shopyrodemo.websyro.com)\n- **Documentation**: [websyro.com/docs/shopyro](https://www.websyro.com/docs/shopyro)\n- **Blog**: [How a Shopify store works with Shopyro](https://www.websyro.com/blog/how-a-shopify-store-works-with-shopyro-headless-commerce-starter-kit)\n\nTransform 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.\n\n## Features\n\n- **Next.js + Shopify**: Headless storefront with modern architecture\n- **Instant Product Updates**: Optional Shopify webhook integration for on-demand revalidation\n- **Fully Customizable**: Static pages, banners, policies, and navigation are editable\n- **Multi-Niche Ready**: Works for fashion, electronics, jewelry, home decor, and more\n- **Vercel-Optimized**: Easy deployment with environment variables and hosted URL configuration\n- **Developer-Friendly**: Detailed setup instructions and pre-configured environment variables\n\n## Core Features - Ready Out of the Box\n\n✅ **Product browsing** (listing, filters, sorting, recommendations)  \n✅ **Shopping cart** (add/update/remove, mini-cart, totals)  \n✅ **Checkout** (Shopify-hosted, guest checkout)  \n✅ **Basic search**  \n✅ **Responsive UI/UX** (landing page, header, footer, branding)  \n✅ **Static pages** (About, Contact, FAQ, Policies)  \n✅ **SEO setup** (Meta, Open Graph, sitemap, robots.txt)\n\n## How a Shopify Store Works with Shopyro Headless Commerce Starter Kit/Template?\n\nClearly explains how a Shopify store works with Shopyro Headless Commerce Starter Kit/Template, tailored for both technical and non-technical audiences.\n\n### For Non-Technical Person (Business Owner / Marketer)\n\n![For Non-Technical Person (Business Owner / Marketer)](./public/non-tech-view.png)\n\n### For Technical Person (Developer / Tech Team)\n\n![For Technical Person (Developer / Tech Team)](./public/tech-view.png)\n\n## Quick Start\n\n### Prerequisites\n\n- Node.js 18+ and pnpm\n- Shopify store (Basic plan or higher - Starter plan won't work)\n- Vercel account (for deployment)\n\n### 1. Clone and Install\n\n```bash\ngit clone https://github.com/BCAPATHSHALA/SHOPYRO_LITE.git\ncd SHOPYRO_LITE\npnpm install\n```\n\n### 2. Environment Setup\n\nCreate a `.env.local` file in the project root:\n\n```env\n# ===============================\n# Environment Variables for Local Development\n# ===============================\n\n# Set the environment mode\nNODE_ENV=\"development\"\n\n# Required: Public Shopify storefront domain\n# Example: your-store.myshopify.com\nNEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=\"your-shopify-store-subdomain.myshopify.com\"\n\n# Optional: Storefront API token (recommended for production)\nNEXT_PUBLIC_STOREFRONT_ACCESS_TOKEN=\"your-public-access-token\"\nSHOPIFY_STOREFRONT_ACCESS_TOKEN=\"your-public-access-token\"\n\n# Required: Secret key for secure on-demand revalidation\n# Generate at: https://www.uuidgenerator.net/guid\nNEXT_PUBLIC_SHOPIFY_REVALIDATION_SECRET=\"your-generated-random-uuid\"\n\n# Optional: Control Next.js telemetry\nNEXT_TELEMETRY_DISABLED=0\n\n# Required: Your site's hosted URL\nNEXT_PUBLIC_SITE_URL=\"https://your-hosted-site.com\"\n```\n\n### 3. Configure Shopify\n\n#### Install Shopify Headless Theme\n\n1. Download the [Shopify Headless Theme](https://github.com/instantcommerce/shopify-headless-theme)\n2. Navigate to your Shopify admin → Themes\n3. Click \"Add theme\" → \"Upload zip file\"\n4. Activate the headless theme\n\n#### Install Shopify Headless App\n\n1. Go to your Shopify admin → Apps\n2. Visit the Shopify App Store\n3. Install the [Headless app](https://apps.shopify.com/headless)\n4. Copy your Storefront API access token\n\n### 4. Run Development Server\n\n```bash\npnpm run dev\n```\n\nVisit [http://localhost:3000](http://localhost:3000) to see your store!\n\n## Project Structure\n\n```\nshopyro/\n├── app/                          # Next.js app directory\n│   ├── about/                    # About page with components\n│   ├── contact/                  # Contact page\n│   ├── faq/                      # FAQ page\n│   ├── privacy-policy/           # Privacy policy page\n│   ├── terms-conditions/         # Terms \u0026 conditions page\n│   ├── return-policy/            # Return policy page\n│   ├── refund-policy/            # Refund policy page\n│   ├── product/[handle]/         # Dynamic product pages\n│   ├── sitemap.ts               # Dynamic sitemap generation\n│   ├── robots.ts                # SEO robots.txt\n│   └── globals.css              # Global styles\n├── components/\n│   ├── layout/                  # Header, footer, navigation\n│   ├── product/                 # Product-related components\n│   ├── cart/                    # Shopping cart components\n│   ├── static-pages/            # Reusable page components\n│   │   ├── atoms/               # Basic UI elements\n│   │   ├── molecules/           # Component combinations\n│   │   └── organisms/           # Complex components\n│   └── ui/                      # shadcn/ui components\n├── siteconfig/\n│   ├── site.config.ts           # Global site configuration\n│   ├── static-pages.config.ts   # Static page content\n│   └── seo.config.ts            # SEO configuration\n├── lib/                         # Utility functions\n├── types/                       # TypeScript type definitions\n└── public/                      # Static assets\n```\n\n## Customization\n\n### Static Content\n\nAll static content is managed through configuration files in the `siteconfig/` directory:\n\n- **`site.config.ts`**: Global site settings, navigation, footer links\n- **`static-pages.config.ts`**: Content for About, Contact, FAQ, and policy pages\n- **`seo.config.ts`**: SEO metadata and Open Graph settings\n\n### Styling\n\n- Built with **Tailwind CSS** for easy customization\n- **shadcn/ui** components for consistent design system\n- Responsive design with mobile-first approach\n- Dark mode support (optional)\n\n### Components\n\n- **Atomic Design**: Components organized as atoms, molecules, and organisms\n- **TypeScript**: Full type safety throughout the codebase\n- **Reusable**: Modular components for easy maintenance\n\n## Advanced Configuration\n\n### Shopify Webhooks (Optional)\n\nFor instant product updates, configure webhooks in your Shopify admin:\n\n1. Go to Settings → Notifications\n2. Add webhooks for these events:\n\n   - `collections/create`\n   - `collections/delete`\n   - `collections/update`\n   - `products/create`\n   - `products/delete`\n   - `products/update`\n\n3. Set webhook URL to: `https://your-domain.com/api/revalidate`\n\n### Local Webhook Testing\n\nUse ngrok for local webhook testing:\n\n```bash\n# Install ngrok\nnpm install -g ngrok\n\n# Run your app\npnpm run dev\n\n# In another terminal\nngrok http 3000\n\n# Use the ngrok URL for webhook endpoints\n```\n\n## Deployment\n\n### Deploy to Vercel\n\n1. **Connect Repository**\n\n   - Go to [Vercel](https://vercel.com/new)\n   - Import your GitHub repository\n\n2. **Set Environment Variables**\n\n   - Add all environment variables from your `.env.local`\n   - Set `NODE_ENV=production`\n   - Update `NEXT_PUBLIC_SITE_URL` to your Vercel domain\n\n3. **Deploy**\n\n   - Click \"Deploy\" and wait for build completion\n   - Your store will be live at your Vercel URL\n\n4. **Custom Domain (Optional)**\n   - Add your custom domain in Vercel dashboard\n   - Configure DNS settings as instructed\n   - SSL certificate is automatically provisioned\n\n## Performance\n\n- **Lighthouse Score**: 95+ on all metrics\n- **Core Web Vitals**: Optimized for excellent user experience\n- **Image Optimization**: Automatic WebP conversion and lazy loading\n- **Edge Caching**: Global CDN with intelligent caching strategies\n- **Bundle Size**: Optimized with tree shaking and code splitting\n\n## Tech Stack\n\n- **Framework**: Next.js 15+ with App Router\n- **Language**: TypeScript\n- **Styling**: Tailwind CSS\n- **UI Components**: shadcn/ui\n- **E-commerce**: Shopify Storefront API\n- **Deployment**: Vercel\n- **Package Manager**: pnpm\n\n## **💎 Support \u0026 services**: [Shopyro](https://shopyro.websyro.com)\n\n### Support Tiers\n\n| Tier          | Benefits                                          |\n| ------------- | ------------------------------------------------- |\n| 🆓 **Free**   | Full template access + documentation (DIY setup)  |\n| 🥉 **Bronze** | Shopify setup + Vercel deployment assistance      |\n| 🥈 **Silver** | Custom design + ongoing support + webhooks setup  |\n| 🥇 **Gold**   | Priority support + custom features + consultation |\n\n### Services We Provide\n\n✅ **Shopify + Next.js headless setup**  \n✅ **Vercel deployment \u0026 environment configuration**  \n✅ **Custom static pages \u0026 content updates**  \n✅ **Frontend redesign for niche stores**  \n✅ **Webhooks + instant revalidation setup**  \n✅ **Ongoing support \u0026 consultation**\n\n## 🤝 Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is licensed under the Shopyro Commercial License - see the [LICENSE](LICENSE) file for details.\n\n## Acknowledgments\n\n- [Next.js](https://nextjs.org/) for the amazing React framework\n- [Shopify](https://shopify.dev/) for the powerful e-commerce platform\n- [Vercel](https://vercel.com/) for seamless deployment and hosting\n- [Tailwind CSS](https://tailwindcss.com/) for the utility-first CSS framework\n- [shadcn/ui](https://ui.shadcn.com/) for beautiful, accessible components\n\n## Support\n\n- **Shopyro**: [Support](https://shopyro.websyro.com)\n- **Email**: hello@websyro.com\n- **LinkedIn**: [Follow Websyro](https://www.linkedin.com/company/websyro/)\n- **Twitter**: [Follow Twitter](https://twitter.com/joinwebsyro)\n- **GitHub**: [Report issues](https://github.com/BCAPATHSHALA/SHOPYRO_LITE/issues)\n- **Documentation**: [Full docs \u0026 setup guide](https://websyro.com/docs/shopyro) for Vercel deployment and Shopify integration.\n\n---\n\n**Built with ❤️ by the Shopyro team**\n\nTransform your e-commerce vision into reality with the power of headless commerce.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbcapathshala%2Fshopyro_lite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbcapathshala%2Fshopyro_lite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbcapathshala%2Fshopyro_lite/lists"}