Building High-Performance Online Stores with Shopify Hydrogen and Remix

on YouTube ↗26m

" summary

Builds a lightweight storefront from the CLI (npm create shopify) using the hello‑world template, Storyblok for CMS content, and Shopify Hydrogen on top of Remix. Shows code: createStorefrontClient with storefront.doQuery/doMutation, use of Remix loaders and actions, streaming data with Remix defer and suspense, a server-side cart using cart form actions (lines add/remove), Shop Pay button, flattenConnection for line items, and a runnable repo plus API tokens to reproduce.

AI-written summary · about

" chapters (8)

1. 0:00Introduction to hydrogen
2. 1:09Headless commerce and remix
3. 3:38Building a project
4. 7:29Data fetching and mutations
5. 11:08Hydrogen components
6. 12:10SEO management
7. 13:23Setting up the cart
8. 21:28Conclusion and resources

" related talks

• 17mLightning Fast E-Commerce: Remix your Shop with Shopify HydrogenAlexandra Spalato · Shift Miami 2023
• 20mHeadless commerce with Shopify Hydrogen and ViteFran Dios · ViteConf 2022
• 21mHeadless eCommerce: Shopify + NextJs = ❤️Ilias Haddad · BlaBlaConf 2021
• 28mFire-side chat on RemixChance Strickland · Remix Conf Europe 2022
• 15mCommunity driven composable commerce with Next.jsLina Murton · Next.js Conf 2022
• 41mHeadless E-Commerce: The advantages of using Headless CMS with your e-commerce siteScott Fuller · TheJam.dev 2023
• 23mSky’s the limit: Headless eCommerce with Next.jsLisi Linhart · JSWorld Conference 2021
• 07mHydrogen:An Early Look at Server Components in the WildDaniel Rios Pavia · React Advanced 2022