Customize a storefront with Hydrogen

After you've finished this tutorial, you'll have accomplished the following:

• Customized text and component styles
• Fetched data from server components
• Made changes to GraphQL queries

• You're using the most recent version of Hydrogen. The latest release gives you the benefits of performance enhancements, new components, and other best practices.

• You've completed the create a custom storefront with Hydrogen tutorial.

Hydrogen provides a structure for building your app along with basic styles provided by Tailwind. You can customize any part of Hydrogen as long as you keep the following required files:

• index.html
• src/App.server.jsx

1. Make sure your development environment is running at http://localhost:3000.

2. In src/components/Welcome.server.jsx, change the Hello, Hydrogen text to Hello, Snowboards.

3. Save the file to see your changes updated in real-time:

1. In src/components/Welcome.server.jsx, find the following code:

2. Make the background color red for the Hello, Snowboards text:

3. Save the file to see your changes updated in real-time:

Hydrogen offers the useShopQuery and fetchSync hooks to fetch data from server components. Most src/routes/*.server.jsx components contain queries that you can modify.

To fetch data from your Shopify storefront, you can use the useShopQuery hook. Your shop domain and token is automatically configured, so you only need to pass a GraphQL query.

The useShopQuery hook is designed to be used only in server components, because only server components can make calls to the Storefront API.

The fetchSync hook makes API requests. It's designed similar to the Web API's fetch, only in a way that supports Suspense.

You might want to make changes to a GraphQL query to fetch data for a specific need. For example, if you want to display a certain product attribute or shop attribute, then you can update a query.

In src/routes/index.server.jsx, make a change to QUERY at the bottom of the file. For example, fetch information about your shop:

The homepage renders the name of your shop:

You can explore the Storefront API and run test queries in your Hydrogen app. When you're running the Hydrogen local development server, you can visit the following URLs to load an interactive GraphiQL interface connected to your shop:

• http://localhost:3000/graphiql
• http://localhost:3000/___graphql

• Learn how to build product pages in Hydrogen.
• Explore the source code of the example Hydrogen demo store in GitHub.
• Get familiar with React Server Components.
• Learn more about the Shopify-specific commerce components, hooks, and utilities included in Hydrogen.