Quick Start

Get your Tune Me In storefront up and running in minutes with this step-by-step guide.

Get your Tune Me In storefront running locally in just a few minutes. This guide will have you viewing your first page quickly.

Before You Begin

You can run Tune Me In with our demo data to explore the platform before connecting your own Shopify store and Sanity project.

Make sure you have:

• Node.js 14.0 or higher installed on your machine
• A code editor (we recommend VS Code)
• Terminal access

Get Started

1. Clone the Repository

   First, clone the Tune Me In starter to your local machine:

   git clone https://github.com/sanity-io/hydrogen-sanity-demo.git tune-me-in
   cd tune-me-in
   
2. Install Dependencies

   Install all required packages using your preferred package manager:

   npm

   npm install
   

   This will install all dependencies including:

   • @shopify/hydrogen - Hydrogen framework
   • @sanity/client - Sanity JavaScript client
   • hydrogen-plugin-sanity - Plugin for unified data fetching
   • React, Vite, Tailwind CSS, and more
3. Start the Development Server

   Launch the development server:

   npm

   npm run dev
   

   The development server will start on http://localhost:3000

4. View Your Storefront

   Open your browser and navigate to:

   http://localhost:3000
   

   You should see the home page with our demo store’s products and content!

What You’ll See

The demo storefront includes:

• Home Page (/) - Featured collections and products with a customizable gallery
• Collection Pages (/collections/[handle]) - Browse products by collection
• Product Pages (/products/[handle]) - Detailed product information with variants
• Editorial Pages (/editorial/[slug]) - Rich content pages with inline product references
• About Page (/about) - Example of a Portable Text-powered page

The demo runs with test data from Sanity’s demo Shopify store. You’re seeing real Hydrogen and Sanity integration in action!

Explore the Code

Now that your storefront is running, explore the key files:

src/App.server.jsx

import {ShopifyServerProvider} from '@shopify/hydrogen';
import {Suspense} from 'react';
import shopifyConfig from '../shopify.config';
import Main from './components/Main.server';
import CartProvider from './contexts/CartProvider.client';

export default function App({...serverState}) {
  const pages = import.meta.globEager('./pages/**/*.server.(jsx|tsx)');
  return (
    <Suspense>
      <ShopifyServerProvider shopifyConfig={shopifyConfig} {...serverState}>
        <CartProvider>
          <Main pages={pages} serverState={serverState} />
        </CartProvider>
      </ShopifyServerProvider>
    </Suspense>
  );
}

Try Making Changes

Tune Me In uses Vite for hot module replacement. Try editing a component to see changes instantly:

1. Open src/pages/Index.server.jsx
2. Make a change to the home page component
3. Save the file
4. Watch your browser automatically update!

All server components (files ending in .server.jsx) run on the server, while client components (.client.jsx) run in the browser. This is a key Hydrogen convention.

Connect Your Own Data (Optional)

Ready to connect your own Shopify store and Sanity project? Update the configuration files:

1. Update Shopify Configuration

   Edit shopify.config.js with your store credentials:

   shopify.config.js

   export default {
     storeDomain: 'your-store.myshopify.com',
     storefrontToken: 'your-storefront-access-token',
     // ... other config
   };
   
2. Update Sanity Configuration

   Edit sanity.config.js with your project details:

   sanity.config.js

   export default {
     apiVersion: 'v2021-06-07',
     dataset: 'production',
     projectId: 'your-project-id',
     useCdn: true,
   };
   
3. Restart the Dev Server

   Stop the server (Ctrl+C) and restart it to load your new configuration:

   npm

   npm run dev
   

To use your own data, you’ll need to set up Sanity Connect for Shopify to sync your products to Sanity, and install the Sanity Shopify Studio.

Next Steps

Installation Guide

Learn about prerequisites, dependencies, and detailed setup

Architecture

Understand how the codebase is organized

Data Fetching

Learn how to query Sanity and Shopify together

Deployment

Deploy your storefront to production

Need Help?

Server won't start

Make sure you have Node.js 14.0 or higher installed:

node --version

Try deleting node_modules and reinstalling:

rm -rf node_modules
yarn install

Port 3000 is already in use

You can specify a different port:

PORT=3001 yarn dev

Changes aren't reflecting

Vite’s HMR is very fast, but sometimes a hard refresh helps:

• Press Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac)
• Or restart the dev server