Welcome to the Shopify Hydrogen Tutorial: Best Methods & Pro Tips” course. In this course, all the real-life actions will be explained to developers who are interested in Shopify Hydrogen. Here, we will be concerned with comprehensive techniques, professional advice, and efficient ways to learn fast and effectively. Regardless of the basic understanding of HTML, CSS, JavaScript, or React or to work with Shopify, you will get important tips and advice from this course.
By the end of this course, "Shopify Hydrogen Tutorial: Best Methods & Pro Tips,” you will learn the structure of the Hydrogen framework, how to install and set up Hydrogen for development, and the work of the Storefront and Admin APIs. You will also learn how to work with Meta Objects, develop a homepage with Sanity CMS, and deploy the project.
Shopify Hydrogen Tutorial: Best Methods & Pro Tips Table of Contents:
- Introduction - 00:42
- What is Shopify Remix? - 01:23
- What is Shopify Hydrogen? - 01:00
- Set up the Development Environment - 01:25
- Installing Hydrogen Locally - 01:52
- Connect Shopify Store with Hydrogen App - 01:55
- Setup Customer Account API for Hydrogen Locally - 02:50
- Setup Tailwind CSS with Hydrogen - 06:21
- What is GraphQL? - 03:50
- What is Shopify Storefront API? - 00:42
- Installing and Using Altair GraphQL Client - 00:25
- Using GraphQL Query in Hydrogen - 04:29
- Using Variables in GraphQL Query - 09:06
- Using Fragments in GraphQL Query - 03:50
- Using Mutations in GraphQL Query - 03:06
- What is Shopify Admin API? - 16:03
- Configuring Altair GraphQL Client to Use Admin API - 00:50
- Create Admin API Client for Hydrogen - 04:27
- Using Shopify Admin API with Hydrogen - 09:39
- What are Shopify Metaobjects? - 12:57
- Create a Shopify Metaobject - 00:58
- How to Display a Metaobject from Hydrogen - 03:42
- What is Sanity CMS? - 22:49
- What is GROQ Query Language? - 00:54
- How to Create a Sanity Project - 00:30
- How to Sync Shopify Data with Sanity - 04:58
- Create Sanity Client for Hydrogen - 02:58
- Create Example Sanity Module - 09:56
- Display Example Sanity Module on Hydrogen - 10:32
- Using Fragments in GROQ Query - 09:44
- Cleanup and Style the Whole Site - 06:40
- Create Video Background Section - 14:03
- Create Banner Grid Section - 16:20
- Create Selected Products Section - 15:55
- Create Parallax Banner Section - 48:37
- Create About Us Section - 15:43
- Deploy to Shopify Oxygen - 13:03
Who is this course for?
- From freshmen to the intermediate level in Shopify and React.
- To this end, learners anxious to get started with Shopify Hydrogen
- Yearning for headless eCommerce among students
- The guidelines provided in this paper would be of significance to Shopify merchants who seek to get a better grasp of Shopify's Hydrogen
- Any newcomer or person who is aiming to develop a new Shopify Hydrogen store
