CINXE.COM

<!DOCTYPE html><html lang="en" class="h-full"><head><meta charSet="utf-8"/><meta name="description" content="Build performant ecommerce faster with Shopify鈥檚 React-based framework for developing custom storefronts. Built-in Oxygen hosting makes deployment easy."/><title>Hydrogen: Shopify鈥檚 headless commerce framework</title><meta name="viewport" content="width=device-width,initial-scale=1"/><meta property="fb:pages" content="20409006880"/><meta property="fb:app_id" content="847460188612391"/><meta property="og:description" content="Build performant ecommerce faster with Shopify鈥檚 React-based framework for developing custom storefronts. Built-in Oxygen hosting makes deployment easy."/><meta property="og:image" content="https://cdn.shopify.com/s/files/1/0598/4822/8886/files/share-image.jpg?v=1695668176"/><meta property="og:site_name" content="Hydrogen: Shopify鈥檚 headless commerce framework"/><meta property="og:title" content="Hydrogen: Shopify鈥檚 headless commerce framework"/><meta property="og:type" content="website"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:site" content="Shopify"/><meta property="twitter:account_id" content="17136315"/><meta property="twitter:title" content="Hydrogen: Shopify鈥檚 headless commerce framework"/><meta property="twitter:description" content="Build performant ecommerce faster with Shopify鈥檚 React-based framework for developing custom storefronts. Built-in Oxygen hosting makes deployment easy."/><meta property="twitter:image" content="https://cdn.shopify.com/s/files/1/0598/4822/8886/files/share-image.jpg?v=1695668176"/><link rel="preload" as="font" crossorigin="anonymous" type="font/woff2" href="https://cdn.shopify.com/s/files/1/0598/4822/8886/files/DrukWide-Bold-Web.woff2?v=1690921783"/><link rel="preload" as="font" crossorigin="anonymous" type="font/woff2" href="https://cdn.shopify.com/s/files/1/0598/4822/8886/files/ShopifySans-Regular.woff2?v=1691088711"/><link rel="preload" as="font" crossorigin="anonymous" type="font/woff2" href="https://cdn.shopify.com/s/files/1/0598/4822/8886/files/JetBrainsMono-Bold.woff2?v=1692130908"/><link rel="preload" href="https://cdn.shopify.com/s/files/1/0598/4822/8886/files/gradient.jpg" as="image"/><link rel="stylesheet" href="https://cdn.shopify.com/oxygen-v2/25760/10053/20707/1208616/build/_assets/tailwind-QBRJHJTJ.css"/><link rel="preconnect" href="https://cdn.shopify.com"/><link rel="preconnect" href="https://shop.app"/><link rel="icon" type="image/svg+xml" href="https://cdn.shopify.com/s/files/1/0598/4822/8886/files/favicon.svg?v=1695667701"/><link rel="alternate" type="application/rss+xml" title="Hydrogen Updates" href="/rss.xml"/><script async="" src="https://www.googletagmanager.com/gtag/js?id=GTM-WS8VK6K"></script><script async="" id="gtag-init"> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'GTM-WS8VK6K', { page_path: window.location.pathname, }); </script></head><body class="min-h-full overflow-x-hidden bg-black-2 text-white"><header class="nav-view-transition fixed left-0 top-0 z-40 w-full transition-[colors_opacity] duration-300 bg-transparent md:motion-safe:opacity-0"><a href="#main" class="flex h-0 w-full items-center justify-center overflow-hidden bg-black-2 text-center transition-all focus:h-60"><span class="inline-block font-jetbrains">Skip to main</span></a><div class="wide-container space-between flex h-62 items-center justify-between gap-32 pr-4 md:pr-40"><a class="z-50 block aspect-[160/30] w-160" data-event-page="/showcase" data-event-category="main-nav" data-event-action="/" data-event-label="logo" href="/"><img alt="Hydrogen" decoding="async" height="30" loading="eager" src="https://cdn.shopify.com/s/files/1/0598/4822/8886/files/logo.svg?v=1691525350&width=160&height=30&crop=center" srcSet="https://cdn.shopify.com/s/files/1/0598/4822/8886/files/logo.svg?v=1691525350&width=200&height=38&crop=center 200w, https://cdn.shopify.com/s/files/1/0598/4822/8886/files/logo.svg?v=1691525350&width=400&height=75&crop=center 400w, https://cdn.shopify.com/s/files/1/0598/4822/8886/files/logo.svg?v=1691525350&width=600&height=113&crop=center 600w, https://cdn.shopify.com/s/files/1/0598/4822/8886/files/logo.svg?v=1691525350&width=800&height=150&crop=center 800w, https://cdn.shopify.com/s/files/1/0598/4822/8886/files/logo.svg?v=1691525350&width=1000&height=188&crop=center 1000w, https://cdn.shopify.com/s/files/1/0598/4822/8886/files/logo.svg?v=1691525350&width=1200&height=225&crop=center 1200w, https://cdn.shopify.com/s/files/1/0598/4822/8886/files/logo.svg?v=1691525350&width=1400&height=263&crop=center 1400w, https://cdn.shopify.com/s/files/1/0598/4822/8886/files/logo.svg?v=1691525350&width=1600&height=300&crop=center 1600w, https://cdn.shopify.com/s/files/1/0598/4822/8886/files/logo.svg?v=1691525350&width=1800&height=338&crop=center 1800w, https://cdn.shopify.com/s/files/1/0598/4822/8886/files/logo.svg?v=1691525350&width=2000&height=375&crop=center 2000w, https://cdn.shopify.com/s/files/1/0598/4822/8886/files/logo.svg?v=1691525350&width=2200&height=413&crop=center 2200w, https://cdn.shopify.com/s/files/1/0598/4822/8886/files/logo.svg?v=1691525350&width=2400&height=450&crop=center 2400w, https://cdn.shopify.com/s/files/1/0598/4822/8886/files/logo.svg?v=1691525350&width=2600&height=488&crop=center 2600w, https://cdn.shopify.com/s/files/1/0598/4822/8886/files/logo.svg?v=1691525350&width=2800&height=525&crop=center 2800w, https://cdn.shopify.com/s/files/1/0598/4822/8886/files/logo.svg?v=1691525350&width=3000&height=563&crop=center 3000w" width="160" style="aspect-ratio:160/30" class="size-full"/></a><nav aria-hidden="false" id="main-nav" class="group pointer-events-none invisible fixed -right-full top-0 z-40 h-full w-full translate-x-0 items-center overflow-auto bg-dark-purple pt-100 transition-[transform,visibility] duration-500 motion-reduce:duration-0 md:visible md:static md:flex md:h-auto md:w-auto md:translate-x-0 md:overflow-visible md:bg-transparent md:p-0"><ul class="pointer-events-auto relative mb-56 grid items-center md:mb-0 md:flex"><li class="group/link transition-opacity hover:!opacity-100 md:group-hover:opacity-50"><a data-event-page="/showcase" data-event-category="main-nav" data-event-action="click-link" data-event-label="showcase" aria-current="page" class="inline-block font-jetbrains font-bold uppercase text-18 leading-snug md:title6 gap-8 px-40 md:px-13 py-21 relative after:content-[""] after:block after:absolute after:h-2 after:transition-[bg_transform] after:translate-y-2 group-hover/link:after:bg-white group-hover/link:after:translate-y-0 after:bottom-16 after:w-[calc(100%-80px)] after:md:w-[calc(100%-26px)] after:left-40 after:md:left-14 after:bg-white" href="/showcase">Showcase</a></li><li class="group/link transition-opacity hover:!opacity-100 md:group-hover:opacity-50"><a data-event-page="/showcase" data-event-category="main-nav" data-event-action="click-link" data-event-label="integrations" class="inline-block font-jetbrains font-bold uppercase text-18 leading-snug md:title6 gap-8 px-40 md:px-13 py-21 relative after:content-[""] after:block after:absolute after:h-2 after:transition-[bg_transform] after:translate-y-2 group-hover/link:after:bg-white group-hover/link:after:translate-y-0 after:bottom-16 after:w-[calc(100%-80px)] after:md:w-[calc(100%-26px)] after:left-40 after:md:left-14" href="/integrations">Integrations</a></li><li class="group/link transition-opacity hover:!opacity-100 md:group-hover:opacity-50"><a data-event-page="/showcase" data-event-category="main-nav" data-event-action="click-link" data-event-label="updates" class="inline-block font-jetbrains font-bold uppercase text-18 leading-snug md:title6 gap-8 px-40 md:px-13 py-21 relative after:content-[""] after:block after:absolute after:h-2 after:transition-[bg_transform] after:translate-y-2 group-hover/link:after:bg-white group-hover/link:after:translate-y-0 after:bottom-16 after:w-[calc(100%-80px)] after:md:w-[calc(100%-26px)] after:left-40 after:md:left-14" href="/updates">Updates</a></li><li class="group/link transition-opacity hover:!opacity-100 md:group-hover:opacity-50"><a class="inline-block font-jetbrains font-bold uppercase text-18 leading-snug md:title6 gap-8 px-40 md:px-13 py-21 inline-flex items-center gap-8" href="https://shopify.dev/docs/custom-storefronts/hydrogen" target="_blank" rel="noreferrer" data-event-page="/showcase" data-event-category="main-nav" data-event-action="click-link" data-event-label="docs"><span class="relative after:content-[""] after:block after:absolute after:h-2 after:transition-[bg_transform] after:translate-y-2 group-hover/link:after:bg-white group-hover/link:after:translate-y-0 after:bottom-auto after:top-19 after:w-full after:left-0">Docs</span><span aria-hidden="true" class="-mt-2 block h-16 w-16 md:mt-0"><span class="icon inline-block bg-current hover:bg-current h-full w-full" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/external.svg?v=1691688830);-webkit-mask-size:contain;transform:translateZ(0)"></span></span></a></li></ul><div class="spacer pointer-events-none hidden self-stretch md:block md:w-36"></div><ul class="pointer-events-auto relative flex items-center px-40 pb-40 md:p-0"><li class="hover:!opacity-100 md:group-hover:opacity-50"><a aria-label="Github" href="https://github.com/Shopify/hydrogen" target="_blank" rel="noreferrer" class="block h-26 px-10 md:px-7 " data-event-page="/showcase" data-event-category="main-nav" data-event-action="click-link" data-event-label="github"><span class="icon inline-block bg-current hover:bg-current h-full w-26" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/github.svg?v=1691509015);-webkit-mask-size:contain;transform:translateZ(0)"></span></a></li><li class="hover:!opacity-100 md:group-hover:opacity-50"><a aria-label="X" href="https://twitter.com/shopifydevs?lang=en" target="_blank" rel="noreferrer" class="block h-26 px-10 md:px-7 " data-event-page="/showcase" data-event-category="main-nav" data-event-action="click-link" data-event-label="x"><span class="icon inline-block bg-current hover:bg-current h-full w-26" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/x-2.svg?v=1695310435);-webkit-mask-size:contain;transform:translateZ(0)"></span></a></li><li class="hover:!opacity-100 md:group-hover:opacity-50"><a aria-label="YouTube" href="https://www.youtube.com/playlist?list=PLvQF73bM4-5WiRsA0C8rsFPXKtKCiuLtT" target="_blank" rel="noreferrer" class="block h-26 px-10 md:px-7 " data-event-page="/showcase" data-event-category="main-nav" data-event-action="click-link" data-event-label="youtube"><span class="icon inline-block bg-current hover:bg-current h-full w-26" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/youtube.svg?v=1692652070);-webkit-mask-size:contain;transform:translateZ(0)"></span></a></li><li class="hover:!opacity-100 md:group-hover:opacity-50"><a aria-label="Hydrogen Updates RSS Feed" href="/rss.xml" class="block h-26 px-10 md:px-7 " data-event-page="/showcase" data-event-category="main-nav" data-event-action="click-link" data-event-label="rss"><img aria-hidden="true" alt="" src="/rss.svg" class="w-26 "/></a></li></ul></nav><a aria-label="Open nav" aria-controls="main-nav" class="z-50 flex h-44 w-44 items-center justify-center md:hidden" href="/showcase?nav=open"><span class="grid gap-5"><span class="block h-2 w-20 origin-top-left rounded-full bg-white transition-transform"></span><span class="block h-2 w-20 rounded-full bg-white opacity-100 transition-[width]"></span><span class="block h-2 w-20 origin-bottom-left rounded-full bg-white transition-transform"></span></span></a></div></header><svg xmlns="http://www.w3.org/2000/svg" class="absolute h-0 w-0"><linearGradient id="face-gradient" x1="1" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="rgba(170, 140, 255, 0.05)"></stop><stop offset="90%" stop-color="rgba(100, 100, 100, 0.75)"></stop></linearGradient><linearGradient id="west-gradient" x1="0" x2="1"><stop offset="0%" stop-color="rgba(170, 160, 200, 0.4)"></stop><stop offset="70%" stop-color="rgba(200, 205, 220, 0.7)"></stop></linearGradient><linearGradient id="south-gradient" x1="1" x2="0"><stop offset="0%" stop-color="rgba(160, 150, 180, 0.75)"></stop><stop offset="35%" stop-color="rgba(150, 140, 180, 0.75)"></stop><stop offset="35%" stop-color="rgba(220, 250, 220, 0.7)"></stop><stop offset="90%" stop-color="rgba(175, 180, 200, 0.7)"></stop></linearGradient></svg><div class="absolute top-0 -z-10 aspect-[4/13] w-full overflow-hidden sm:aspect-[8/13] md:aspect-[10/13] lg:aspect-square xl:aspect-video"><div class="absolute inset-0 overflow-hidden bg-navy"><div class="gradient-container absolute inset-0 bg-gradient-sm bg-cover opacity-50 mix-blend-overlay md:bg-gradient bg-bottom"></div><div class="absolute inset-0"><div class="absolute h-[40vh] w-[75vh] bg-gradient-radial from-turquoise to-transparent to-70% opacity-40 md:h-[22vw] md:w-[75vw] bottom-1/2 right-0"></div><div class="absolute aspect-video w-3/4 bg-gradient-radial from-green to-transparent to-70% opacity-30 bottom-1/4 left-0 "></div></div><div class="absolute inset-0 from-black-2 to-transparent to-10% bg-gradient-to-t"></div></div><div class="absolute inset-0 h-full w-full mix-blend-overlay bg-[url('https://cdn.shopify.com/s/files/1/0598/4822/8886/files/grain.png?v=1692383484')] animation-play-state-paused"></div><div class="absolute left-1/2 top-[-8%] grid w-[180vw] -translate-x-1/2 grid-cols-2 gap-x-10 mix-blend-color-dodge sm:top-[-14%] sm:w-[150vw] md:w-[180vw] md:grid-cols-3 lg:top-[-30%] lg:w-[130vw] xl:top-[-20%] xl:w-[110vw] not-touch-device:opacity-40"><div class="reveal relative transition-[transform,opacity] duration-500 ease-in-out delay-75 md:motion-safe:translate-y-32 md:motion-safe:opacity-0"><div class="relative mx-auto w-full select-none opacity-40 mix-blend-color-dodge"><div class="relative w-full" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205.654 134.55" class="glass relative z-10 md:motion-safe:animate-float"><path fill="url(#face-gradient)" d="M1.127 54.176 36.61 35.491l35.122 22.001 31.897-16.797-35.5-21.812L103.241 0l102.412 63.63-35.23 18.48-35.663-21.778-30.773 16.87 34.162 21.705-34.54 19.062z"></path><path fill="url(#west-gradient)" d="M1.127 54.176C.113 71.11 0 71.166 0 71.166l102.902 63.384.709-16.581zm67.001-35.293-.932 16.866 21.012 13.097 15.42-8.151Zm66.633 41.449-.38 17.01 35.332 21.79.71-17.023z"></path><path fill="url(#south-gradient)" d="m138.15 98.907-34.54 19.062-.708 16.58 34.901-18.719zm-3.389-38.575-30.773 16.87 13.676 8.685 16.717-8.545zm70.893 3.298-1 16.545-34.941 18.956.71-17.022z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205.654 134.55" class="glass absolute top-0 opacity-40 mix-blend-overlay md:motion-safe:animate-float"><path fill="#FFFFFF" d="M1.127 54.176 36.61 35.491l35.122 22.001 31.897-16.797-35.5-21.812L103.241 0l102.412 63.63-35.23 18.48-35.663-21.778-30.773 16.87 34.162 21.705-34.54 19.062z"></path><path fill="#FFFFFF" d="M1.127 54.176C.113 71.11 0 71.166 0 71.166l102.902 63.384.709-16.581zm67.001-35.293-.932 16.866 21.012 13.097 15.42-8.151Zm66.633 41.449-.38 17.01 35.332 21.79.71-17.023z"></path><path fill="#FFFFFF" d="m138.15 98.907-34.54 19.062-.708 16.58 34.901-18.719zm-3.389-38.575-30.773 16.87 13.676 8.685 16.717-8.545zm70.893 3.298-1 16.545-34.941 18.956.71-17.022z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205.654 134.55" class="block translate-y-[-12.35%] opacity-40 mix-blend-multiply md:motion-safe:animate-delay-float"><path fill="#A7A6A6" d="M1.127 54.176 36.61 35.491l35.122 22.001 31.897-16.797-35.5-21.812L103.241 0l102.412 63.63-35.23 18.48-35.663-21.778-30.773 16.87 34.162 21.705-34.54 19.062z"></path><path fill="#848383" d="M1.127 54.176C.113 71.11 0 71.166 0 71.166l102.902 63.384.709-16.581zm67.001-35.293-.932 16.866 21.012 13.097 15.42-8.151Zm66.633 41.449-.38 17.01 35.332 21.79.71-17.023z"></path><path fill="#848383" d="m138.15 98.907-34.54 19.062-.708 16.58 34.901-18.719zm-3.389-38.575-30.773 16.87 13.676 8.685 16.717-8.545zm70.893 3.298-1 16.545-34.941 18.956.71-17.022z"></path></svg></div></div></div><div class="reveal relative transition-[transform,opacity] duration-500 ease-in-out delay-100 md:motion-safe:translate-y-32 md:motion-safe:opacity-0"><div class="relative mx-auto w-full select-none opacity-40 mix-blend-color-dodge"><div class="relative w-full" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205.654 134.55" class="glass relative z-10 md:motion-safe:animate-float"><path fill="url(#face-gradient)" d="M1.127 54.176 36.61 35.491l35.122 22.001 31.897-16.797-35.5-21.812L103.241 0l102.412 63.63-35.23 18.48-35.663-21.778-30.773 16.87 34.162 21.705-34.54 19.062z"></path><path fill="url(#west-gradient)" d="M1.127 54.176C.113 71.11 0 71.166 0 71.166l102.902 63.384.709-16.581zm67.001-35.293-.932 16.866 21.012 13.097 15.42-8.151Zm66.633 41.449-.38 17.01 35.332 21.79.71-17.023z"></path><path fill="url(#south-gradient)" d="m138.15 98.907-34.54 19.062-.708 16.58 34.901-18.719zm-3.389-38.575-30.773 16.87 13.676 8.685 16.717-8.545zm70.893 3.298-1 16.545-34.941 18.956.71-17.022z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205.654 134.55" class="glass absolute top-0 opacity-40 mix-blend-overlay md:motion-safe:animate-float"><path fill="#FFFFFF" d="M1.127 54.176 36.61 35.491l35.122 22.001 31.897-16.797-35.5-21.812L103.241 0l102.412 63.63-35.23 18.48-35.663-21.778-30.773 16.87 34.162 21.705-34.54 19.062z"></path><path fill="#FFFFFF" d="M1.127 54.176C.113 71.11 0 71.166 0 71.166l102.902 63.384.709-16.581zm67.001-35.293-.932 16.866 21.012 13.097 15.42-8.151Zm66.633 41.449-.38 17.01 35.332 21.79.71-17.023z"></path><path fill="#FFFFFF" d="m138.15 98.907-34.54 19.062-.708 16.58 34.901-18.719zm-3.389-38.575-30.773 16.87 13.676 8.685 16.717-8.545zm70.893 3.298-1 16.545-34.941 18.956.71-17.022z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205.654 134.55" class="block translate-y-[-12.35%] opacity-40 mix-blend-multiply md:motion-safe:animate-delay-float"><path fill="#A7A6A6" d="M1.127 54.176 36.61 35.491l35.122 22.001 31.897-16.797-35.5-21.812L103.241 0l102.412 63.63-35.23 18.48-35.663-21.778-30.773 16.87 34.162 21.705-34.54 19.062z"></path><path fill="#848383" d="M1.127 54.176C.113 71.11 0 71.166 0 71.166l102.902 63.384.709-16.581zm67.001-35.293-.932 16.866 21.012 13.097 15.42-8.151Zm66.633 41.449-.38 17.01 35.332 21.79.71-17.023z"></path><path fill="#848383" d="m138.15 98.907-34.54 19.062-.708 16.58 34.901-18.719zm-3.389-38.575-30.773 16.87 13.676 8.685 16.717-8.545zm70.893 3.298-1 16.545-34.941 18.956.71-17.022z"></path></svg></div></div></div><div class="reveal relative transition-[transform,opacity] duration-500 ease-in-out delay-150 md:motion-safe:translate-y-32 md:motion-safe:opacity-0"><div class="relative mx-auto w-full select-none opacity-40 mix-blend-color-dodge"><div class="relative w-full" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205.654 134.55" class="glass relative z-10 md:motion-safe:animate-float"><path fill="url(#face-gradient)" d="M1.127 54.176 36.61 35.491l35.122 22.001 31.897-16.797-35.5-21.812L103.241 0l102.412 63.63-35.23 18.48-35.663-21.778-30.773 16.87 34.162 21.705-34.54 19.062z"></path><path fill="url(#west-gradient)" d="M1.127 54.176C.113 71.11 0 71.166 0 71.166l102.902 63.384.709-16.581zm67.001-35.293-.932 16.866 21.012 13.097 15.42-8.151Zm66.633 41.449-.38 17.01 35.332 21.79.71-17.023z"></path><path fill="url(#south-gradient)" d="m138.15 98.907-34.54 19.062-.708 16.58 34.901-18.719zm-3.389-38.575-30.773 16.87 13.676 8.685 16.717-8.545zm70.893 3.298-1 16.545-34.941 18.956.71-17.022z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205.654 134.55" class="glass absolute top-0 opacity-40 mix-blend-overlay md:motion-safe:animate-float"><path fill="#FFFFFF" d="M1.127 54.176 36.61 35.491l35.122 22.001 31.897-16.797-35.5-21.812L103.241 0l102.412 63.63-35.23 18.48-35.663-21.778-30.773 16.87 34.162 21.705-34.54 19.062z"></path><path fill="#FFFFFF" d="M1.127 54.176C.113 71.11 0 71.166 0 71.166l102.902 63.384.709-16.581zm67.001-35.293-.932 16.866 21.012 13.097 15.42-8.151Zm66.633 41.449-.38 17.01 35.332 21.79.71-17.023z"></path><path fill="#FFFFFF" d="m138.15 98.907-34.54 19.062-.708 16.58 34.901-18.719zm-3.389-38.575-30.773 16.87 13.676 8.685 16.717-8.545zm70.893 3.298-1 16.545-34.941 18.956.71-17.022z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205.654 134.55" class="block translate-y-[-12.35%] opacity-40 mix-blend-multiply md:motion-safe:animate-delay-float"><path fill="#A7A6A6" d="M1.127 54.176 36.61 35.491l35.122 22.001 31.897-16.797-35.5-21.812L103.241 0l102.412 63.63-35.23 18.48-35.663-21.778-30.773 16.87 34.162 21.705-34.54 19.062z"></path><path fill="#848383" d="M1.127 54.176C.113 71.11 0 71.166 0 71.166l102.902 63.384.709-16.581zm67.001-35.293-.932 16.866 21.012 13.097 15.42-8.151Zm66.633 41.449-.38 17.01 35.332 21.79.71-17.023z"></path><path fill="#848383" d="m138.15 98.907-34.54 19.062-.708 16.58 34.901-18.719zm-3.389-38.575-30.773 16.87 13.676 8.685 16.717-8.545zm70.893 3.298-1 16.545-34.941 18.956.71-17.022z"></path></svg></div></div></div><div class="reveal relative transition-[transform,opacity] duration-500 ease-in-out delay-200 md:motion-safe:translate-y-32 md:motion-safe:opacity-0"><div class="relative mx-auto w-full select-none opacity-40 mix-blend-color-dodge"><div class="relative w-full" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205.654 134.55" class="glass relative z-10 md:motion-safe:animate-float"><path fill="url(#face-gradient)" d="M1.127 54.176 36.61 35.491l35.122 22.001 31.897-16.797-35.5-21.812L103.241 0l102.412 63.63-35.23 18.48-35.663-21.778-30.773 16.87 34.162 21.705-34.54 19.062z"></path><path fill="url(#west-gradient)" d="M1.127 54.176C.113 71.11 0 71.166 0 71.166l102.902 63.384.709-16.581zm67.001-35.293-.932 16.866 21.012 13.097 15.42-8.151Zm66.633 41.449-.38 17.01 35.332 21.79.71-17.023z"></path><path fill="url(#south-gradient)" d="m138.15 98.907-34.54 19.062-.708 16.58 34.901-18.719zm-3.389-38.575-30.773 16.87 13.676 8.685 16.717-8.545zm70.893 3.298-1 16.545-34.941 18.956.71-17.022z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205.654 134.55" class="glass absolute top-0 opacity-40 mix-blend-overlay md:motion-safe:animate-float"><path fill="#FFFFFF" d="M1.127 54.176 36.61 35.491l35.122 22.001 31.897-16.797-35.5-21.812L103.241 0l102.412 63.63-35.23 18.48-35.663-21.778-30.773 16.87 34.162 21.705-34.54 19.062z"></path><path fill="#FFFFFF" d="M1.127 54.176C.113 71.11 0 71.166 0 71.166l102.902 63.384.709-16.581zm67.001-35.293-.932 16.866 21.012 13.097 15.42-8.151Zm66.633 41.449-.38 17.01 35.332 21.79.71-17.023z"></path><path fill="#FFFFFF" d="m138.15 98.907-34.54 19.062-.708 16.58 34.901-18.719zm-3.389-38.575-30.773 16.87 13.676 8.685 16.717-8.545zm70.893 3.298-1 16.545-34.941 18.956.71-17.022z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205.654 134.55" class="block translate-y-[-12.35%] opacity-40 mix-blend-multiply md:motion-safe:animate-delay-float"><path fill="#A7A6A6" d="M1.127 54.176 36.61 35.491l35.122 22.001 31.897-16.797-35.5-21.812L103.241 0l102.412 63.63-35.23 18.48-35.663-21.778-30.773 16.87 34.162 21.705-34.54 19.062z"></path><path fill="#848383" d="M1.127 54.176C.113 71.11 0 71.166 0 71.166l102.902 63.384.709-16.581zm67.001-35.293-.932 16.866 21.012 13.097 15.42-8.151Zm66.633 41.449-.38 17.01 35.332 21.79.71-17.023z"></path><path fill="#848383" d="m138.15 98.907-34.54 19.062-.708 16.58 34.901-18.719zm-3.389-38.575-30.773 16.87 13.676 8.685 16.717-8.545zm70.893 3.298-1 16.545-34.941 18.956.71-17.022z"></path></svg></div></div></div><div class="reveal relative transition-[transform,opacity] duration-500 ease-in-out delay-300 hidden md:block md:motion-safe:translate-y-32 md:motion-safe:opacity-0"><div class="relative mx-auto w-full select-none opacity-40 mix-blend-color-dodge"><div class="relative w-full" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205.654 134.55" class="glass relative z-10 md:motion-safe:animate-float"><path fill="url(#face-gradient)" d="M1.127 54.176 36.61 35.491l35.122 22.001 31.897-16.797-35.5-21.812L103.241 0l102.412 63.63-35.23 18.48-35.663-21.778-30.773 16.87 34.162 21.705-34.54 19.062z"></path><path fill="url(#west-gradient)" d="M1.127 54.176C.113 71.11 0 71.166 0 71.166l102.902 63.384.709-16.581zm67.001-35.293-.932 16.866 21.012 13.097 15.42-8.151Zm66.633 41.449-.38 17.01 35.332 21.79.71-17.023z"></path><path fill="url(#south-gradient)" d="m138.15 98.907-34.54 19.062-.708 16.58 34.901-18.719zm-3.389-38.575-30.773 16.87 13.676 8.685 16.717-8.545zm70.893 3.298-1 16.545-34.941 18.956.71-17.022z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205.654 134.55" class="glass absolute top-0 opacity-40 mix-blend-overlay md:motion-safe:animate-float"><path fill="#FFFFFF" d="M1.127 54.176 36.61 35.491l35.122 22.001 31.897-16.797-35.5-21.812L103.241 0l102.412 63.63-35.23 18.48-35.663-21.778-30.773 16.87 34.162 21.705-34.54 19.062z"></path><path fill="#FFFFFF" d="M1.127 54.176C.113 71.11 0 71.166 0 71.166l102.902 63.384.709-16.581zm67.001-35.293-.932 16.866 21.012 13.097 15.42-8.151Zm66.633 41.449-.38 17.01 35.332 21.79.71-17.023z"></path><path fill="#FFFFFF" d="m138.15 98.907-34.54 19.062-.708 16.58 34.901-18.719zm-3.389-38.575-30.773 16.87 13.676 8.685 16.717-8.545zm70.893 3.298-1 16.545-34.941 18.956.71-17.022z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205.654 134.55" class="block translate-y-[-12.35%] opacity-40 mix-blend-multiply md:motion-safe:animate-delay-float"><path fill="#A7A6A6" d="M1.127 54.176 36.61 35.491l35.122 22.001 31.897-16.797-35.5-21.812L103.241 0l102.412 63.63-35.23 18.48-35.663-21.778-30.773 16.87 34.162 21.705-34.54 19.062z"></path><path fill="#848383" d="M1.127 54.176C.113 71.11 0 71.166 0 71.166l102.902 63.384.709-16.581zm67.001-35.293-.932 16.866 21.012 13.097 15.42-8.151Zm66.633 41.449-.38 17.01 35.332 21.79.71-17.023z"></path><path fill="#848383" d="m138.15 98.907-34.54 19.062-.708 16.58 34.901-18.719zm-3.389-38.575-30.773 16.87 13.676 8.685 16.717-8.545zm70.893 3.298-1 16.545-34.941 18.956.71-17.022z"></path></svg></div></div></div><div class="reveal relative transition-[transform,opacity] duration-500 ease-in-out delay-500 hidden md:block md:motion-safe:translate-y-32 md:motion-safe:opacity-0"><div class="relative mx-auto w-full select-none opacity-40 mix-blend-color-dodge"><div class="relative w-full" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205.654 134.55" class="glass relative z-10 md:motion-safe:animate-float"><path fill="url(#face-gradient)" d="M1.127 54.176 36.61 35.491l35.122 22.001 31.897-16.797-35.5-21.812L103.241 0l102.412 63.63-35.23 18.48-35.663-21.778-30.773 16.87 34.162 21.705-34.54 19.062z"></path><path fill="url(#west-gradient)" d="M1.127 54.176C.113 71.11 0 71.166 0 71.166l102.902 63.384.709-16.581zm67.001-35.293-.932 16.866 21.012 13.097 15.42-8.151Zm66.633 41.449-.38 17.01 35.332 21.79.71-17.023z"></path><path fill="url(#south-gradient)" d="m138.15 98.907-34.54 19.062-.708 16.58 34.901-18.719zm-3.389-38.575-30.773 16.87 13.676 8.685 16.717-8.545zm70.893 3.298-1 16.545-34.941 18.956.71-17.022z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205.654 134.55" class="glass absolute top-0 opacity-40 mix-blend-overlay md:motion-safe:animate-float"><path fill="#FFFFFF" d="M1.127 54.176 36.61 35.491l35.122 22.001 31.897-16.797-35.5-21.812L103.241 0l102.412 63.63-35.23 18.48-35.663-21.778-30.773 16.87 34.162 21.705-34.54 19.062z"></path><path fill="#FFFFFF" d="M1.127 54.176C.113 71.11 0 71.166 0 71.166l102.902 63.384.709-16.581zm67.001-35.293-.932 16.866 21.012 13.097 15.42-8.151Zm66.633 41.449-.38 17.01 35.332 21.79.71-17.023z"></path><path fill="#FFFFFF" d="m138.15 98.907-34.54 19.062-.708 16.58 34.901-18.719zm-3.389-38.575-30.773 16.87 13.676 8.685 16.717-8.545zm70.893 3.298-1 16.545-34.941 18.956.71-17.022z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205.654 134.55" class="block translate-y-[-12.35%] opacity-40 mix-blend-multiply md:motion-safe:animate-delay-float"><path fill="#A7A6A6" d="M1.127 54.176 36.61 35.491l35.122 22.001 31.897-16.797-35.5-21.812L103.241 0l102.412 63.63-35.23 18.48-35.663-21.778-30.773 16.87 34.162 21.705-34.54 19.062z"></path><path fill="#848383" d="M1.127 54.176C.113 71.11 0 71.166 0 71.166l102.902 63.384.709-16.581zm67.001-35.293-.932 16.866 21.012 13.097 15.42-8.151Zm66.633 41.449-.38 17.01 35.332 21.79.71-17.023z"></path><path fill="#848383" d="m138.15 98.907-34.54 19.062-.708 16.58 34.901-18.719zm-3.389-38.575-30.773 16.87 13.676 8.685 16.717-8.545zm70.893 3.298-1 16.545-34.941 18.956.71-17.022z"></path></svg></div></div></div></div><div class="absolute inset-0 bg-gradient-to-t from-black-2 via-transparent to-transparent"></div></div><main tabindex="-1" role="main" id="main"><div class="min-h-[150vh]"><div class="hero"><div class="container relative flex h-full items-center justify-center pb-80 pt-160 sm:py-180 lg:py-220"><div class="text-center"><h1 class="mb-24 focus:outline-none md:mb-32" tabindex="-1">Showcase</h1><p class="balance-text mx-auto mb-24 max-w-prose text-18 md:mb-40 md:text-22">Discover how brands across the world are building creative custom experiences with Hydrogen.</p></div></div></div><div class="wide-container grid gap-x-32 gap-y-30 sm:gap-y-80 md:grid-cols-3"><div class="reveal relative transition-[transform,opacity] duration-500 ease-in-out pb-40 md:motion-safe:translate-y-32 md:motion-safe:opacity-0"><div class="mb-24 w-full object-cover aspect-[4/3] relative before:pointer-events-none before:transform-gpu before:absolute before:left-0 before:top-0 before:z-[-1] before:h-full before:w-full before:bg-green-turquoise before:opacity-0 before:blur-[34px] before:transition-opacity before:content-[""] hover:before:opacity-100" data-id="gid://shopify/Video/51371787747350" style="aspect-ratio:640 / 480"></div><h2 class="title4 mb-12">Lady Gaga</h2><div class="mb-24 flex flex-wrap gap-16"><span class="no-wrap"><a href="https://www.ladygaga.com/us-en/" target="_blank" rel="noreferrer" class="code underline hover:no-underline" data-event-page="showcase" data-event-category="showcase" data-event-action="click-link" data-event-label="Website">Website</a><span class="icon inline-block bg-current hover:bg-current ml-4 h-13 w-13" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/external.svg?v=1691688830);-webkit-mask-size:contain;transform:translateZ(0)"></span></span><span class="no-wrap"><a href="https://commerce-ui.com/?utm_source=partner&utm_medium=website&utm_campaign=shopify&utm_term=hydrogen" target="_blank" rel="noreferrer" class="code underline hover:no-underline" data-event-page="showcase" data-event-category="showcase" data-event-action="click-link" data-event-label="Agency: Commerce-UI">Agency: Commerce-UI</a><span class="icon inline-block bg-current hover:bg-current ml-4 h-13 w-13" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/external.svg?v=1691688830);-webkit-mask-size:contain;transform:translateZ(0)"></span></span></div><ul class="flex flex-wrap gap-8"><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">MUX</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Sanity</li></ul></div><div class="reveal relative transition-[transform,opacity] duration-500 ease-in-out pb-40 md:delay-100 md:motion-safe:translate-y-32 md:motion-safe:opacity-0"><div class="mb-24 w-full object-cover aspect-[4/3] relative before:pointer-events-none before:transform-gpu before:absolute before:left-0 before:top-0 before:z-[-1] before:h-full before:w-full before:bg-green-turquoise before:opacity-0 before:blur-[34px] before:transition-opacity before:content-[""] hover:before:opacity-100" data-id="gid://shopify/Video/34830634876950" style="aspect-ratio:640 / 480"></div><h2 class="title4 mb-12">Patta x Tommy</h2><div class="mb-24 flex flex-wrap gap-16"><span class="no-wrap"><a href="https://www.askphill.com/" target="_blank" rel="noreferrer" class="code underline hover:no-underline" data-event-page="showcase" data-event-category="showcase" data-event-action="click-link" data-event-label="Agency: Ask Phill">Agency: Ask Phill</a><span class="icon inline-block bg-current hover:bg-current ml-4 h-13 w-13" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/external.svg?v=1691688830);-webkit-mask-size:contain;transform:translateZ(0)"></span></span></div><ul class="flex flex-wrap gap-8"><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Klavyio</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Reamaze</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Shopify Flow</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Shopify Launchpad</li></ul></div><div class="reveal relative transition-[transform,opacity] duration-500 ease-in-out pb-40 md:delay-200 md:motion-safe:translate-y-32 md:motion-safe:opacity-0"><div class="mb-24 w-full object-cover aspect-[4/3] relative before:pointer-events-none before:transform-gpu before:absolute before:left-0 before:top-0 before:z-[-1] before:h-full before:w-full before:bg-green-turquoise before:opacity-0 before:blur-[34px] before:transition-opacity before:content-[""] hover:before:opacity-100" data-id="gid://shopify/Video/34830634942486" style="aspect-ratio:640 / 480"></div><h2 class="title4 mb-12">Drake Related</h2><div class="mb-24 flex flex-wrap gap-16"><span class="no-wrap"><a href="https://drakerelated.com/rooms/el-chico-studios" target="_blank" rel="noreferrer" class="code underline hover:no-underline" data-event-page="showcase" data-event-category="showcase" data-event-action="click-link" data-event-label="Website">Website</a><span class="icon inline-block bg-current hover:bg-current ml-4 h-13 w-13" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/external.svg?v=1691688830);-webkit-mask-size:contain;transform:translateZ(0)"></span></span><span class="no-wrap"><a href="https://tidalcommerce.ca/" target="_blank" rel="noreferrer" class="code underline hover:no-underline" data-event-page="showcase" data-event-category="showcase" data-event-action="click-link" data-event-label="Agency: Tidal Commerce">Agency: Tidal Commerce</a><span class="icon inline-block bg-current hover:bg-current ml-4 h-13 w-13" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/external.svg?v=1691688830);-webkit-mask-size:contain;transform:translateZ(0)"></span></span></div><ul class="flex flex-wrap gap-8"><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Contentful</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Klavyio</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Metafields</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Shopify Collective</li></ul></div><div class="reveal relative transition-[transform,opacity] duration-500 ease-in-out pb-40 md:motion-safe:translate-y-32 md:motion-safe:opacity-0"><div class="mb-24 w-full object-cover aspect-[4/3] relative before:pointer-events-none before:transform-gpu before:absolute before:left-0 before:top-0 before:z-[-1] before:h-full before:w-full before:bg-green-turquoise before:opacity-0 before:blur-[34px] before:transition-opacity before:content-[""] hover:before:opacity-100" data-id="gid://shopify/Video/34830635008022" style="aspect-ratio:640 / 480"></div><h2 class="title4 mb-12">Denim Tears</h2><div class="mb-24 flex flex-wrap gap-16"><span class="no-wrap"><a href="https://denimtears.com/ca/" target="_blank" rel="noreferrer" class="code underline hover:no-underline" data-event-page="showcase" data-event-category="showcase" data-event-action="click-link" data-event-label="Website">Website</a><span class="icon inline-block bg-current hover:bg-current ml-4 h-13 w-13" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/external.svg?v=1691688830);-webkit-mask-size:contain;transform:translateZ(0)"></span></span><span class="no-wrap"><a href="https://www.kampgrizzly.com/" target="_blank" rel="noreferrer" class="code underline hover:no-underline" data-event-page="showcase" data-event-category="showcase" data-event-action="click-link" data-event-label="Agency: Kamp Grizzly">Agency: Kamp Grizzly</a><span class="icon inline-block bg-current hover:bg-current ml-4 h-13 w-13" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/external.svg?v=1691688830);-webkit-mask-size:contain;transform:translateZ(0)"></span></span></div><ul class="flex flex-wrap gap-8"><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Afterpay</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Amplitude</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Klarna</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Klavyio</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Sanity</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Signifyd</li></ul></div><div class="reveal relative transition-[transform,opacity] duration-500 ease-in-out pb-40 md:delay-100 md:motion-safe:translate-y-32 md:motion-safe:opacity-0"><div class="mb-24 w-full object-cover aspect-[4/3] relative before:pointer-events-none before:transform-gpu before:absolute before:left-0 before:top-0 before:z-[-1] before:h-full before:w-full before:bg-green-turquoise before:opacity-0 before:blur-[34px] before:transition-opacity before:content-[""] hover:before:opacity-100" data-id="gid://shopify/Video/34830635073558" style="aspect-ratio:640 / 480"></div><h2 class="title4 mb-12">Baboon to the moon</h2><div class="mb-24 flex flex-wrap gap-16"><span class="no-wrap"><a href="https://baboontothemoon.com/" target="_blank" rel="noreferrer" class="code underline hover:no-underline" data-event-page="showcase" data-event-category="showcase" data-event-action="click-link" data-event-label="Website">Website</a><span class="icon inline-block bg-current hover:bg-current ml-4 h-13 w-13" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/external.svg?v=1691688830);-webkit-mask-size:contain;transform:translateZ(0)"></span></span></div><ul class="flex flex-wrap gap-8"><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Attentive</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Criteo</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Klavyio</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Loop Returns</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Sanity</li></ul></div><div class="reveal relative transition-[transform,opacity] duration-500 ease-in-out pb-40 md:delay-200 md:motion-safe:translate-y-32 md:motion-safe:opacity-0"><div class="mb-24 w-full object-cover aspect-[4/3] relative before:pointer-events-none before:transform-gpu before:absolute before:left-0 before:top-0 before:z-[-1] before:h-full before:w-full before:bg-green-turquoise before:opacity-0 before:blur-[34px] before:transition-opacity before:content-[""] hover:before:opacity-100" data-id="gid://shopify/Video/32237899022358" style="aspect-ratio:640 / 480"></div><h2 class="title4 mb-12">Manors Golf</h2><div class="mb-24 flex flex-wrap gap-16"><span class="no-wrap"><a href="https://manorsgolf.com/" target="_blank" rel="noreferrer" class="code underline hover:no-underline" data-event-page="showcase" data-event-category="showcase" data-event-action="click-link" data-event-label="Website">Website</a><span class="icon inline-block bg-current hover:bg-current ml-4 h-13 w-13" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/external.svg?v=1691688830);-webkit-mask-size:contain;transform:translateZ(0)"></span></span></div><ul class="flex flex-wrap gap-8"><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Google & YouTube</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Klavyio</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Orderly Emails</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Sanity</li></ul></div><div class="reveal relative transition-[transform,opacity] duration-500 ease-in-out pb-40 md:motion-safe:translate-y-32 md:motion-safe:opacity-0"><div class="mb-24 w-full object-cover aspect-[4/3] relative before:pointer-events-none before:transform-gpu before:absolute before:left-0 before:top-0 before:z-[-1] before:h-full before:w-full before:bg-green-turquoise before:opacity-0 before:blur-[34px] before:transition-opacity before:content-[""] hover:before:opacity-100" data-id="gid://shopify/Video/32237899055126" style="aspect-ratio:640 / 480"></div><h2 class="title4 mb-12">Atoms</h2><div class="mb-24 flex flex-wrap gap-16"><span class="no-wrap"><a href="https://atoms.com/" target="_blank" rel="noreferrer" class="code underline hover:no-underline" data-event-page="showcase" data-event-category="showcase" data-event-action="click-link" data-event-label="Website">Website</a><span class="icon inline-block bg-current hover:bg-current ml-4 h-13 w-13" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/external.svg?v=1691688830);-webkit-mask-size:contain;transform:translateZ(0)"></span></span></div><ul class="flex flex-wrap gap-8"><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Klavyio</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Sanity</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Zonos</li></ul></div><div class="reveal relative transition-[transform,opacity] duration-500 ease-in-out pb-40 md:delay-100 md:motion-safe:translate-y-32 md:motion-safe:opacity-0"><div class="mb-24 w-full object-cover aspect-[4/3] relative before:pointer-events-none before:transform-gpu before:absolute before:left-0 before:top-0 before:z-[-1] before:h-full before:w-full before:bg-green-turquoise before:opacity-0 before:blur-[34px] before:transition-opacity before:content-[""] hover:before:opacity-100" data-id="gid://shopify/Video/32237899087894" style="aspect-ratio:640 / 480"></div><h2 class="title4 mb-12">Chubbies</h2><div class="mb-24 flex flex-wrap gap-16"><span class="no-wrap"><a href="https://www.chubbiesshorts.com/" target="_blank" rel="noreferrer" class="code underline hover:no-underline" data-event-page="showcase" data-event-category="showcase" data-event-action="click-link" data-event-label="Website">Website</a><span class="icon inline-block bg-current hover:bg-current ml-4 h-13 w-13" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/external.svg?v=1691688830);-webkit-mask-size:contain;transform:translateZ(0)"></span></span><span class="no-wrap"><a href="https://theformfactory.co/" target="_blank" rel="noreferrer" class="code underline hover:no-underline" data-event-page="showcase" data-event-category="showcase" data-event-action="click-link" data-event-label="Agency: Form Factory">Agency: Form Factory</a><span class="icon inline-block bg-current hover:bg-current ml-4 h-13 w-13" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/external.svg?v=1691688830);-webkit-mask-size:contain;transform:translateZ(0)"></span></span></div><ul class="flex flex-wrap gap-8"><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Attentive</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Builder.io</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Dynamic Yield</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">FullStory</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Gladly</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Klavyio</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Nosto</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Yotpo</li></ul></div><div class="reveal relative transition-[transform,opacity] duration-500 ease-in-out pb-40 md:delay-200 md:motion-safe:translate-y-32 md:motion-safe:opacity-0"><div class="mb-24 w-full object-cover aspect-[4/3] relative before:pointer-events-none before:transform-gpu before:absolute before:left-0 before:top-0 before:z-[-1] before:h-full before:w-full before:bg-green-turquoise before:opacity-0 before:blur-[34px] before:transition-opacity before:content-[""] hover:before:opacity-100" data-id="gid://shopify/Video/32237899382806" style="aspect-ratio:640 / 480"></div><h2 class="title4 mb-12">Nour Hammour</h2><div class="mb-24 flex flex-wrap gap-16"><span class="no-wrap"><a href="https://nour-hammour.com/" target="_blank" rel="noreferrer" class="code underline hover:no-underline" data-event-page="showcase" data-event-category="showcase" data-event-action="click-link" data-event-label="Website">Website</a><span class="icon inline-block bg-current hover:bg-current ml-4 h-13 w-13" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/external.svg?v=1691688830);-webkit-mask-size:contain;transform:translateZ(0)"></span></span><span class="no-wrap"><a href="https://commerce-ui.com/" target="_blank" rel="noreferrer" class="code underline hover:no-underline" data-event-page="showcase" data-event-category="showcase" data-event-action="click-link" data-event-label="Agency: Commerce-UI">Agency: Commerce-UI</a><span class="icon inline-block bg-current hover:bg-current ml-4 h-13 w-13" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/external.svg?v=1691688830);-webkit-mask-size:contain;transform:translateZ(0)"></span></span></div><ul class="flex flex-wrap gap-8"><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Easysize</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Klavyio</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">MUX</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Sanity</li></ul></div><div class="reveal relative transition-[transform,opacity] duration-500 ease-in-out pb-40 md:motion-safe:translate-y-32 md:motion-safe:opacity-0"><div class="mb-24 w-full object-cover aspect-[4/3] relative before:pointer-events-none before:transform-gpu before:absolute before:left-0 before:top-0 before:z-[-1] before:h-full before:w-full before:bg-green-turquoise before:opacity-0 before:blur-[34px] before:transition-opacity before:content-[""] hover:before:opacity-100" data-id="gid://shopify/Video/32237899513878" style="aspect-ratio:640 / 480"></div><h2 class="title4 mb-12">ISLE USA</h2><div class="mb-24 flex flex-wrap gap-16"><span class="no-wrap"><a href="https://islesurfandsup.com/" target="_blank" rel="noreferrer" class="code underline hover:no-underline" data-event-page="showcase" data-event-category="showcase" data-event-action="click-link" data-event-label="Website">Website</a><span class="icon inline-block bg-current hover:bg-current ml-4 h-13 w-13" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/external.svg?v=1691688830);-webkit-mask-size:contain;transform:translateZ(0)"></span></span><span class="no-wrap"><a href="https://theformfactory.co/" target="_blank" rel="noreferrer" class="code underline hover:no-underline" data-event-page="showcase" data-event-category="showcase" data-event-action="click-link" data-event-label="Agency: Form Factory">Agency: Form Factory</a><span class="icon inline-block bg-current hover:bg-current ml-4 h-13 w-13" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/external.svg?v=1691688830);-webkit-mask-size:contain;transform:translateZ(0)"></span></span></div><ul class="flex flex-wrap gap-8"><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Attentive</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Dynamic Yield</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">FullStory</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">GoDaddy</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Klavyio</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Shogun</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Yotpo</li></ul></div><div class="reveal relative transition-[transform,opacity] duration-500 ease-in-out pb-40 md:delay-100 md:motion-safe:translate-y-32 md:motion-safe:opacity-0"><div class="mb-24 w-full object-cover aspect-[4/3] relative before:pointer-events-none before:transform-gpu before:absolute before:left-0 before:top-0 before:z-[-1] before:h-full before:w-full before:bg-green-turquoise before:opacity-0 before:blur-[34px] before:transition-opacity before:content-[""] hover:before:opacity-100" data-id="gid://shopify/Video/32237899546646" style="aspect-ratio:640 / 480"></div><h2 class="title4 mb-12">Oru Kayak</h2><div class="mb-24 flex flex-wrap gap-16"><span class="no-wrap"><a href="https://www.orukayak.com/" target="_blank" rel="noreferrer" class="code underline hover:no-underline" data-event-page="showcase" data-event-category="showcase" data-event-action="click-link" data-event-label="Website">Website</a><span class="icon inline-block bg-current hover:bg-current ml-4 h-13 w-13" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/external.svg?v=1691688830);-webkit-mask-size:contain;transform:translateZ(0)"></span></span><span class="no-wrap"><a href="https://theformfactory.co/" target="_blank" rel="noreferrer" class="code underline hover:no-underline" data-event-page="showcase" data-event-category="showcase" data-event-action="click-link" data-event-label="Agency: Form Factory">Agency: Form Factory</a><span class="icon inline-block bg-current hover:bg-current ml-4 h-13 w-13" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/external.svg?v=1691688830);-webkit-mask-size:contain;transform:translateZ(0)"></span></span></div><ul class="flex flex-wrap gap-8"><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Attentive</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Dynamic Yield</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">FullStory</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Gorgias</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Yotpo</li></ul></div><div class="reveal relative transition-[transform,opacity] duration-500 ease-in-out pb-40 md:delay-200 md:motion-safe:translate-y-32 md:motion-safe:opacity-0"><div class="mb-24 w-full object-cover aspect-[4/3] relative before:pointer-events-none before:transform-gpu before:absolute before:left-0 before:top-0 before:z-[-1] before:h-full before:w-full before:bg-green-turquoise before:opacity-0 before:blur-[34px] before:transition-opacity before:content-[""] hover:before:opacity-100" data-id="gid://shopify/Video/32237899579414" style="aspect-ratio:640 / 480"></div><h2 class="title4 mb-12">Honeylove</h2><div class="mb-24 flex flex-wrap gap-16"><span class="no-wrap"><a href="https://www.honeylove.com/en-ca/" target="_blank" rel="noreferrer" class="code underline hover:no-underline" data-event-page="showcase" data-event-category="showcase" data-event-action="click-link" data-event-label="Website">Website</a><span class="icon inline-block bg-current hover:bg-current ml-4 h-13 w-13" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/external.svg?v=1691688830);-webkit-mask-size:contain;transform:translateZ(0)"></span></span></div><ul class="flex flex-wrap gap-8"><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Klavyio</li><li class="inline-block rounded-full border-2 border-[rgba(244,244,245,0.20)] px-14 py-4 font-jetbrains text-14 font-bold leading-tight">Okendo</li></ul></div></div></div><section class="relative"><div class="absolute inset-0 overflow-hidden bg-navy"><div class="gradient-container absolute inset-0 bg-gradient-sm bg-cover opacity-50 mix-blend-overlay md:bg-gradient bg-top"></div><div class="absolute inset-0"><div class="absolute h-[40vh] w-[75vh] bg-gradient-radial from-turquoise to-transparent to-70% opacity-40 md:h-[22vw] md:w-[75vw] left-0 top-1/2"></div><div class="absolute aspect-video w-3/4 bg-gradient-radial from-green to-transparent to-70% opacity-30 right-0 top-0 "></div></div><div class="absolute inset-0 from-black-2 to-transparent to-10% bg-gradient-to-b"></div></div><div class="absolute inset-0 h-full w-full mix-blend-overlay bg-[url('https://cdn.shopify.com/s/files/1/0598/4822/8886/files/grain.png?v=1692383484')] animation-play-state-paused"></div><div class="relative mx-auto w-3/4 opacity-40 mix-blend-color-dodge md:w-740 lg:w-1000"><div class="absolute w-full" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205.654 134.55" class="glass relative z-10"><path fill="url(#face-gradient)" d="M1.127 54.176 36.61 35.491l35.122 22.001 31.897-16.797-35.5-21.812L103.241 0l102.412 63.63-35.23 18.48-35.663-21.778-30.773 16.87 34.162 21.705-34.54 19.062z"></path><path fill="url(#west-gradient)" d="M1.127 54.176C.113 71.11 0 71.166 0 71.166l102.902 63.384.709-16.581zm67.001-35.293-.932 16.866 21.012 13.097 15.42-8.151Zm66.633 41.449-.38 17.01 35.332 21.79.71-17.023z"></path><path fill="url(#south-gradient)" d="m138.15 98.907-34.54 19.062-.708 16.58 34.901-18.719zm-3.389-38.575-30.773 16.87 13.676 8.685 16.717-8.545zm70.893 3.298-1 16.545-34.941 18.956.71-17.022z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205.654 134.55" class="glass absolute top-0 opacity-40 mix-blend-overlay"><path fill="#FFFFFF" d="M1.127 54.176 36.61 35.491l35.122 22.001 31.897-16.797-35.5-21.812L103.241 0l102.412 63.63-35.23 18.48-35.663-21.778-30.773 16.87 34.162 21.705-34.54 19.062z"></path><path fill="#FFFFFF" d="M1.127 54.176C.113 71.11 0 71.166 0 71.166l102.902 63.384.709-16.581zm67.001-35.293-.932 16.866 21.012 13.097 15.42-8.151Zm66.633 41.449-.38 17.01 35.332 21.79.71-17.023z"></path><path fill="#FFFFFF" d="m138.15 98.907-34.54 19.062-.708 16.58 34.901-18.719zm-3.389-38.575-30.773 16.87 13.676 8.685 16.717-8.545zm70.893 3.298-1 16.545-34.941 18.956.71-17.022z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205.654 134.55" class="block translate-y-[-12.35%] opacity-40 mix-blend-multiply"><path fill="#A7A6A6" d="M1.127 54.176 36.61 35.491l35.122 22.001 31.897-16.797-35.5-21.812L103.241 0l102.412 63.63-35.23 18.48-35.663-21.778-30.773 16.87 34.162 21.705-34.54 19.062z"></path><path fill="#848383" d="M1.127 54.176C.113 71.11 0 71.166 0 71.166l102.902 63.384.709-16.581zm67.001-35.293-.932 16.866 21.012 13.097 15.42-8.151Zm66.633 41.449-.38 17.01 35.332 21.79.71-17.023z"></path><path fill="#848383" d="m138.15 98.907-34.54 19.062-.708 16.58 34.901-18.719zm-3.389-38.575-30.773 16.87 13.676 8.685 16.717-8.545zm70.893 3.298-1 16.545-34.941 18.956.71-17.022z"></path></svg></div></div><div class="container xl-pt-225 relative flex flex-col pt-140 text-center md:pt-160 lg:pt-220"><h2 class="title1 pb-24">Get building</h2><p class="pb-40">Spin up a new Hydrogen app in minutes.</p><button class="items-center font-jetbrains text-16 font-bold transition-[colors_transform] flex hover:border-gradient hover:border-gradient-blue-turquoise focus:border-gradient focus:border-gradient-blue-turquoise gap-8 text-white hover:-translate-y-2 leading-1 border-[3px] bg-black px-32 py-24 hover:underline focus:underline mx-auto mb-120 hidden md:flex lg:mb-160" data-event-page="/showcase" data-event-category="pre-footer" data-event-action="click-link" data-event-label="npm create @shopify/hydrogen@latest"><span class="h-18 w-18"><span class="icon inline-block h-18 w-18 bg-white hover:bg-white focus:bg-white" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/copy.svg?v=1691509015);-webkit-mask-size:contain;transform:translateZ(0)"></span></span><span class="">npm create @shopify/hydrogen@latest</span></button><a href="https://shopify.dev/docs/custom-storefronts/hydrogen" target="_blank" rel="noreferrer" class="items-center font-jetbrains text-16 font-bold transition-[colors_transform] inline-flex hover:border-gradient hover:border-gradient-blue-turquoise focus:border-gradient focus:border-gradient-blue-turquoise gap-8 text-white hover:-translate-y-2 leading-1 border-[3px] bg-black px-32 py-24 hover:underline focus:underline mx-auto mb-80 inline-flex md:hidden" data-event-page="/showcase" data-event-category="pre-footer" data-event-action="click-link" data-event-label="developer-documentation"><span class="">See documentation</span></a><div class="-mx-16 mb-38 grid grid-cols-2 gap-50 bg-black-2 p-40 md:mx-auto lg:grid-cols-4 "><div class="text-left"><span class="icon inline-block bg-current hover:bg-current w-32 h-32" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/docs.svg?v=1692652070);-webkit-mask-size:contain;transform:translateZ(0)"></span><h3 class="title5 mb-8">Learn Hydrogen</h3><a href="https://shopify.dev/docs/custom-storefronts/hydrogen" target="_blank" rel="noreferrer" class="items-center font-jetbrains text-16 font-bold transition-[colors_transform] inline-flex underline hover:no-underline focus:no-underline title5 text-left" data-event-page="/showcase" data-event-category="pre-footer" data-event-action="click-link" data-event-label="Learn Hydrogen"><span class="">Read Hydrogen docs and guides</span></a></div><div class="text-left"><span class="icon inline-block bg-current hover:bg-current w-32 h-32" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/github.svg?v=1691509015);-webkit-mask-size:contain;transform:translateZ(0)"></span><h3 class="title5 mb-8">Build with us</h3><a href="https://github.com/Shopify/hydrogen" target="_blank" rel="noreferrer" class="items-center font-jetbrains text-16 font-bold transition-[colors_transform] inline-flex underline hover:no-underline focus:no-underline title5 text-left" data-event-page="/showcase" data-event-category="pre-footer" data-event-action="click-link" data-event-label="Build with us"><span class="">Hydrogen is 100% open source</span></a></div><div class="text-left"><span class="icon inline-block bg-current hover:bg-current w-32 h-32" aria-hidden="true" style="--mask-url:url(https://cdn.shopify.com/s/files/1/0598/4822/8886/files/youtube.svg?v=1692652070);-webkit-mask-size:contain;transform:translateZ(0)"></span><h3 class="title5 mb-8">Learn Hydrogen</h3><a href="https://www.youtube.com/playlist?list=PLvQF73bM4-5WiRsA0C8rsFPXKtKCiuLtT" target="_blank" rel="noreferrer" class="items-center font-jetbrains text-16 font-bold transition-[colors_transform] inline-flex underline hover:no-underline focus:no-underline title5 text-left" data-event-page="/showcase" data-event-category="pre-footer" data-event-action="click-link" data-event-label="Learn Hydrogen"><span class="">Code-along tutorials for development tips and insights</span></a></div></div></div></section></main><footer class="relative w-full bg-black-2"><h2 class="sr-only">More links</h2><nav><div class="container flex flex-wrap py-32 md:gap-40 md:py-60"><div class="md:pl-auto md:pr-auto mb-40 w-1/2 odd:pr-20 even:pl-20 md:w-auto md:min-w-200 xl:min-w-235"><h3 class="mb-23 font-shopify text-16 font-bold">Updates and News</h3><ul><li class="text-16 mb-8"><a href="https://shopify.dev/changelog" target="_blank" rel="noreferrer" data-event-category="footer" data-event-action="click-link" data-event-page="/showcase" data-event-label="Developer changelog" aria-label="Link to Shopify Developer changelog" class="hover:underline focus:underline">Developer changelog</a></li><li class="text-16 mb-8"><a href="https://www.shopify.com/partners/blog" target="_blank" rel="noreferrer" data-event-category="footer" data-event-action="click-link" data-event-page="/showcase" data-event-label="Partner blog" aria-label="Link to Shopify Partner blog" class="hover:underline focus:underline">Partner blog</a></li><li class="text-16 mb-8"><a href="https://shopify.engineering/" target="_blank" rel="noreferrer" data-event-category="footer" data-event-action="click-link" data-event-page="/showcase" data-event-label="Engineering blog" aria-label="Link to Shopify Engineering blog" class="hover:underline focus:underline">Engineering blog</a></li><li class="text-16 mb-8"><a href="https://ux.shopify.com/" target="_blank" rel="noreferrer" data-event-category="footer" data-event-action="click-link" data-event-page="/showcase" data-event-label="UX blog" aria-label="Link to Shopify UX blog" class="hover:underline focus:underline">UX blog</a></li></ul></div><div class="md:pl-auto md:pr-auto mb-40 w-1/2 odd:pr-20 even:pl-20 md:w-auto md:min-w-200 xl:min-w-235"><h3 class="mb-23 font-shopify text-16 font-bold">Community</h3><ul><li class="text-16 mb-8"><a href="https://community.shopify.com/c/partners-and-developers/ct-p/appdev" target="_blank" rel="noreferrer" data-event-category="footer" data-event-action="click-link" data-event-page="/showcase" data-event-label="Developer forum" aria-label="Link to Shopify Developer forum" class="hover:underline focus:underline">Developer forum</a></li><li class="text-16 mb-8"><a href="https://twitter.com/shopifydevs" target="_blank" rel="noreferrer" data-event-category="footer" data-event-action="click-link" data-event-page="/showcase" data-event-label="Twitter" aria-label="Link to Shopify Twitter" class="hover:underline focus:underline">Twitter</a></li><li class="text-16 mb-8"><a href="https://www.youtube.com/c/shopifydevs" target="_blank" rel="noreferrer" data-event-category="footer" data-event-action="click-link" data-event-page="/showcase" data-event-label="YouTube" aria-label="Link to Shopify YouTube" class="hover:underline focus:underline">YouTube</a></li></ul></div><div class="md:pl-auto md:pr-auto mb-40 w-1/2 odd:pr-20 even:pl-20 md:w-auto md:min-w-200 xl:min-w-235"><h3 class="mb-23 font-shopify text-16 font-bold">Events</h3><ul><li class="text-16 mb-8"><a href="https://www.editions.dev/" target="_blank" rel="noreferrer" data-event-category="footer" data-event-action="click-link" data-event-page="/showcase" data-event-label="Editions.dev" aria-label="Link to Shopify Editions.dev" class="hover:underline focus:underline">Editions.dev</a></li><li class="text-16 mb-8"><a href="https://events.shopify.com/partners" target="_blank" rel="noreferrer" data-event-category="footer" data-event-action="click-link" data-event-page="/showcase" data-event-label="Meetups" aria-label="Link to Shopify Meetups" class="hover:underline focus:underline">Meetups</a></li></ul></div><div class="md:pl-auto md:pr-auto mb-40 w-1/2 odd:pr-20 even:pl-20 md:w-auto md:min-w-200 xl:min-w-235"><h3 class="mb-23 font-shopify text-16 font-bold">Legal</h3><ul><li class="text-16 mb-8"><a href="https://www.shopify.com/legal/terms" target="_blank" rel="noreferrer" data-event-category="footer" data-event-action="click-link" data-event-page="/showcase" data-event-label="Terms of Service" aria-label="Link to Shopify Terms of Service" class="hover:underline focus:underline">Terms of Service</a></li><li class="text-16 mb-8"><a href="https://www.shopify.com/legal/api-terms" target="_blank" rel="noreferrer" data-event-category="footer" data-event-action="click-link" data-event-page="/showcase" data-event-label="API Terms of Service" aria-label="Link to Shopify API Terms of Service" class="hover:underline focus:underline">API Terms of Service</a></li><li class="text-16 mb-8"><a href="https://www.shopify.com/legal/privacy" target="_blank" rel="noreferrer" data-event-category="footer" data-event-action="click-link" data-event-page="/showcase" data-event-label="Privacy policy" aria-label="Link to Shopify Privacy policy" class="hover:underline focus:underline">Privacy policy</a></li></ul></div></div></nav><div class="container pb-32 md:pb-60"><nav><ul class="flex flex-wrap justify-center gap-16 sm:static sm:justify-start"><li class="text-16 font-bold sm:inline sm:mr-16 md:mr-24"><a href="https://www.shopify.com/about" target="_blank" rel="noreferrer" data-event-category="footer" data-event-action="click-link" data-event-page="/showcase" data-event-label="About Shopify" aria-label="Link to Shopify About Shopify" class="hover:underline focus:underline">About Shopify</a></li><li class="text-16 font-bold sm:inline sm:mr-16 md:mr-24"><a href="https://www.shopify.com/plus" target="_blank" rel="noreferrer" data-event-category="footer" data-event-action="click-link" data-event-page="/showcase" data-event-label="Shopify Plus" aria-label="Link to Shopify Shopify Plus" class="hover:underline focus:underline">Shopify Plus</a></li><li class="text-16 font-bold sm:inline sm:mr-16 md:mr-24"><a href="https://www.shopify.com/careers" target="_blank" rel="noreferrer" data-event-category="footer" data-event-action="click-link" data-event-page="/showcase" data-event-label="Careers" aria-label="Link to Shopify Careers" class="hover:underline focus:underline">Careers</a></li><li class="text-16 font-bold sm:inline sm:mr-16 md:mr-24"><a href="https://investors.shopify.com/home/" target="_blank" rel="noreferrer" data-event-category="footer" data-event-action="click-link" data-event-page="/showcase" data-event-label="Investors" aria-label="Link to Shopify Investors" class="hover:underline focus:underline">Investors</a></li><li class="text-16 font-bold sm:inline sm:mr-16 md:mr-24"><a href="https://news.shopify.com/" target="_blank" rel="noreferrer" data-event-category="footer" data-event-action="click-link" data-event-page="/showcase" data-event-label="Press and Media" aria-label="Link to Shopify Press and Media" class="hover:underline focus:underline">Press and Media</a></li></ul></nav></div></footer><script>((s,l)=>{if(!window.history.state||!window.history.state.key){let u=Math.random().toString(32).slice(2);window.history.replaceState({key:u},"")}try{let c=JSON.parse(sessionStorage.getItem(s)||"{}")[l||window.history.state.key];typeof c=="number"&&window.scrollTo(0,c)}catch(u){console.error(u),sessionStorage.removeItem(s)}})("positions", null)</script><link rel="modulepreload" href="https://cdn.shopify.com/oxygen-v2/25760/10053/20707/1208616/build/manifest-240911F9.js"/><link rel="modulepreload" href="https://cdn.shopify.com/oxygen-v2/25760/10053/20707/1208616/build/entry.client-YDZ4JQSL.js"/><link rel="modulepreload" href="https://cdn.shopify.com/oxygen-v2/25760/10053/20707/1208616/build/_shared/chunk-WLLHA5Q7.js"/><link rel="modulepreload" href="https://cdn.shopify.com/oxygen-v2/25760/10053/20707/1208616/build/_shared/chunk-N2XNY24B.js"/><link rel="modulepreload" href="https://cdn.shopify.com/oxygen-v2/25760/10053/20707/1208616/build/_shared/chunk-LICEGK6J.js"/><link rel="modulepreload" href="https://cdn.shopify.com/oxygen-v2/25760/10053/20707/1208616/build/_shared/chunk-2Y6MUA7D.js"/><link rel="modulepreload" href="https://cdn.shopify.com/oxygen-v2/25760/10053/20707/1208616/build/root-OVCZHGDT.js"/><link rel="modulepreload" href="https://cdn.shopify.com/oxygen-v2/25760/10053/20707/1208616/build/_shared/chunk-5KNCLTQQ.js"/><link rel="modulepreload" href="https://cdn.shopify.com/oxygen-v2/25760/10053/20707/1208616/build/_shared/chunk-NPHDGBYQ.js"/><link rel="modulepreload" href="https://cdn.shopify.com/oxygen-v2/25760/10053/20707/1208616/build/routes/showcase-KKA74SWP.js"/><script>window.__remixContext = {"url":"/showcase","state":{"loaderData":{"root":{"footerCta":{"metaobject":{"fields":[{"key":"code_snippit","value":"npm create @shopify/hydrogen@latest","reference":null,"references":null},{"key":"copy_success_message","value":"Copied to clipboard!","reference":null,"references":null},{"key":"footer_cta_links","value":"[\"gid://shopify/Metaobject/7446200342\",\"gid://shopify/Metaobject/7446233110\",\"gid://shopify/Metaobject/7446265878\",\"gid://shopify/Metaobject/7446298646\"]","reference":null,"references":{"__typename":"MetafieldReferenceConnection","nodes":[{"id":"gid://shopify/Metaobject/7446200342","__typename":"Metaobject","fields":[{"key":"cta_label","value":"Read Hydrogen docs and guides","reference":null},{"key":"icon","value":"docs","reference":null},{"key":"title","value":"Learn Hydrogen","reference":null},{"key":"url","value":"https://shopify.dev/docs/custom-storefronts/hydrogen","reference":null}]},{"id":"gid://shopify/Metaobject/7446233110","__typename":"Metaobject","fields":[{"key":"cta_label","value":"Hydrogen is 100% open source","reference":null},{"key":"icon","value":"github","reference":null},{"key":"title","value":"Build with us","reference":null},{"key":"url","value":"https://github.com/Shopify/hydrogen","reference":null}]},{"id":"gid://shopify/Metaobject/7446298646","__typename":"Metaobject","fields":[{"key":"cta_label","value":"Code-along tutorials for development tips and insights","reference":null},{"key":"icon","value":"youtube","reference":null},{"key":"title","value":"Learn Hydrogen","reference":null},{"key":"url","value":"https://www.youtube.com/playlist?list=PLvQF73bM4-5WiRsA0C8rsFPXKtKCiuLtT","reference":null}]}]}},{"key":"subtitle","value":"Spin up a new Hydrogen app in minutes.","reference":null,"references":null},{"key":"title","value":"Get building","reference":null,"references":null}]}},"menus":{"mainMenu":{"id":"gid://shopify/Menu/191744868374","items":[{"id":"gid://shopify/MenuItem/443959050262","resourceId":"gid://shopify/Page/107446075414","tags":[],"title":"Showcase","type":"PAGE","url":"https://hydrogen-hub.myshopify.com/pages/showcase","items":[]},{"id":"gid://shopify/MenuItem/443959083030","resourceId":"gid://shopify/Page/107446009878","tags":[],"title":"Integrations","type":"PAGE","url":"https://hydrogen-hub.myshopify.com/pages/integrations","items":[]},{"id":"gid://shopify/MenuItem/443959115798","resourceId":"gid://shopify/Page/107446108182","tags":[],"title":"Updates","type":"PAGE","url":"https://hydrogen-hub.myshopify.com/pages/updates","items":[]},{"id":"gid://shopify/MenuItem/497341235222","resourceId":null,"tags":[],"title":"Docs","type":"HTTP","url":"https://shopify.dev/docs/custom-storefronts/hydrogen","items":[]}]},"socialLinks":{"id":"gid://shopify/Menu/213498298390","items":[{"id":"gid://shopify/MenuItem/497341300758","resourceId":null,"tags":[],"title":"Github","type":"HTTP","url":"https://github.com/Shopify/hydrogen","items":[]},{"id":"gid://shopify/MenuItem/497341333526","resourceId":null,"tags":[],"title":"X","type":"HTTP","url":"https://twitter.com/shopifydevs?lang=en","items":[]},{"id":"gid://shopify/MenuItem/497352015894","resourceId":null,"tags":[],"title":"YouTube","type":"HTTP","url":"https://www.youtube.com/playlist?list=PLvQF73bM4-5WiRsA0C8rsFPXKtKCiuLtT","items":[]}]},"footerMenu":{"id":"gid://shopify/Menu/191744901142","items":[{"id":"gid://shopify/MenuItem/497293787158","resourceId":null,"tags":[],"title":"Updates and News","type":"HTTP","url":"https://hydrogen-hub.myshopify.com#","items":[{"id":"gid://shopify/MenuItem/497293819926","resourceId":null,"tags":[],"title":"Developer changelog","type":"HTTP","url":"https://shopify.dev/changelog"},{"id":"gid://shopify/MenuItem/497293852694","resourceId":null,"tags":[],"title":"Partner blog","type":"HTTP","url":"https://www.shopify.com/partners/blog"},{"id":"gid://shopify/MenuItem/497293885462","resourceId":null,"tags":[],"title":"Engineering blog","type":"HTTP","url":"https://shopify.engineering/"},{"id":"gid://shopify/MenuItem/497293918230","resourceId":null,"tags":[],"title":"UX blog","type":"HTTP","url":"https://ux.shopify.com/"}]},{"id":"gid://shopify/MenuItem/497293950998","resourceId":null,"tags":[],"title":"Community","type":"HTTP","url":"https://hydrogen-hub.myshopify.com#","items":[{"id":"gid://shopify/MenuItem/497293983766","resourceId":null,"tags":[],"title":"Developer forum","type":"HTTP","url":"https://community.shopify.com/c/partners-and-developers/ct-p/appdev"},{"id":"gid://shopify/MenuItem/497294049302","resourceId":null,"tags":[],"title":"Twitter","type":"HTTP","url":"https://twitter.com/shopifydevs"},{"id":"gid://shopify/MenuItem/497294082070","resourceId":null,"tags":[],"title":"YouTube","type":"HTTP","url":"https://www.youtube.com/c/shopifydevs"}]},{"id":"gid://shopify/MenuItem/497294114838","resourceId":null,"tags":[],"title":"Events","type":"HTTP","url":"https://hydrogen-hub.myshopify.com#","items":[{"id":"gid://shopify/MenuItem/497294147606","resourceId":null,"tags":[],"title":"Editions.dev","type":"HTTP","url":"https://www.editions.dev/"},{"id":"gid://shopify/MenuItem/497294180374","resourceId":null,"tags":[],"title":"Meetups","type":"HTTP","url":"https://events.shopify.com/partners"}]},{"id":"gid://shopify/MenuItem/497294213142","resourceId":null,"tags":[],"title":"Legal","type":"HTTP","url":"https://hydrogen-hub.myshopify.com#","items":[{"id":"gid://shopify/MenuItem/497294245910","resourceId":null,"tags":[],"title":"Terms of Service","type":"HTTP","url":"https://www.shopify.com/legal/terms"},{"id":"gid://shopify/MenuItem/497294278678","resourceId":null,"tags":[],"title":"API Terms of Service","type":"HTTP","url":"https://www.shopify.com/legal/api-terms"},{"id":"gid://shopify/MenuItem/497294311446","resourceId":null,"tags":[],"title":"Privacy policy","type":"HTTP","url":"https://www.shopify.com/legal/privacy"}]}]},"secondaryFooterMenu":{"id":"gid://shopify/Menu/213478277142","items":[{"id":"gid://shopify/MenuItem/497294344214","resourceId":null,"tags":[],"title":"About Shopify","type":"HTTP","url":"https://www.shopify.com/about","items":[]},{"id":"gid://shopify/MenuItem/497294376982","resourceId":null,"tags":[],"title":"Shopify Plus","type":"HTTP","url":"https://www.shopify.com/plus","items":[]},{"id":"gid://shopify/MenuItem/497294409750","resourceId":null,"tags":[],"title":"Careers","type":"HTTP","url":"https://www.shopify.com/careers","items":[]},{"id":"gid://shopify/MenuItem/497294442518","resourceId":null,"tags":[],"title":"Investors","type":"HTTP","url":"https://investors.shopify.com/home/","items":[]},{"id":"gid://shopify/MenuItem/497294475286","resourceId":null,"tags":[],"title":"Press and Media","type":"HTTP","url":"https://news.shopify.com/","items":[]}]}},"gaTrackingId":"GTM-WS8VK6K"},"routes/showcase":{"showcase":{"title":"Showcase","description":"Discover how brands across the world are building creative custom experiences with Hydrogen.","products":{"nodes":[{"id":"gid://shopify/Product/10485877309462","title":"Lady Gaga","description":"","media":{"nodes":[{"__typename":"Video","mediaContentType":"VIDEO","alt":"","previewImage":{"url":"https://cdn.shopify.com/s/files/1/0598/4822/8886/files/preview_images/11fad5df85d044b8b07912d6a5de9ac5.thumbnail.0000000000.jpg?v=1738264299"},"id":"gid://shopify/Video/51371787747350","sources":[{"mimeType":"video/mp4","url":"https://hydrogen-hub.myshopify.com/cdn/shop/videos/c/vp/11fad5df85d044b8b07912d6a5de9ac5/11fad5df85d044b8b07912d6a5de9ac5.SD-480p-1.5Mbps-41831486.mp4","format":"mp4","height":480,"width":640}]}]},"tags":["MUX","Sanity"],"metafields":[{"key":"link_label_1","namespace":"custom","value":"Website","type":"single_line_text_field"},{"key":"link_1","namespace":"custom","value":"https://www.ladygaga.com/us-en/","type":"url"},{"key":"link_label_2","namespace":"custom","value":"Agency: Commerce-UI","type":"single_line_text_field"},{"key":"link_2","namespace":"custom","value":"https://commerce-ui.com/?utm_source=partner\u0026utm_medium=website\u0026utm_campaign=shopify\u0026utm_term=hydrogen","type":"url"}]},{"id":"gid://shopify/Product/8021287993366","title":"Patta x Tommy","description":"","media":{"nodes":[{"__typename":"Video","mediaContentType":"VIDEO","alt":"A screen recording of the website Patta Tommy showing the home page and a product page","previewImage":{"url":"https://cdn.shopify.com/s/files/1/0598/4822/8886/files/preview_images/image.png?v=1697574127"},"id":"gid://shopify/Video/34830634876950","sources":[{"mimeType":"video/mp4","url":"https://hydrogen-hub.myshopify.com/cdn/shop/videos/c/vp/203cb749920640bf98cf2ba3b3d8ee62/203cb749920640bf98cf2ba3b3d8ee62.SD-480p-0.9Mbps-19555906.mp4","format":"mp4","height":480,"width":640},{"mimeType":"application/x-mpegURL","url":"https://hydrogen-hub.myshopify.com/cdn/shop/videos/c/vp/203cb749920640bf98cf2ba3b3d8ee62/203cb749920640bf98cf2ba3b3d8ee62.m3u8","format":"m3u8","height":480,"width":640}]}]},"tags":["Klavyio","Reamaze","Shopify Flow","Shopify Launchpad"],"metafields":[null,null,{"key":"link_label_2","namespace":"custom","value":"Agency: Ask Phill","type":"single_line_text_field"},{"key":"link_2","namespace":"custom","value":"https://www.askphill.com/","type":"url"}]},{"id":"gid://shopify/Product/8022807314454","title":"Drake Related","description":"","media":{"nodes":[{"__typename":"Video","mediaContentType":"VIDEO","alt":"A screen recording of the website Drake Related showing a few different screens and a product screen ","previewImage":{"url":"https://cdn.shopify.com/s/files/1/0598/4822/8886/files/preview_images/image_1.png?v=1697574249"},"id":"gid://shopify/Video/34830634942486","sources":[{"mimeType":"video/mp4","url":"https://hydrogen-hub.myshopify.com/cdn/shop/videos/c/vp/43924f0d8c3f4742bd3b85b3b5a9fffc/43924f0d8c3f4742bd3b85b3b5a9fffc.SD-480p-0.9Mbps-19555943.mp4","format":"mp4","height":480,"width":640},{"mimeType":"application/x-mpegURL","url":"https://hydrogen-hub.myshopify.com/cdn/shop/videos/c/vp/43924f0d8c3f4742bd3b85b3b5a9fffc/43924f0d8c3f4742bd3b85b3b5a9fffc.m3u8","format":"m3u8","height":480,"width":640}]}]},"tags":["Contentful","Klavyio","Metafields","Shopify Collective"],"metafields":[{"key":"link_label_1","namespace":"custom","value":"Website","type":"single_line_text_field"},{"key":"link_1","namespace":"custom","value":"https://drakerelated.com/rooms/el-chico-studios","type":"url"},{"key":"link_label_2","namespace":"custom","value":"Agency: Tidal Commerce","type":"single_line_text_field"},{"key":"link_2","namespace":"custom","value":"https://tidalcommerce.ca/","type":"url"}]},{"id":"gid://shopify/Product/8022807412758","title":"Denim Tears","description":"","media":{"nodes":[{"__typename":"Video","mediaContentType":"VIDEO","alt":"A screen recording of the website Denim Tears showing the home page and a product screen ","previewImage":{"url":"https://cdn.shopify.com/s/files/1/0598/4822/8886/files/preview_images/image_2.png?v=1697574335"},"id":"gid://shopify/Video/34830635008022","sources":[{"mimeType":"video/mp4","url":"https://hydrogen-hub.myshopify.com/cdn/shop/videos/c/vp/5b4771ad914a43b98a3ef9e384688de3/5b4771ad914a43b98a3ef9e384688de3.SD-480p-0.9Mbps-19555962.mp4","format":"mp4","height":480,"width":640},{"mimeType":"application/x-mpegURL","url":"https://hydrogen-hub.myshopify.com/cdn/shop/videos/c/vp/5b4771ad914a43b98a3ef9e384688de3/5b4771ad914a43b98a3ef9e384688de3.m3u8","format":"m3u8","height":480,"width":640}]}]},"tags":["Afterpay","Amplitude","Klarna","Klavyio","Sanity","Signifyd"],"metafields":[{"key":"link_label_1","namespace":"custom","value":"Website","type":"single_line_text_field"},{"key":"link_1","namespace":"custom","value":"https://denimtears.com/ca/","type":"url"},{"key":"link_label_2","namespace":"custom","value":"Agency: Kamp Grizzly","type":"single_line_text_field"},{"key":"link_2","namespace":"custom","value":"https://www.kampgrizzly.com/","type":"url"}]},{"id":"gid://shopify/Product/8022807478294","title":"Baboon to the moon","description":"","media":{"nodes":[{"__typename":"Video","mediaContentType":"VIDEO","alt":"A screen recording of the website Baboon To The Moon showing a few different screens and a product screen ","previewImage":{"url":"https://cdn.shopify.com/s/files/1/0598/4822/8886/files/preview_images/image_3.png?v=1697574351"},"id":"gid://shopify/Video/34830635073558","sources":[{"mimeType":"video/mp4","url":"https://hydrogen-hub.myshopify.com/cdn/shop/videos/c/vp/478f035aabf94972840444a484ab57e9/478f035aabf94972840444a484ab57e9.SD-480p-0.9Mbps-19555981.mp4","format":"mp4","height":480,"width":640},{"mimeType":"application/x-mpegURL","url":"https://hydrogen-hub.myshopify.com/cdn/shop/videos/c/vp/478f035aabf94972840444a484ab57e9/478f035aabf94972840444a484ab57e9.m3u8","format":"m3u8","height":480,"width":640}]}]},"tags":["Attentive","Criteo","Klavyio","Loop Returns","Sanity"],"metafields":[{"key":"link_label_1","namespace":"custom","value":"Website","type":"single_line_text_field"},{"key":"link_1","namespace":"custom","value":"https://baboontothemoon.com/","type":"url"},null,null]},{"id":"gid://shopify/Product/8022807511062","title":"Manors Golf","description":"","media":{"nodes":[{"__typename":"Video","mediaContentType":"VIDEO","alt":"Video preview of the Manors Golf site, photos of golf players on the course interspersed with product imagery ","previewImage":{"url":"https://cdn.shopify.com/s/files/1/0598/4822/8886/files/preview_images/d9e7681696d849eb9ae6bfaa060810a2.thumbnail.0000000000.jpg?v=1694277283"},"id":"gid://shopify/Video/32237899022358","sources":[{"mimeType":"video/mp4","url":"https://hydrogen-hub.myshopify.com/cdn/shop/videos/c/vp/d9e7681696d849eb9ae6bfaa060810a2/d9e7681696d849eb9ae6bfaa060810a2.SD-480p-0.9Mbps-18233111.mp4","format":"mp4","height":480,"width":640},{"mimeType":"application/x-mpegURL","url":"https://hydrogen-hub.myshopify.com/cdn/shop/videos/c/vp/d9e7681696d849eb9ae6bfaa060810a2/d9e7681696d849eb9ae6bfaa060810a2.m3u8","format":"m3u8","height":480,"width":640}]}]},"tags":["Google \u0026 YouTube","Klavyio","Orderly Emails","Sanity"],"metafields":[{"key":"link_label_1","namespace":"custom","value":"Website","type":"single_line_text_field"},{"key":"link_1","namespace":"custom","value":"https://manorsgolf.com/","type":"url"},null,null]},{"id":"gid://shopify/Product/8022807543830","title":"Atoms","description":"","media":{"nodes":[{"__typename":"Video","mediaContentType":"VIDEO","alt":"Video preview of the Atoms site, lifestyle photos are interspersed with product photos of Atoms footware","previewImage":{"url":"https://cdn.shopify.com/s/files/1/0598/4822/8886/files/preview_images/118563df63fe487ea6a80810879d6671.thumbnail.0000000000.jpg?v=1694277378"},"id":"gid://shopify/Video/32237899055126","sources":[{"mimeType":"video/mp4","url":"https://hydrogen-hub.myshopify.com/cdn/shop/videos/c/vp/118563df63fe487ea6a80810879d6671/118563df63fe487ea6a80810879d6671.SD-480p-0.9Mbps-18233208.mp4","format":"mp4","height":480,"width":640},{"mimeType":"application/x-mpegURL","url":"https://hydrogen-hub.myshopify.com/cdn/shop/videos/c/vp/118563df63fe487ea6a80810879d6671/118563df63fe487ea6a80810879d6671.m3u8","format":"m3u8","height":480,"width":640}]}]},"tags":["Klavyio","Sanity","Zonos"],"metafields":[{"key":"link_label_1","namespace":"custom","value":"Website","type":"single_line_text_field"},{"key":"link_1","namespace":"custom","value":"https://atoms.com/","type":"url"},null,null]},{"id":"gid://shopify/Product/8022807576598","title":"Chubbies","description":"","media":{"nodes":[{"__typename":"Video","mediaContentType":"VIDEO","alt":"Video preview of the Chubbies website showcasing swimwear collections and swim short product pages","previewImage":{"url":"https://cdn.shopify.com/s/files/1/0598/4822/8886/files/preview_images/fea61e3d975f4d0ea589f49b06fbfdb0.thumbnail.0000000000.jpg?v=1694277478"},"id":"gid://shopify/Video/32237899087894","sources":[{"mimeType":"video/mp4","url":"https://hydrogen-hub.myshopify.com/cdn/shop/videos/c/vp/fea61e3d975f4d0ea589f49b06fbfdb0/fea61e3d975f4d0ea589f49b06fbfdb0.SD-480p-0.9Mbps-18233231.mp4","format":"mp4","height":480,"width":640},{"mimeType":"application/x-mpegURL","url":"https://hydrogen-hub.myshopify.com/cdn/shop/videos/c/vp/fea61e3d975f4d0ea589f49b06fbfdb0/fea61e3d975f4d0ea589f49b06fbfdb0.m3u8","format":"m3u8","height":480,"width":640}]}]},"tags":["Attentive","Builder.io","Dynamic Yield","FullStory","Gladly","Klavyio","Nosto","Yotpo"],"metafields":[{"key":"link_label_1","namespace":"custom","value":"Website","type":"single_line_text_field"},{"key":"link_1","namespace":"custom","value":"https://www.chubbiesshorts.com/","type":"url"},{"key":"link_label_2","namespace":"custom","value":"Agency: Form Factory","type":"single_line_text_field"},{"key":"link_2","namespace":"custom","value":"https://theformfactory.co/","type":"url"}]},{"id":"gid://shopify/Product/8024263360534","title":"Nour Hammour","description":"","media":{"nodes":[{"__typename":"Video","mediaContentType":"VIDEO","alt":"Video preview of the Nour-Hammour site, showing off their outerwear collection","previewImage":{"url":"https://cdn.shopify.com/s/files/1/0598/4822/8886/files/preview_images/16dc397a11004fcf9421a587afa1c3bb.thumbnail.0000000000.jpg?v=1694277964"},"id":"gid://shopify/Video/32237899382806","sources":[{"mimeType":"video/mp4","url":"https://hydrogen-hub.myshopify.com/cdn/shop/videos/c/vp/16dc397a11004fcf9421a587afa1c3bb/16dc397a11004fcf9421a587afa1c3bb.SD-480p-0.9Mbps-18233424.mp4","format":"mp4","height":480,"width":640},{"mimeType":"application/x-mpegURL","url":"https://hydrogen-hub.myshopify.com/cdn/shop/videos/c/vp/16dc397a11004fcf9421a587afa1c3bb/16dc397a11004fcf9421a587afa1c3bb.m3u8","format":"m3u8","height":480,"width":640}]}]},"tags":["Easysize","Klavyio","MUX","Sanity"],"metafields":[{"key":"link_label_1","namespace":"custom","value":"Website","type":"single_line_text_field"},{"key":"link_1","namespace":"custom","value":"https://nour-hammour.com/","type":"url"},{"key":"link_label_2","namespace":"custom","value":"Agency: Commerce-UI","type":"single_line_text_field"},{"key":"link_2","namespace":"custom","value":"https://commerce-ui.com/","type":"url"}]},{"id":"gid://shopify/Product/8024263393302","title":"ISLE USA","description":"","media":{"nodes":[{"__typename":"Video","mediaContentType":"VIDEO","alt":"Video preview of the ISLE USA site, showing off the Pioneer Pro SUP-Kayak hybrid","previewImage":{"url":"https://cdn.shopify.com/s/files/1/0598/4822/8886/files/preview_images/5aeb14da20464c10b00abcbf4c8765e2.thumbnail.0000000000.jpg?v=1694278160"},"id":"gid://shopify/Video/32237899513878","sources":[{"mimeType":"video/mp4","url":"https://hydrogen-hub.myshopify.com/cdn/shop/videos/c/vp/5aeb14da20464c10b00abcbf4c8765e2/5aeb14da20464c10b00abcbf4c8765e2.SD-480p-0.9Mbps-18233488.mp4","format":"mp4","height":480,"width":640},{"mimeType":"application/x-mpegURL","url":"https://hydrogen-hub.myshopify.com/cdn/shop/videos/c/vp/5aeb14da20464c10b00abcbf4c8765e2/5aeb14da20464c10b00abcbf4c8765e2.m3u8","format":"m3u8","height":480,"width":640}]}]},"tags":["Attentive","Dynamic Yield","FullStory","GoDaddy","Klavyio","Shogun","Yotpo"],"metafields":[{"key":"link_label_1","namespace":"custom","value":"Website","type":"single_line_text_field"},{"key":"link_1","namespace":"custom","value":"https://islesurfandsup.com/","type":"url"},{"key":"link_label_2","namespace":"custom","value":"Agency: Form Factory","type":"single_line_text_field"},{"key":"link_2","namespace":"custom","value":"https://theformfactory.co/","type":"url"}]},{"id":"gid://shopify/Product/8024263426070","title":"Oru Kayak","description":"","media":{"nodes":[{"__typename":"Video","mediaContentType":"VIDEO","alt":"Video preview of the ORU Kayak site, showcasing their product collections and the Inlet product","previewImage":{"url":"https://cdn.shopify.com/s/files/1/0598/4822/8886/files/preview_images/c9c9f61e3fba483b81354c57b5d605b3.thumbnail.0000000000.jpg?v=1694278258"},"id":"gid://shopify/Video/32237899546646","sources":[{"mimeType":"video/mp4","url":"https://hydrogen-hub.myshopify.com/cdn/shop/videos/c/vp/c9c9f61e3fba483b81354c57b5d605b3/c9c9f61e3fba483b81354c57b5d605b3.SD-480p-0.9Mbps-18233510.mp4","format":"mp4","height":480,"width":640},{"mimeType":"application/x-mpegURL","url":"https://hydrogen-hub.myshopify.com/cdn/shop/videos/c/vp/c9c9f61e3fba483b81354c57b5d605b3/c9c9f61e3fba483b81354c57b5d605b3.m3u8","format":"m3u8","height":480,"width":640}]}]},"tags":["Attentive","Dynamic Yield","FullStory","Gorgias","Yotpo"],"metafields":[{"key":"link_label_1","namespace":"custom","value":"Website","type":"single_line_text_field"},{"key":"link_1","namespace":"custom","value":"https://www.orukayak.com/","type":"url"},{"key":"link_label_2","namespace":"custom","value":"Agency: Form Factory","type":"single_line_text_field"},{"key":"link_2","namespace":"custom","value":"https://theformfactory.co/","type":"url"}]},{"id":"gid://shopify/Product/8024263458838","title":"Honeylove","description":"","media":{"nodes":[{"__typename":"Video","mediaContentType":"VIDEO","alt":"Video preview of the HoneyLove site, showing off their EverReady Pant product","previewImage":{"url":"https://cdn.shopify.com/s/files/1/0598/4822/8886/files/preview_images/daa0cf7883ab427b8a82019368578d08.thumbnail.0000000000.jpg?v=1694278342"},"id":"gid://shopify/Video/32237899579414","sources":[{"mimeType":"video/mp4","url":"https://hydrogen-hub.myshopify.com/cdn/shop/videos/c/vp/daa0cf7883ab427b8a82019368578d08/daa0cf7883ab427b8a82019368578d08.SD-480p-0.9Mbps-18233542.mp4","format":"mp4","height":480,"width":640},{"mimeType":"application/x-mpegURL","url":"https://hydrogen-hub.myshopify.com/cdn/shop/videos/c/vp/daa0cf7883ab427b8a82019368578d08/daa0cf7883ab427b8a82019368578d08.m3u8","format":"m3u8","height":480,"width":640}]}]},"tags":["Klavyio","Okendo"],"metafields":[{"key":"link_label_1","namespace":"custom","value":"Website","type":"single_line_text_field"},{"key":"link_1","namespace":"custom","value":"https://www.honeylove.com/en-ca/","type":"url"},null,null]}],"pageInfo":{"hasPreviousPage":false,"hasNextPage":false,"startCursor":"eyJsYXN0X2lkIjoxMDQ4NTg3NzMwOTQ2MiwibGFzdF92YWx1ZSI6MX0=","endCursor":"eyJsYXN0X2lkIjo4MDI0MjYzNDU4ODM4LCJsYXN0X3ZhbHVlIjoxMn0="}}}}},"actionData":null,"errors":null},"future":{"v3_fetcherPersist":true,"v3_relativeSplatPath":false,"v3_throwAbortReason":true}};__remixContext.p = function(v,e,p,x) { if (typeof e !== 'undefined') { x=new Error("Unexpected Server Error"); x.stack=undefined; p=Promise.reject(x); } else { p=Promise.resolve(v); } return p; }; __remixContext.n = function(i,k) { __remixContext.t = __remixContext.t || {}; __remixContext.t[i] = __remixContext.t[i] || {}; let p = new Promise((r, e) => {__remixContext.t[i][k] = {r:(v)=>{r(v);},e:(v)=>{e(v);}};}); return p; }; __remixContext.r = function(i,k,v,e,p,x) { p = __remixContext.t[i][k]; if (typeof e !== 'undefined') { x=new Error("Unexpected Server Error"); x.stack=undefined; p.e(x); } else { p.r(v); } };Object.assign(__remixContext.state.loaderData["root"], {});</script><script type="module" async="">import "https://cdn.shopify.com/oxygen-v2/25760/10053/20707/1208616/build/manifest-240911F9.js"; import * as route0 from "https://cdn.shopify.com/oxygen-v2/25760/10053/20707/1208616/build/root-OVCZHGDT.js"; import * as route1 from "https://cdn.shopify.com/oxygen-v2/25760/10053/20707/1208616/build/routes/showcase-KKA74SWP.js"; window.__remixRouteModules = {"root":route0,"routes/showcase":route1}; import("https://cdn.shopify.com/oxygen-v2/25760/10053/20707/1208616/build/entry.client-YDZ4JQSL.js");</script></body></html>