Estrocom is an open-source e-commerce template built with Astro, Tailwind CSS, and TypeScript that ships a complete storefront — product catalog, cart, and category pages — with WCAG AA accessibility and SEO structured data built in.
What is Estrocom?
Estrocom is an e-commerce site template that runs on the Astro framework, styled with Tailwind CSS, and written in TypeScript. It takes product data from a JavaScript file, images from a public assets folder, and page content from Astro frontmatter, then outputs a static, production-ready storefront with a cart and category pages. The template was created by developer Viraj Bijpuria, and the live demo sells foxnut and roasted gram flour, though any product line can be configured.
Key Features
- JSON-LD Schema and automatic sitemap — Products get indexed and look good in Google search results; SEO is built into the template.
- Full shopping flow — Integrated cart functionality and product categorization let customers browse and add items.
- Mobile-first design — Works down to widths of 360px and is fully responsive across breakpoints.
- WCAG AA accessibility — Tests with axe DevTools report 0 accessibility issues and AA color contrast on every page.
- Performance — Sub-1-second load time and excellent Lighthouse scores across performance metrics.
- Atomic Design architecture — Scalable component structure using Atoms, Molecules, and Organisms in src/components.
- Config-driven customization — Product data, theme colors, sizing, typography, and site domain are set in dedicated config files.
- Astro-powered static output — Uses standard npm commands for dev, build, and preview, with Astro CLI support.
Who is it for?
- Small business owners — launch an online store for physical products without a hosted platform; configure products in src/utils/productData.js and deploy.
- Developers — customize an Astro + Tailwind template with atomic design and clear folder structure; run npm run dev for local development and npm run build for production.
- Accessibility-conscious teams — need an e-commerce site that passes WCAG AA and axe DevTools scans with 0 issues.
- Freelancers and agencies — use as a base for client stores; the creator also offers custom builds and setup help via email.
What can you do with Estrocom?
- Sell products online: Add products to src/utils/productData.js, replace images in public/assets, and publish a complete store with categories and a cart.
- Boost search visibility: JSON-LD schema and an automatic sitemap improve Google indexing of product pages.
- Customize branding: Update colors, sizing, and typography in src/design-system and edit src/pages/index.astro to tell your brand story.
- Build accessible storefronts: The template maintains WCAG AA contrast and passes axe audits, so the final site meets accessibility standards.
How does Estrocom work?
Estrocom is config-driven: clone the repository, run npm install, and edit src/utils/productData.js to add products. You then swap images in public/assets, update category and product pages in src/pages/category and src/pages/products, and set the site domain in astro.config.mjs. The project structure separates components into atoms, molecules, and organisms, with theme tokens in a src/design-system folder.
