ada ÉLAN — Shopify Hydrogen Fashion Theme

A production-ready Shopify Hydrogen storefront theme for premium fashion brands — editorial design system, full i18n with RTL, and a one-command Shopify seeding CLI.

---

Why this theme

Most Hydrogen starters give you a wired-up cart and stop there. ada ÉLAN ships the parts that usually take the longest: a coherent editorial design system, the merchandising surfaces a fashion store actually needs (lookbook, shop-the-look, compare, wishlist, quick view, reviews), and a seeding CLI so your store isn't empty on first run.

• Editorial design system — deep-contrast palette, Cormorant Garamond + Plus Jakarta Sans, design tokens documented in docs/DESIGN_SYSTEM.md
• Real i18n — English, French and Arabic with full RTL layout support
• Accessible by default — WCAG AA targets, keyboard navigation, extensive ARIA coverage
• SEO-ready — semantic markup, Open Graph and Twitter cards, and JSON-LD structured data (Organization, WebSite with SearchAction, Product, BreadcrumbList)
• Tested — unit tests (Vitest), E2E across 5 browsers (Playwright), Storybook component docs
• Seeded, not empty — an interactive wizard provisions metaobjects and demo products in your store

Screenshots

More screenshots — homepage sections, cart, account, RTL, responsive

Homepage sections

Cart & merchandising

Cart page	Cart drawer	Quick view

Wishlist	Compare

Content pages

Lookbook	Journal	About

Stores	Contact	FAQ

Account

Orders	Addresses	Profile

RTL (Arabic)

Homepage	Product

Responsive & developer experience

Mobile	Tablet

Icon library	Storybook

Quick start

Prerequisites

• Node.js 20.19+ (.nvmrc included — run nvm use)
• Yarn 1.x
• A Shopify store with Storefront API access

1. Clone and configure

git clone https://github.com/ozgursagiroglu/shopify-hydrogen-fashion-theme.git
cd shopify-hydrogen-fashion-theme

Run the interactive setup wizard. It walks you through creating the Shopify app, writes hydrogen/.env, and offers to seed metaobject definitions, demo content and demo products:

cd scripts
yarn install
yarn setup

Prefer to configure by hand? Copy hydrogen/.env.example to hydrogen/.env and fill it in — every variable is documented inline. See docs/SETUP.md for the full walkthrough.

Never commit your .env. It holds your Storefront token, session secret and Admin API token.

2. Run the storefront

cd hydrogen
yarn install
yarn dev

Visit http://localhost:3000.

From the repository root you can also use the delegating scripts — yarn dev, yarn build, yarn lint, yarn typecheck, yarn test.

Scripts

Run these from hydrogen/, or from the repo root without the --cwd dance.

Seeding and validation live in scripts/: yarn setup, yarn seed:all, yarn validate.

Project structure

shopify-hydrogen-fashion-theme/
├── hydrogen/               # The Hydrogen storefront
│   ├── app/
│   │   ├── components/     # UI, product, cart, account, home, layout, icons
│   │   ├── routes/         # File-based routes
│   │   ├── lib/            # Utilities, hooks, Shopify queries
│   │   ├── locales/        # i18n translations (EN, FR, AR)
│   │   └── styles/         # Tailwind theme and design tokens
│   ├── stories/            # Storybook stories
│   ├── e2e/                # Playwright E2E tests
│   └── test/               # Test utilities
│
├── scripts/                # Setup wizard + Shopify seeding CLI
│   ├── setup.js            # Interactive setup wizard
│   ├── lib/                # Seed and validation scripts
│   └── data/               # Demo content JSON
│
└── docs/                   # Guides, design system, screenshots

Tech stack

Documentation

Maintaining the Shopify API version

The theme targets Storefront API 2025-10, set in hydrogen/app/lib/constants.ts. When Shopify ships a new stable version:

1. Review the Storefront API release notes for breaking changes.
2. Update STOREFRONT_API_VERSION in hydrogen/app/lib/constants.ts and PUBLIC_STOREFRONT_API_VERSION in your .env.
3. Regenerate types: yarn codegen.
4. Re-run yarn typecheck, yarn test and yarn test:e2e before deploying.

Contributing

Contributions are welcome. Please read CONTRIBUTING.md for the development workflow and coding conventions, and CODE_OF_CONDUCT.md before opening an issue or pull request. Security issues should follow SECURITY.md rather than the public issue tracker.

License

MIT © Özgür Sağıroğlu

Credits

Built on Shopify Hydrogen.

Demo content — demo photography is sourced from Unsplash under the Unsplash License. All demo content (images, testimonials, press mentions, store locations) is illustrative and should be replaced with your own branded content before launching a production store.

Fonts — Cormorant Garamond and Plus Jakarta Sans, both under the SIL Open Font License.