Build a Product Page with Shopify’s Hydrogen Framework


    Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.

    You will know:

    - Get started with the hello-world template on StackBlitz

    - File-based routing to create a /products/example route

    - Dynamic routing /products/:handle

    - Hit the Storefront API with GraphQL

    - Move the query into the Hydrogen app

    - Update the query to fetch a product by handle

    - Display title, price, image & description.

    - Tailwind styling

    - Variant picker and buy now button

    - Bonus if there’s time: Collections page


    - A Chromium-based browser (StackBlitz)

    - Ideally experience with React. A general web development background would be fine.

    81 min
    15 Nov, 2022

    Watch more workshops on topic

    Check out more articles and videos

    We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career