Skip to main content

Hydrogen best practices

tip

Hydrogen 2.0 is out now. These archival Hydrogen 1.0 docs are provided only to assist developers during their upgrade process. Please migrate to Hydrogen 2.0 as soon as possible.

To optimize your development experience, Shopify has established a set of best practices that you can refer to when designing and working with Hydrogen custom storefronts.

Best practices​

To create an optimal customer experience, and to keep your merchants' stores fast, accessible, and discoverable, you need to consider the following factors:

  • Performance: Learn how to make your Hydrogen custom storefront performant.
  • Accessibility: Learn how to make your Hydrogen custom storefront accessible and maintainable.
  • Testing: Learn how to test your Hydrogen storefront.
  • Examples: Explore Hydrogen examples that demonstrate integrations and special use cases.

Guiding principles for Hydrogen development​

In addition to the best practices listed above, you should consider the following guiding principles for Hydrogen development:

PrincipleDescription
Be purpose-builtEach Hydrogen custom storefront's layout, style, and feature set should be opinionated and optimized for a specific merchant or merchant segment. Your Hydrogen custom storefront should equip merchants with an optimized set of tools to meet their needs, based on what they sell and who they sell to.
Offer best-in-class UXWith the growing number of Shopify stores, Hydrogen custom storefronts have the power to lead the industry and to shape ecommerce user experience patterns. Hydrogen custom storefronts should be designed with quality in mind, putting the customer first.
Be accessibleTo provide the best experience to a wide range of customers, Hydrogen custom storefronts must be built from the ground up with accessibility best practices in mind.