Welcome to the Remix Store built with Shopify, React Router, and Hydrogen!
This is the codebase behind shop.remix.run. Run it locally to explore how to build a production headless Shopify store with modern web technologies.
pnpm installCopy the example environment file to create your local environment:
cp .env.example .envpnpm devYou'll have a local version of the Remix Store running with real product data, inventory, and checkout functionality.
pnpm buildpnpm test
pnpm test:e2eThe end-to-end suite starts the local storefront and covers the catalog, product, cart, SEO resources, 404 handling, and the no-JavaScript add-to-cart flow. It creates Shopify carts but never enters checkout. Set BASE_URL to test an existing deployment instead of starting the local server.
If you've never setup the Hydrogen CLI, run the following command
npx shopify hydrogen shortcutIf you have access to the Shopify store, go ahead and link via hydrogen
h2 linkh2 pullThe GraphQL queries are the source of truth for Shopify-side contracts. This table records the identifiers that must also be configured in Shopify Admin.
| Surface | Shopify configuration | Source |
|---|---|---|
| Home hero | Metaobject type hero, handle remix-3-drop-playground; asset_images media references and a collection reference |
hero.server.ts |
| Lookbook | Metaobject type lookbook, handle lookbook-remix-racing; lookbook entries with a media image and optional product |
lookbook.server.ts |
| Navigation | Menus named main-menu, footer, and product-sidebar-menu |
root.tsx, fragments.ts |
| Product content | custom.description, custom.technical_description, and custom.subscribe_if_back_in_stock metafields |
product.server.ts |
| Store-wide sale | custom.storewide_sale shop metafield referencing title, description, and end_date_and_time; paired with a Shopify automatic discount |
header.server.ts |
This is the production codebase for shop.remix.run. We welcome feedback and bug reports via GitHub issues.
See an issue you'd like to fix? Please open a PR!
MIT License - see LICENSE.md for details.
Built with ❤️ by the Remix team