This demo is an enhanced version of our AKVA demo, powered by Sanity + Hydrogen. This demo is compatible with @shopify/hydrogen ~= 2023.10.2.

Demo | Sanity Connect for Shopify

AKVA is our customized Hydrogen starter that presents a real-world example of how Sanity and Structured Content can elevate your custom Shopify storefronts. This is an enhanced version demonstrating some additional features such as enhanced structured content for products and the addition of a "guide" content type, all of which lead to richer PDPs (Product Display Pages). These additions include:

• A material document type to tell a story about the materials a product is made up of. A product can be composed of multiple materials. The PDP is updated to display this information as well as cross-sell other products made of the same material.
• A people document type allows details to be added for makers of the products. Again, this content is displayed on the PDP with a short biography and link through to the catalogue of the artists work.
• The guide document type is an example of how content and sales strategies can work together through structured content. If a guide references a product, then any hotspotted images are pulled onto any relevant PDPs in order to show products in context.

This demo also features an embedded version of our pre-configured Studio and Sanity Connect for Shopify, which syncs products and collections from your Shopify storefront to your Sanity dataset.

This starter showcases a few patterns you can adopt when creating your own custom storefronts. Use Sanity and Hydrogen to delight customers with rich, shoppable editorial experiences that best tell your story.

This studio is based on our Shopify Studio template, which has a number of features. In addition to this, we've modelled some additional content as detailed above.

View the feature gallery

This TypeScript demo adopts many of Hydrogen's framework conventions and third-party libraries. If you've used Hydrogen then you should hopefully feel at home here.

This demo comes with a custom useSanityQuery hook that allows you to query your Sanity dataset directly from server components.

// MyServerComponent.server.jsx
import useSanityQuery from "./hooks/useSanityQuery";

const QUERY = `*[_type == 'page' && slug.current == $slug]`;
const PARAMS = { slug: "about" };

export default function MyServerComponent() {
  const { data, error } = useSanityQuery({
    // Required
    query: QUERY,
    // Optional
    params: PARAMS,
    // Optional: pass through any useQuery options
    options: {
      preload: false,
    },
  });
  return <div>{JSON.stringify(data)}</div>;
}

The hook itself is super lightweight - it uses our official @sanity/client library wrapped in a Hydrogen useQuery hook to make it suspense-friendly. That's it!

We've taken the following opinions on how we've approached this demo.

• Node.js version 16.5.0 or higher
• Npm

These installation instructions assume you have already installed and configured Sanity Connect on your Shopify store.

1. Duplicate the .env.example file to .env and replace the values to point to your Sanity project's dataset and projectId, and your Shopify storefront's storeDomain and storefrontToken. Use Shopify's Headless app to manage tokens for the Storefront API.

2. Install dependencies and start the development server

   npm install
   npm run dev

3. Visit the development environment running at http://localhost:3000.

To run a local preview of your Hydrogen app in an environment similar to Oxygen, build your Hydrogen app and then run yarn preview:

npm run build
npm run preview

npm run build

Then, you can run a local server.js using the production build with:

npm run serve

See Hydrogen's documentation on deployment

This repository is published under the MIT license.