Next Steps with Hydrogen and Sanity

Now that you've got some simple content rendered in Hydrogen, we wanted to give you some ideas for elevating experiences using this stack.

Check out 5 Ways To Make Your E-commerce Product Pages Pop, a video from our co-founder Simen.

• Create some brand-specific content and display this on each product from this brand.
• Programmatically change the product page layout based on the type of product you’re showing - lifestyle products like a fire pit deserve a better layout than a replacement bolt!
• Use your Sanity Studio to add personalization to your storefront by configuring the display of different product references on a page according to which group a customer is in on Shopify.
• Create fields related to product specifications and display these in a table on-site.
  • Call out a key specification (according to the product type) at the top of the page rather than in the main spec table.
  • Show images related to specifications alongside a specification table rather than in the main gallery based on image metadata.
• Create content linked to products based on data and category. For example, for a nutritional product, create an ingredients document type and tell the story of this ingredient, where it comes from, and the benefits of it on the product page.
• Create image hotspots to draw attention to certain product features.
• Create a document/field variation model to facilitate A/B testing of product content.

• See the Hydrogen documentation for how to set up e-commerce components like Add to Cart
• Extend the storefront query to include more details from the product, like variants and images

Hydrogen applications can be deployed to many different hosting environments. Oxygen is a hosting environment provided by Shopify and may be preferable for Hydrogen applications.

Studio excellence module is an overview of how you can refine the experience of creating content for your authors. The preconfigured e-commerce starter for this project has many features, but you can do so much more!

• Install plugins like Media and Scheduled Publishing
• Colorize your Studio with a custom logo and brand colors using Themer

Your Sanity Studio can be deployed anywhere you can host a React application. Sanity offers one Studio hosting per project, more complex setups may benefit from hosting on other providers.