Complete Shopify Hydrogen Development Guide: Code + Visual Customization

// ProductCard.tsx - Built for both code and visual editing
import { forwardRef } from 'react'
import { Image } from '@shopify/hydrogen'
import type { Product } from '@shopify/hydrogen/storefront-api-types'

interface ProductCardProps {
product: Product
showQuickView?: boolean
imageAspectRatio?: 'square' | 'portrait' | 'landscape'
showVendor?: boolean
}

export let ProductCard = forwardRef<HTMLDivElement, ProductCardProps>(
({ product, showQuickView = false, imageAspectRatio = 'square', showVendor = false }, ref) => {
  return (
    <div ref={ref} className="product-card group">
      <div className="relative overflow-hidden">
        <Image
          data={product.featuredImage}
          aspectRatio={imageAspectRatio}
          className="w-full h-full object-cover transition-transform group-hover:scale-105"
        />
        {showQuickView && (
          <button className="absolute inset-x-4 bottom-4 bg-black text-white py-2 rounded opacity-0 group-hover:opacity-100 transition-opacity">
            Quick View
          </button>
        )}
      </div>
      <div className="mt-4">
        {showVendor && (
          <p className="text-sm text-gray-600">{product.vendor}</p>
        )}
        <h3 className="font-medium">{product.title}</h3>
        <p className="text-lg font-semibold">
          {product.priceRange.minVariantPrice.amount}
        </p>
      </div>
    </div>
  )
}
)

// Weaverse Schema - Makes component visually editable
import { createSchema } from '@weaverse/hydrogen'

export let schema = createSchema({
type: 'product-card',
title: 'Product Card',
settings: [
  {
    group: 'Product Display',
    inputs: [
      {
        type: 'product',
        name: 'product',
        label: 'Product',
      },
      {
        type: 'toggle',
        name: 'showQuickView',
        label: 'Show Quick View',
        defaultValue: false,
      },
      {
        type: 'select',
        name: 'imageAspectRatio',
        label: 'Image Aspect Ratio',
        options: [
          { value: 'square', label: 'Square (1:1)' },
          { value: 'portrait', label: 'Portrait (3:4)' },
          { value: 'landscape', label: 'Landscape (4:3)' },
        ],
        defaultValue: 'square',
      },
      {
        type: 'toggle',
        name: 'showVendor',
        label: 'Show Vendor',
        defaultValue: false,
      },
    ],
  },
],
})

// ShoppingCartProvider.tsx - Stateful component with visual settings
import { createContext, useContext, useState } from 'react'
import { createSchema } from '@weaverse/hydrogen'

interface CartSettings {
showMiniCart: boolean
cartSlideDirection: 'left' | 'right'
enableQuickAdd: boolean
maxQuantityPerItem: number
}

export function ShoppingCartProvider({ 
children, 
showMiniCart = true,
cartSlideDirection = 'right',
enableQuickAdd = false,
maxQuantityPerItem = 10 
}: CartSettings & { children: React.ReactNode }) {
let [isOpen, setIsOpen] = useState(false)
let [items, setItems] = useState([])

// Complex cart logic here...

return (
  <CartContext.Provider value={{
    isOpen, setIsOpen, items,
    showMiniCart, cartSlideDirection, 
    enableQuickAdd, maxQuantityPerItem
  }}>
    {children}
  </CartContext.Provider>
)
}

export let schema = createSchema({
type: 'cart-provider',
title: 'Shopping Cart Settings',
settings: [
  {
    group: 'Cart Behavior',
    inputs: [
      {
        type: 'toggle',
        name: 'showMiniCart',
        label: 'Show Mini Cart',
        defaultValue: true,
      },
      {
        type: 'select',
        name: 'cartSlideDirection',
        label: 'Cart Slide Direction',
        options: [
          { value: 'left', label: 'Slide from Left' },
          { value: 'right', label: 'Slide from Right' },
        ],
        defaultValue: 'right',
      },
      {
        type: 'toggle',
        name: 'enableQuickAdd',
        label: 'Enable Quick Add to Cart',
        defaultValue: false,
      },
      {
        type: 'range',
        name: 'maxQuantityPerItem',
        label: 'Max Quantity per Item',
        min: 1,
        max: 50,
        step: 1,
        defaultValue: 10,
      },
    ],
  },
],
})