Client Components - Tune Me In

Client components in Tune Me In handle client-side interactivity, state management, and user interactions. They run in the browser and can use React hooks.

Cart

Full-featured shopping cart with slide-out panel.

Features

Slide-out cart panel from right side
Cart line items with quantity adjustment
Remove items functionality
Subtotal and total calculation
Checkout button
Error handling
Overlay backdrop

Cart Line Items

Each line item displays:

Product image (links to product page)
Product title and selected options
Quantity controls (+/-)
Remove button
Line item price

Usage Example

import Cart from './components/Cart.client';

<Cart />

Source: src/components/Cart.client.jsx:20

ProductDetails

Complete product detail page with images, options, and actions.

product

object

required

Product object containing:

storefront - Shopify product data
images - Array of Sanity image objects
body - Portable text content
sections - Array of collapsible sections

initialVariantId

string

required

Encoded Shopify variant ID for the initially selected variant

Features

Selected variant image display
Image gallery
Product body content (Portable Text)
Product title and pricing
Compare at price
Product options selector
Add to cart button
Buy now button
Collapsible sections (Details, Shipping, etc.)
Responsive layout (2-3 columns)

Usage Example

import ProductDetails from './components/ProductDetails.client';

<ProductDetails 
  product={{
    storefront: shopifyProduct,
    images: sanityImages,
    body: portableTextBlocks,
    sections: [...]
  }}
  initialVariantId={encodedVariantId}
/>

Source: src/components/ProductDetails.client.jsx:11

ProductGallery

Displays a grid of product images.

images

array

required

Array of Sanity image objects with:

_key - Unique identifier
asset._ref - Sanity image reference
altText - Alt text for accessibility
crop - Crop data
hotspot - Hotspot data

Features

Responsive grid layout (1-2 columns)
Sanity image optimization
4:3 aspect ratio containers
Handles missing images gracefully

Usage Example

import ProductGallery from './components/ProductGallery.client';

<ProductGallery images={[
  {
    _key: 'img1',
    asset: { _ref: 'image-xxx' },
    altText: 'Product photo',
    crop: {...},
    hotspot: {...}
  }
]} />

Source: src/components/ProductGallery.client.jsx:4

ProductOptions

Interactive product variant selector (size, color, etc.).

Features

Displays all product options from Shopify
Radio button selection
Visual feedback for selected option
Updates URL with selected variant
Auto-hides for single-variant products
Integrates with Hydrogen’s useProduct hook

Usage Example

import ProductOptions from './components/ProductOptions.client';

// Must be used within a Hydrogen Product provider
<Product product={product}>
  <ProductOptions />
</Product>

Source: src/components/ProductOptions.client.jsx:6

SanityImage

Optimized image component for Sanity CMS images.

alt

string

Alt text for the image

crop

object

Sanity crop data (top, bottom, left, right)

dataset

string

required

Sanity dataset name

height

number

Original image height

hotspot

object

Sanity hotspot data for focal point

layout

string

Image layout: "fill" or "responsive"

objectFit

string

CSS object-fit value (when layout is “fill”)

projectId

string

required

Sanity project ID

quality

number

default:80

Image quality (1-100)

sizes

array | string

Responsive sizes for srcset

src

string

required

Sanity image reference ID

width

number

Original image width

Features

Automatic srcset generation for responsive images
Respects Sanity crop and hotspot
Automatic format selection
Lazy loading with async decoding
Calculates aspect ratio from dimensions
Supports fill and responsive layouts

Usage Example

import SanityImage from './components/SanityImage.client';
import sanityConfig from '../sanity.config';

<SanityImage
  alt="Product image"
  crop={image.crop}
  dataset={sanityConfig.dataset}
  hotspot={image.hotspot}
  layout="fill"
  objectFit="cover"
  projectId={sanityConfig.projectId}
  sizes={['100vw', null, '50vw']}
  src={image.asset._ref}
/>

Source: src/components/SanityImage.client.jsx:54

Button

Basic button component with consistent styling.

children

ReactNode

required

Button content

Features

Full width display
Black background with white text
Disabled state styling
Small text size

Usage Example

import Button from './components/Button.client';

<Button>Click me</Button>

Source: src/components/Button.client.jsx:1

CollectionCard

Displays a collection with image and title overlay.

collection

object

required

Collection object containing:

slug - Collection URL slug
title - Collection name
image - Sanity image object

Features

Image with overlay effect on hover
Centered title text
4:3 aspect ratio
Links to collection page
Responsive text sizing

Usage Example

import CollectionCard from './components/CollectionCard.client';

<CollectionCard collection={{
  slug: 'summer-collection',
  title: 'Summer 2024',
  image: sanityImage
}} />

Source: src/components/CollectionCard.client.jsx:7

LinkProduct

Wrapper for product links with variant support.

handle

string

required

Product handle (slug) in Shopify

variantId

string

Unencoded variant ID to link to specific variant

className

string

CSS classes for styling

onClick

function

Click handler function

children

ReactNode

required

Link content

Features

Builds product URLs with optional variant query param
Updates Hydrogen server state with variant ID
Graceful fallback if no handle provided
Integrates with Hydrogen’s client-side navigation

Usage Example

import LinkProduct from './components/LinkProduct.client';

<LinkProduct 
  handle="cool-tshirt"
  variantId="12345"
  className="text-blue-500"
>
  View Product
</LinkProduct>

Source: src/components/LinkProduct.client.jsx:9

CartToggleButton

Button to open/close the cart panel.

Features

Uses CartUI context for state management
Displays CartIcon component
Cursor pointer on hover

Usage Example

import CartToggleButton from './components/CartToggleButton.client';

<CartToggleButton />

Source: src/components/CartToggleButton.client.jsx:4

Seo

Client component for managing page SEO metadata.

defaultImage

object

Default Sanity image for OpenGraph

defaultTitle

string

Default site title

page

object

Page-specific SEO data:

title - Page title
description - Meta description
keywords - Array of keywords
image - Sanity image object
type - OpenGraph type
price - Product price object
product - Full product data for schema.org

Features

OpenGraph tags
Twitter card metadata
Product schema.org JSON-LD
Dynamic title templates
Supports both global and page-specific SEO

Usage Example

import Seo from './components/Seo.client';

// Global SEO (in App.server.jsx)
<Seo 
  defaultTitle="Tune Me In"
  defaultImage={sanityImage}
/>

// Page-specific SEO
<Seo 
  defaultTitle="Tune Me In"
  page={{
    title: 'Cool T-Shirt',
    description: 'The coolest shirt ever',
    keywords: ['tshirt', 'apparel'],
    image: productImage,
    type: 'product',
    price: { amount: '29.99', currencyCode: 'USD' },
    product: shopifyProduct
  }}
/>

Source: src/components/Seo.client.jsx:21

ButtonSelectedVariantAddToCart

Wrapper around Hydrogen’s <Product.SelectedVariant.AddToCartButton /> that displays a disabled “Sold out” button when the variant is not available.

showSoldOut

boolean

default:true

Whether to show the button when product is sold out

small

boolean

default:false

Use smaller button size (p-3 text-xs instead of p-4 text-sm)

Features

Automatically checks variant availability
Shows “Sold out” text when unavailable
Can hide button completely when sold out (showSoldOut={false})
Styled with Tailwind CSS (dark background, white text)
Disabled state with reduced opacity

Usage Example

src/components/ButtonSelectedVariantAddToCart.client.jsx

import ButtonSelectedVariantAddToCart from './components/ButtonSelectedVariantAddToCart.client';
import {Product} from '@shopify/hydrogen/client';

<Product product={shopifyProduct}>
  <ButtonSelectedVariantAddToCart />
  
  {/* Or with custom props */}
  <ButtonSelectedVariantAddToCart 
    showSoldOut={false}
    small
  />
</Product>

Source: src/components/ButtonSelectedVariantAddToCart.client.jsx:7

ButtonSelectedVariantBuyNow

Similar to ButtonSelectedVariantAddToCart but opens checkout immediately instead of adding to cart.

showSoldOut

boolean

default:true

Whether to show the button when product is sold out

small

boolean

default:false

Use smaller button size

Features

Opens Shopify checkout in new window
Uses direct checkout link for selected variant
Same sold-out handling as AddToCart button
Styled consistently with other action buttons

Usage Example

src/components/ButtonSelectedVariantBuyNow.client.jsx

import ButtonSelectedVariantBuyNow from './components/ButtonSelectedVariantBuyNow.client';
import {Product} from '@shopify/hydrogen/client';

<Product product={shopifyProduct}>
  <ButtonSelectedVariantBuyNow />
</Product>

Source: src/components/ButtonSelectedVariantBuyNow.client.jsx:7

Context Providers

CartUIProvider

Manages cart UI state (open/closed) and provides methods to control cart visibility.

Exports

CartUIProvider - Provider component
useCartUI() - Hook to access cart UI context

Context Value

isCartOpen

boolean

Whether the cart panel is currently open

openCart

function

Function to open the cart panel

closeCart

function

Function to close the cart panel

toggleCart

function

Function to toggle cart open/closed state

Usage Example

src/contexts/CartUIProvider.client.jsx

import CartUIProvider, { useCartUI } from './contexts/CartUIProvider.client';

// Wrap your app
<CartUIProvider>
  {children}
</CartUIProvider>

// Use in components
function MyComponent() {
  const { isCartOpen, openCart, closeCart } = useCartUI();
  
  return (
    <button onClick={openCart}>
      Open Cart
    </button>
  );
}

Source: src/contexts/CartUIProvider.client.jsx:11

​Cart

​Features

​Cart Line Items

​Usage Example

​ProductDetails

​Features

​Usage Example

​ProductGallery

​Features

​Usage Example

​ProductOptions

​Features

​Usage Example

​SanityImage

​Features

​Usage Example

​Button

​Features

​Usage Example

​CollectionCard

​Features

​Usage Example

​LinkProduct

​Features

​Usage Example

​CartToggleButton

​Features

​Usage Example

​Seo

​Features

​Usage Example

​ButtonSelectedVariantAddToCart

​Features

​Usage Example

​ButtonSelectedVariantBuyNow

​Features

​Usage Example

​Context Providers

​CartUIProvider

​Exports

​Context Value

​Usage Example

Cart

Features

Cart Line Items

Usage Example

ProductDetails

Features

Usage Example

ProductGallery

Features

Usage Example

ProductOptions

Features

Usage Example

SanityImage

Features

Usage Example

Button

Features

Usage Example

CollectionCard

Features

Usage Example

LinkProduct

Features

Usage Example

CartToggleButton

Features

Usage Example

Seo

Features

Usage Example

ButtonSelectedVariantAddToCart

Features

Usage Example

ButtonSelectedVariantBuyNow

Features

Usage Example

Context Providers

CartUIProvider

Exports

Context Value

Usage Example