The Most Critical Shopify Hydrogen Best Practices for Building Storefronts

Shopify Hydrogen is a react-based frontend framework that enables developers to build responsive, mobile-first Shopify storefronts quickly and easily. Part of what makes Hydrogen such a leader in eCommerce innovation is its focus on the developer experience. With Hydrogen, developers can easily create sophisticated storefronts that are easy to maintain, scalable, and extensible.

If you’re a store owner or you work for a Shopify development company and you’re looking to create a storefront using Shopify Hydrogen, there are some best practices you should keep in mind. In this article, we’ll explore some of the important principles and practices to help you get the most out of Hydrogen and build a Shopify store that’s sure to wow your customers.

Building storefronts with the Shopify Hydrogen framework follows a similar pattern to building any other eCommerce storefront. Before you start coding, it’s important to have a clear understanding of the Hydrogen framework and how it works. The Shopify Developer documentation is a great resource for getting started with Hydrogen development.

Once you have a good understanding of the basics of Shopify Hydrogen development, you can begin building your storefront. Here are three key principles to keep in mind when building storefronts with Hydrogen below.

1. Build with Purpose

Before you start creating your storefront, it’s important to have a clear understanding of your purpose. What are you trying to achieve with your storefront? The short answer is probably “sell my products”, but the customer journey is unique to each merchant.
If you take a cookie-cutter approach to Shopify web development, you may end up with a storefront that has a less than optimal conversion rate. Take some time to think about the customer journey and how your storefront can facilitate it. Consider the buying cycle, what customers are looking for, and how they are most likely to interact with your storefront.

2. Design with UX in Mind

The user experience (UX) should be front and centre during the Shopify web development process. Every element on your storefront should be designed with the customer in mind. How will they interact with each element? What impression do you want to make? How can you design your storefront to be as user-friendly as possible? These are all important questions to consider when designing your storefront.

3. Facilitate Accessibility

Website accessibility is often overlooked, but it’s an important consideration when you build a Shopify store. There are a number of ways to make your storefront more accessible, including using clear and concise language, providing alt text for images, and using gentle colour contrast to improve readability. By taking accessibility into consideration, you can make sure that your storefront is accessible to everyone who wants to use it.

There are many considerations when building a storefront, but we can break down the process into three key principles that should be central to the Shopify Hydrogen development process. By following these guiding principles, you can build a Shopify store that is purposeful, user-friendly, and accessible.

Optimize for Performance

Performance is a critical consideration when building storefronts with Shopify Hydrogen. The goal is to create storefronts that are fast, reliable, and responsive. There are a number of factors that can affect performance, including the size and complexity of your storefront, the number of concurrent users, and the hosting environment.

To ensure optimal performance, it’s important to keep the following considerations in mind.

Carefully consider how you render
Shopify Hydrogen development follows an approach guided by the principles of React Server Components, which means that server-side rendering is the default. This approach has a number of benefits, including improved performance, SEO, and cross-browser compatibility.

However, it’s important to carefully consider what you will render on the client and server. Rendering too much on the server can lead to increased latency while rendering too much on the client can lead to decreased performance.

Start with a shared component
If you’re not sure where to start when it comes to rendering during Shopify Hydrogen development, a good rule of thumb is to start with a shared component. The benefit to this is that you can execute the shared component on both the server and client. You can then ask yourself if the code can only be run on the server or the client. By starting with a shared component, you can ensure that your storefront is performant and reliable.

Stick with server components when possible
In general, when it comes to building using the Shopify Hydrogen framework, it’s best to stick with server components when possible. Server components are generally preferable to client components when it comes to performance. However, there may be times when you need to use a client component. If this is the case, be sure to carefully consider the performance implications.

Build client components sparingly
As previously mentioned, client components should be used sparingly. However, in the following cases it may be necessary to build them:

• If you need to use a library that doesn’t support React Server Components
• If you need to use a browser API that isn’t available on the server
• If you’re rendering using lifecycle logic that can’t be implemented on the server
• If you’re using React hooks such as useState or useReducer

Facilitate fast data access
How you manage data fetching can have a significant impact on performance. When fetching data, it’s important to think about when the data should be fetched and how it should be stored. You might want to consider deploying your Hydrogen storefront on Shopify Oxygen, which will allow you to take advantage of out of the box caching.

If you need to fetch data from a third-party data source, then you’ll need to ensure that your customers are getting the latest data within a fast response time. It’s also important to avoid over fetching during Shopify hydrogen development since this can lead to increased latency. Your Hydrogen application should only be requesting data that is absolutely necessary to render a route.

Pages and subrequests
Some pages may have content that is infrequently updated, which means that you can cache this content on the server, and it can be asynchronously revalidated according to Shopify best practices. This will improve performance by avoiding unnecessary data fetching and rendering.

Server bundle size
If you want your Hydrogen storefront to run quickly on a Workers runtime like Oxygen or Cloudflare, it’s important to keep the server bundle size small. As the code size gets bigger, each serverless invocation becomes slower. Excluding larger client-only dependencies, like three js, from your server bundle can reduce its size.

Prioritize Accessibility

Accessibility should be a key consideration when building any storefront. The ability to shop online is even more important to those who may be physically restricted in their ability to visit brick-and-mortar stores. And not only is building an accessible online store the right thing to do, but it’s also good for business because you will have more opportunities to sell to a wider range of customers.

Here are a few Shopify best practices to follow when building an accessible storefront.

Use accessibility testing tools
Thanks to the growing awareness regarding the importance of accessibility, there are now many tools available to help test for accessibility issues. These tools can be used at various stages of development to help identify potential problems so that they can be fixed before the storefront is launched. Some of the most popular accessibility testing tools include:

• Accessibility Insights for Web
• Lighthouse
• WAVE

Follow accessibility principles
According to WCAG 2.0 Guidelines, there are four main principles of accessibility:

• Perceivable – UI components must be delivered to users in a format that is easy for them to perceive.
• Operable – Users must be able to easily navigate and use the storefront interface in order to access its content and functionality.
• Understandable – Users must be able to understand the storefront UI and the information it is trying to communicate.
• Robust – The storefront must be compatible with a wide range of user agents and assistive technologies so that it can be used by as many people as possible.

Consider your page structure
The way you structure your storefront pages can have a big impact on accessibility. For example, using headings and lists can help break up content and make it easier for users to scan a page. Content should be organized in a linear fashion, flowing in a way that will make sense to a screen reader.

What’s more, during the Shopify web development process, you should make sure that your storefront is designed to work well on mobile devices since this is how many users will access it. This means having a responsive design that automatically adjusts to different screen sizes.
From a more technical perspective, you need to ensure you include and enable the following features:

• Heading markups and tags
• H1 elements
• Viewport zoom
• Skip links
• Descriptive alt texts

Be careful with media
Media can be a great way to add visual interest when you build a Shopify store, but it’s important to use it in a way that doesn’t sacrifice accessibility. For example, you should avoid including autoplay videos since they can be disruptive to users. In addition to this, all videos should have captions so that users who are deaf or hard of hearing can understand them.

Images should also have descriptive alt text so that users who are blind or have low vision can understand what they depict. If you’re using infographics or charts, make sure to include text descriptions so that users who can’t see the visuals can still understand the information they contain.

Some people utilize the “prefers reduced motion” setting in their browser and your website should be able to accommodate this. In general, it’s a good idea to limit the use of media on storefront pages and to make sure that any media you do use is accessible to all users.

Configure dynamic components with care
Dynamic components present a challenge for many accessibility tools so if you are going to include them when you create a Shopify Hydrogen store, it’s important to design them with this in mind.

Some of the things you need to keep in mind when designing dynamic components include:

• Ensuring that they can be controlled by all users
• Making sure that they don’t auto-update
• Ensuring that they provide sufficient contrast
• Designing them to be keyboard accessible

It’s also important to test dynamic components thoroughly with a variety of accessibility tools and user agents to make sure they are accessible to as many people as possible.

Test, Test, and Test Again

Performance testing is a critical part of the Shopify web development process and it’s important to test early and often. This means testing with a variety of tools to catch any potential issues.

Run basic tests
You can test your Shopify store using the built-in testing feature within the Demo Store template. You can also test within continuous-integration (CI) environments like GitHub Actions using the relevant command. Once you have identified an issue, you can start fixing it.

Catching and addressing common issues
A free ESLint plugin for hydrogen ensures that your JavaScript code follows Shopify best practices and standards and catches frequent issues when using React Server Components in Hydrogen apps. You can enable the Hydrogen configuration within the ESLint plugin, so that Hydrogen rules are turned on by default.

In addition to the above Shopify best practices, you can learn more about the Shopify Hydrogen components that make up the Hydrogen framework, which plays an important role in storefront design.

Your store’s UX is highly contingent on storefront design. It’s essential to design storefronts keeping in mind how users will interact with them. This means following Shopify Hydrogen best practices to create a fully optimized experience that is fast, responsive, and engaging. With Hydrogen and Oxygen as your foundation, you will be empowered to create resilient storefronts that meet the needs of your users.

If you need help implementing the most optimal design principles and Shopify best practices within your store, you can hire a Shopify developer from Vsourz. Our team of Shopify experts have years of experience in storefront design and can help you create an amazing storefront that engages users and drives conversions. Get in touch with us today to discuss your Shopify web development project.