#shopify

Subscribe
Shopify is a cloud-based, ecommerce platform used to create online stores and sell products. It provides users with an intuitive interface that allows them to easily set up their store, manage inventory, accept payments, and ship orders. It also provides powerful tools for customizing the look and feel of the store, as well as marketing, analytics, and customer service features. Shopify is popular among JavaScript developers because it offers a wide range of APIs and SDKs which allow them to extend the functionality of the platform.
Hydrogen: An Early Look at Server Components in the Wild
React Advanced 2022React Advanced 2022
7 min
Hydrogen: An Early Look at Server Components in the Wild
Hydrogen and server components are being used by big merchants in production sites to build headless storefronts quickly. React 18 introduces server components that allow for interactive rendering without adding anything to the bundle. However, not all libraries are compatible and data fetching can slow down the site, but React provides suspense to handle heavy components. Server components offer great encapsulation and fast rendering via HTML, and the future of headless is promising with technologies like Edgeworkers and hosting platforms like Oxygen. Shopify is hiring and offers a demo shop with server components at addogen.new.
Build a Product Page with Shopify’s Hydrogen Framework
React Advanced 2022React Advanced 2022
81 min
Build a Product Page with Shopify’s Hydrogen Framework
WorkshopFree
David Witt
David Witt
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
Prerequisites: - A Chromium-based browser (StackBlitz)- Ideally experience with React. A general web development background would be fine.
Building custom storefronts on Shopify with Hydrogen
React Summit 2022React Summit 2022
71 min
Building custom storefronts on Shopify with Hydrogen
WorkshopFree
Abe Haskins
Megan Majewski
2 authors
Get hands-on with Hydrogen, a React-based framework powered by Shopify. In this workshop, we'll explore the framework and get a custom storefront up and running quickly. You'll learn how (and when) to leverage React Server Components and caching mechanisms to build fast, dynamic, custom storefronts.
Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.