$ show thomasKn/astro-shopify
This repository is a starter theme for building headless ecommerce storefronts with Shopify using Astro. It provides a server-rendered Astro application with Svelte islands for interactive components like the cart drawer and add-to-cart form. The application fetches product data from the Shopify Storefront GraphQL API, displays product listings and detail pages, and manages a shopping cart with persistent state via nanostores. It is configured for deployment on Vercel and uses Tailwind CSS for styling. The architecture is a monolithic web application with clear separation of concerns: `src/utils` contains the Shopify API client, GraphQL queries, Zod schemas for runtime validation, and configuration; `src/stores` manages cart state; `src/components` contains Astro and Svelte components for UI. The Shopify client (`src/utils/shopify.ts`) intelligently switches between public and private access tokens based on server/client rendering and includes buyer IP forwarding for accurate pricing. The codebase demonstrates modern practices: TypeScript strict mode, Zod validation of external API responses, Svelte 5 runes, and responsive image generation with srcset. While the theme includes demo content (hardcoded reviews, accordions) and a hardcoded API version (2023-01), the core utilities are well-crafted and reusable. The Shopify API client and image component can be extracted into other projects with minimal changes. Overall, this is a solid, professional-grade starter theme that showcases a clean integration between Astro, Svelte, and Shopify.
The LLM identified 3 files worth highlighting for reuse:
A robust Shopify Storefront API client that handles server-side vs client-side authentication (private vs public tokens), forwards buyer IP for accurate pricing, and validates all responses with Zod schemas. It centralizes error handling and is easily extractable for any Shopify headless project.
A self-contained Svelte component that generates responsive image srcset attributes for Shopify CDN images, with configurable sizes, lazy loading, and a placeholder fallback. It demonstrates a clean pattern for optimizing image delivery in ecommerce storefronts.
Zod schemas for Shopify Storefront API responses, providing runtime validation and type inference. This pattern ensures data integrity when consuming external APIs and can be reused across projects that integrate with Shopify.