A demonstration of Astro's experimental live content collections feature using a Shopify loader that fetches data from mock.shop at runtime.

• Live Data Fetching - Products and collections loaded at request time, not build time
• Type-Safe Filtering - Rich filtering capabilities with TypeScript support
• Error Handling - Robust error handling with custom error types
• Cache Optimization - Smart cache hints for performance
• Real-Time Updates - No rebuilds needed when data changes

This demo showcases how to build live collection loaders:

• src/loaders/shopify/ - Modular loader architecture
• src/live.config.ts - Live collections configuration
• src/pages/ - Runtime data fetching examples

• Homepage (/) - Featured products and collections overview
• Products (/products) - Filterable product listing with search, sorting, and availability filters
• Product Details (/products/[handle]) - Individual product pages with variants

Inside of your Astro project, you'll see the following folders and files:

/
├── public/
│   └── favicon.svg
├── src/
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
└── package.json

To learn more about the folder structure of an Astro project, refer to our guide on project structure.

All commands are run from the root of the project, from a terminal:

Feel free to check our documentation or jump into our Discord server.