Weaverse FAQ

Find comprehensive answers to the most common questions about Weaverse development, deployment, and usage. This FAQ covers everything from basic concepts to advanced implementation details.

Getting Started & Basics

What is Weaverse and how is it different from Shopify Liquid themes?

Weaverse is a visual page builder and CMS designed specifically for Shopify Hydrogen storefronts. Unlike traditional Liquid themes:

Modern Architecture: Built with React Router v7, TypeScript, and modern React patterns
Visual Editing: Drag-and-drop interface for merchants, with Studio-only editing code kept out of the storefront runtime
Developer Control: Full component-level customization while maintaining merchant usability
Performance First: Server-side rendered, cached at the edge, and deployable to Shopify Oxygen
Headless Integration: Native Shopify Storefront API integration with advanced caching

Do I need React/TypeScript knowledge to use Weaverse?

For Merchants: No coding knowledge required. Weaverse Studio provides an intuitive visual interface for building pages, managing content, and customizing designs. For Developers: Yes, building custom components requires:

React knowledge (hooks, components, props)
Basic TypeScript understanding
Familiarity with Shopify Hydrogen and React Router v7
Understanding of modern CSS (Tailwind recommended)

What’s the difference between Weaverse Studio and the SDK?

Weaverse Studio: Shopify app (installed from App Store) that provides a visual page builder interface for merchants to create and edit content
Weaverse SDK: Development packages (@weaverse/core, @weaverse/react, @weaverse/hydrogen) that developers use to create custom components and themes
Integration: Developers build components with the SDK, then merchants use Studio to visually arrange and configure these components

Can I use Weaverse without the visual editor?

While the SDK packages can technically be used independently, Weaverse is designed as a complete visual page building solution. The primary value comes from the combination of:

Developer-built components (SDK)
Merchant-friendly visual editing (Studio)
Seamless integration between both

Using just the SDK would require building your own content management interface, which defeats the purpose of Weaverse’s no-code editing experience.

What are the system requirements?

Development Environment:

Node.js 22.12 or newer (required by the current Pilot project)
npm/pnpm package manager
Git for version control
Modern code editor (VS Code/Cursor recommended)

Browser Support:

Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
Mobile browsers with ES2020 support

Shopify Requirements:

Any Shopify plan (Basic to Plus)
Storefront API access
Hydrogen app (for production deployment)

How much does Weaverse cost?

Weaverse offers different pricing tiers to suit various business needs. For the most up-to-date pricing information, features, and subscription plans, please visit:

Official Pricing: weaverse.io/pricing
Shopify App Store: Check the app listing for current pricing
Enterprise Solutions: Contact sales for custom enterprise pricing

Pricing may vary based on features, usage, and business requirements.

Is Weaverse production-ready?

Weaverse is used for production Hydrogen storefronts. Production readiness still depends on your own theme: test checkout, localization, caching, accessibility, analytics, and third-party integrations before launch.

What’s included in the Pilot theme?

The Pilot theme is a comprehensive starter theme including:

Complete e-commerce sections (product grids, featured collections, hero sections)
Responsive design system with Tailwind CSS
Advanced product pages with variant selection
Cart and checkout integration
SEO optimization and structured data
Multi-language and multi-market support
Hydrogen SSR and theme-level performance controls

How does Weaverse compare to other page builders?

Weaverse offers unique advantages: Technical Architecture:

✅ React Router v7 (SSR) for optimal performance
✅ TypeScript support for better developer experience
✅ Component-based architecture for reusability
✅ Control over the storefront React code and dependencies

Developer Experience:

✅ Modern development workflow with hot reload
✅ Custom component creation with schemas
✅ Git-based version control integration
✅ Extensive TypeScript definitions

Merchant Experience:

✅ Intuitive drag-and-drop interface
✅ Real-time preview
✅ Shopify-native integration
✅ Mobile-responsive editing

Can I try Weaverse before committing?

Yes! Several ways to evaluate Weaverse:

Studio Demo: Try the visual editor at studio.weaverse.io/demo
Live Storefront: Browse the Pilot theme at pilot.weaverse.dev
Free SDK: Download and test development packages locally
5-minute Quickstart: Follow our installation guide
Community Support: Get help in our Slack community

Technical Architecture

How does Weaverse work with React Router v7 (formerly Remix)?

Weaverse v5 fully supports React Router v7:

Route Loaders: Standard React Router data loading patterns
Component Loaders: Weaverse-specific data loading at the component level
Type Generation: npx react-router typegen for type safety
Route Configuration: Routes registered in app/routes.ts with React Router v7 helpers
SSR & Hydration: Seamless server-side rendering with client hydration

Migration from older Remix versions is handled through our v5 Migration Guide.

What’s the difference between @weaverse/core, @weaverse/react, and @weaverse/hydrogen?

@weaverse/core: Framework-agnostic foundation with core logic and utilities
@weaverse/react: React-specific components, hooks, and utilities
@weaverse/hydrogen: Shopify Hydrogen integration with e-commerce specific features

Dependency Chain: @weaverse/hydrogen → @weaverse/react → @weaverse/core

How does server-side rendering work in Weaverse?

Weaverse renders the initial page on the server:

Request Time: Route and component loaders fetch the data required for the request
Server Render: React renders the page HTML with the resolved Weaverse data
Client Hydration: React hydrates the page for interactive components
Navigation: React Router runs the loaders required by client-side navigation
Studio Preview: Design-mode updates refresh the active Weaverse render tree

Actual performance depends on the storefront code, data sources, cache strategy, and deployed runtime.

What’s the difference between component loaders and route loaders?

Route Loaders (React Router v7):

// app/routes/products/product.tsx
// Registered inside prefix("products", [...]) as
// route(":productHandle", "routes/products/product.tsx")
import type { LoaderFunctionArgs } from 'react-router';

export async function loader({ params, context }: LoaderFunctionArgs) {
  // Provides data to entire route
}

Component Loaders (Weaverse):

// app/sections/featured-product.tsx
import type { ComponentLoaderArgs } from '@weaverse/hydrogen';

export async function loader({ weaverse, data }: ComponentLoaderArgs) {
  // Provides data only to this component
}

Key Differences:

Route loaders: Entire route scope, accessed via useLoaderData()
Component loaders: Component scope, accessed via props.loaderData

How does the createSchema() function validate schemas?

import { createSchema } from '@weaverse/hydrogen';

export let schema = createSchema({
  type: 'my-component',
  title: 'My Component',
  settings: [
    // Validated by createSchema() in non-production environments
  ]
});

Validation Features:

Development-time schema validation with Zod
TypeScript inference and autocompletion
Consistent validation rules across components

Do I need forwardRef for components in React 19?

React 19 (Current): ref can be declared as a normal prop. It is not forwarded automatically; pass it to the DOM element that Weaverse should select:

import type { ComponentProps } from 'react';

interface Props extends ComponentProps<'section'> {
  title: string;
}

function MyComponent({ ref, title, ...rest }: Props) {
  return <section ref={ref} {...rest}>{title}</section>;
}

React 18 and Earlier (legacy pattern):

const MyComponent = forwardRef<HTMLElement, Props>((props, ref) => {
  return <section ref={ref} {...props} />;
});

Weaverse Compatibility:

✅ React 19 components work seamlessly with Weaverse Studio
✅ React 19’s ref prop pattern works when the ref is attached to the root DOM element
✅ No migration needed for existing forwardRef components
✅ Both patterns supported for backward compatibility

Initial Load: Server renders complete HTML
Hydration: React attaches to existing DOM
Navigation: React Router handles client-side routing
Data Loading: React Router runs the loaders required by the new route
Component Updates: Real-time updates from Studio

Hydration Mismatch Prevention:

Consistent server/client rendering
Proper data serialization
Environment-aware components

What’s the data flow between Studio and local development?

Local Development: Components register with the Weaverse client
Studio Preview: Studio loads the local storefront URL in an iframe
Runtime Bridge: The storefront and Studio exchange preview updates through the Studio bridge
Data Sync: Studio changes update the active component props and render tree
Production Build: The Hydrogen build includes the registered components and storefront code

Can I use React Context, Redux, or Zustand with Weaverse?

React Context: ✅ Full support

const ThemeContext = createContext();

function MyComponent() {
  const theme = useContext(ThemeContext);
  // Use context in Weaverse components
}

State Management Libraries: ✅ Compatible

Redux Toolkit
Zustand
Jotai
Valtio

Best Practices:

Use React Context for theme/configuration
State management for complex app logic
Weaverse handles content/page state

How does component state management work?

Local State: Standard React patterns

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);
  // Local component state
}

Global State: Via hooks and context

function MyComponent() {
  const weaverse = useWeaverse(); // Weaverse global state
  const settings = useThemeSettings(); // Theme settings
}

Persistent State: Through Weaverse Studio

Component props persisted in Weaverse
Theme settings saved globally
Page data managed by Studio

What’s the build process for Weaverse projects?

Standard Hydrogen Build Process:

Component Registration: Your static components array is imported into the Weaverse renderer
React Router Build: Standard Vite/React Router compilation
Type Generation: npx react-router typegen for route types
Asset Build: Vite handles CSS, imported assets, and JavaScript bundling

Development:

npm run dev  # Hot reload with Weaverse component sync

Production:

npm run build  # Optimized build with code splitting

Weaverse-Specific Steps:

createSchema() validates schemas when the module is evaluated in non-production environments
The development server connects to Studio for live editing
At runtime, route loaders request page data and apply the caching strategy configured by the theme

How does code splitting work with Weaverse components?

Automatic Code Splitting:

Route-based splitting via React Router v7
Any dynamic imports already defined by your application

Manual Code Splitting:

import { lazy } from 'react';

const HeavyComponent = lazy(() => import('./heavy-component'));

// Use with Suspense boundary

Weaverse does not automatically split every registered section. Use dynamic imports deliberately for heavy code and inspect the generated Vite chunks after a production build.

Development Workflow

How do I create a custom component from scratch?

Create Component File:

// app/sections/my-section.tsx
import { createSchema } from '@weaverse/hydrogen';

interface MyComponentProps {
  title?: string;
  description?: string;
}

function MyComponent(props: MyComponentProps) {
  const { title, description, ...rest } = props;
  
  return (
    <section {...rest} className="py-12 px-4">
      {title && <h2 className="text-2xl font-bold">{title}</h2>}
      {description && <p className="mt-4 text-gray-600">{description}</p>}
    </section>
  );
}

export default MyComponent;

export let schema = createSchema({
  type: 'my-component',
  title: 'My Component',
  settings: [
    {
      group: 'Content',
      inputs: [
        { type: 'text', name: 'title', label: 'Title' },
        { type: 'textarea', name: 'description', label: 'Description' }
      ]
    }
  ]
});

Register Component:

// app/weaverse/components.ts
import * as MyComponent from '~/sections/my-section';

export const components = [
  MyComponent,
  // Other components...
];

What’s the difference between components and sections?

Components: Small, reusable UI elements

// Button component
export let schema = createSchema({
  type: 'button',
  title: 'Button',
  // Simple, focused functionality
});

Sections: Page-level building blocks

// Hero section
export let schema = createSchema({
  type: 'hero-section',
  title: 'Hero Section',
  childTypes: ['heading', 'paragraph', 'button'], // Can contain components
  // Complex layout functionality
});

Usage Guidelines:

Components: Buttons, cards, forms, media elements
Sections: Headers, heroes, product grids, feature areas

Can I use TypeScript strict mode?

Current Limitation: Weaverse disables strict mode by default for compatibility with Shopify Hydrogen patterns. Workarounds:

Use strict type checking in individual files
Enable strict mode for specific directories
Use ESLint rules for additional type safety

Future Support: React Router v7 improvements will enable stricter TypeScript support.

How do I debug Weaverse components?

Development Debugging:

function MyComponent(props) {
  console.log('Props:', props); // Basic logging
  
  useEffect(() => {
    console.log('Component mounted');
  }, []);
  
  return <div>...</div>;
}

React DevTools: Full support for component inspection Studio Debugging:

Check browser console for Studio connection issues
Inspect WebSocket messages in Network tab
Use Studio’s component inspector

Production Debugging:

Source maps enabled in development builds
Performance profiling with React DevTools
Error boundaries for graceful failure handling

Can I use custom CSS/Sass/CSS-in-JS?

Tailwind CSS (recommended):

<div className="bg-blue-500 text-white p-4 rounded-lg">

Custom CSS:

// Import in component
import './styles.css';

<div className="my-custom-class">

CSS-in-JS:

import styled from 'styled-components';

const StyledComponent = styled.div`
  background: blue;
  padding: 1rem;
`;

Sass/SCSS: Full support via Vite configuration

How do I handle responsive design?

Tailwind Responsive Classes:

<div className="w-full md:w-1/2 lg:w-1/3">
  <h2 className="text-xl md:text-2xl lg:text-3xl">
    Responsive heading
  </h2>
</div>

CSS Custom Properties:

const style = {
  '--mobile-size': '1rem',
  '--desktop-size': '1.5rem',
} as CSSProperties;

<div style={style} className="text-[var(--mobile-size)] md:text-[var(--desktop-size)]">

Schema Configuration:

{
  type: 'range',
  name: 'mobileSize',
  label: 'Mobile Size',
}

What testing strategies work with Weaverse?

Unit Testing:

// With Vitest
import { render, screen } from '@testing-library/react';
import MyComponent from './my-component';

test('renders component correctly', () => {
  render(<MyComponent title="Test" />);
  expect(screen.getByText('Test')).toBeInTheDocument();
});

Component Testing:

Test component rendering with various props
Test schema validation
Test data loading functionality

E2E Testing:

Playwright for Studio integration testing
Test visual editing workflows
Test production deployment flows

How do I organize components in large projects?

Recommended Structure:

app/
├── components/           # Reusable UI components
│   ├── ui/              # Basic UI elements
│   └── forms/           # Form components
├── sections/            # Page sections
│   ├── header/          # Header variants
│   ├── hero/            # Hero sections
│   └── product/         # Product sections
├── layouts/             # Layout components
└── utils/               # Shared utilities

Component Organization:

Group related components in folders
Use barrel exports (index.ts files)
Share common utilities
Maintain consistent naming conventions

Can I use GitHub Copilot/AI assistants with Weaverse?

Full AI Assistant Support:

GitHub Copilot works excellently with Weaverse patterns
Claude Code integration via MCP server
TypeScript IntelliSense for better AI suggestions

Weaverse MCP Server:

npx -y @weaverse/mcp
# Docs search works without a key.
# Add WEAVERSE_API_KEY in your MCP client config to read and edit
# project, page, and theme settings data.

AI-Friendly Patterns:

Well-documented component schemas
Consistent TypeScript patterns
Clear component structure

How does hot reload work during development?

Development Server:

npm run dev  # Starts both Studio and Remix servers

Hot Reload Features:

Component changes refresh instantly
Schema updates reload Studio
CSS changes apply without refresh
TypeScript errors show in real-time

Studio Integration:

Live preview updates automatically
Component registration changes reflect immediately
Error boundaries prevent crashes during development

Merchant/Studio Questions

Can non-technical users really build pages?

Yes! Weaverse Studio is designed for non-technical users: Visual Interface:

Drag-and-drop section placement
Inline text editing
Visual property controls
Real-time preview

No Code Required:

Point-and-click customization
Form-based content entry
Media upload and management
Color and typography controls

Merchant-Friendly Features:

Undo/redo functionality
Save as you go
Preview across device sizes
Guided onboarding

Can multiple team members work simultaneously?

Current Status: Weaverse Studio currently supports single-editor mode per page to prevent conflicts. Available Collaboration Features:

Multiple team members can access the same project
Different team members can work on different pages simultaneously
Change history tracking for accountability
Project sharing capabilities

Best Practices for Team Collaboration:

Coordinate page assignments to avoid conflicts
Use clear naming conventions for pages and components
Communicate changes through your team’s usual channels
Consider development/staging workflows for major changes

What happens if I break something in the editor?

Current Safety Features:

Error Prevention: The editor validates changes and prevents invalid configurations
Manual Save: Remember to save your changes regularly using the save button

Planned Features (coming soon):

Auto-save: Automatic saving of changes as you work
Undo/Redo: Full action history with Ctrl+Z/Cmd+Z support
Version History: Restore previous versions of your pages
Change Tracking: Detailed history of all modifications

Current Recovery Options:

Make sure to save your work frequently to prevent data loss
Ask for help in our Slack community
For developers: changes can be reverted through your git workflow if needed

How do I handle seasonal campaigns?

Campaign Management Strategies:

Create dedicated campaign pages in Weaverse Studio
Build reusable campaign components (banners, CTAs, product showcases)
Plan content updates in advance
Use consistent branding and messaging

Best Practices:

Create campaign-specific pages ahead of time
Use consistent branding and messaging across campaign elements
Test campaign layouts before going live
Keep campaign assets organized in your component library
Document campaign components for easy reuse

Technical Implementation:

Build flexible banner and promotion components
Use Weaverse’s component settings for easy campaign customization
Leverage Shopify’s discount and promotion features alongside visual elements

Can I A/B test different layouts?

The SDK includes @weaverse/experiments for deterministic server-side variant assignment. It does not replace an analytics platform: persist the assignment, attach it to downstream events, and evaluate results in Shopify Analytics, GA4, or your own warehouse. See the A/B testing section of the multi-project guide.

How do I backup/restore my designs?

Keep component code, schemas, and theme configuration in version control. Backup and restore options for Studio-managed page data can depend on the account and current Studio capabilities; do not assume that self-service JSON export, version history, or point-in-time restore is available. Contact Weaverse support before a risky bulk edit or when content recovery is required.

Is there a mobile app for editing?

Studio is a web application; these docs do not document a native mobile editing app. Use a desktop browser for editing and use Studio’s responsive preview plus real-device storefront testing to verify mobile layouts. Check with support for the current browser/device support policy.

Performance & SEO

Does Weaverse add JavaScript bloat?

Weaverse is a React runtime, so it does ship JavaScript — @weaverse/hydrogen brings its own renderer, stores, and Studio integration on top of React, React Router v7, and Hydrogen. What it avoids is the extra per-app script layer that Liquid page builders add. How it keeps the payload in check: Server-Side Rendering:

Pages render on the server through Hydrogen and React Router v7
The client hydrates the already-rendered markup rather than building it

Bundling:

Vite applies tree-shaking and the code-splitting boundaries defined by the theme
All registered components can affect the client bundle, so inspect production output when adding large dependencies

Caching:

Storefront API and Weaverse Builder API responses cached with Hydrogen caching strategies
Static assets and HTML cached at the Oxygen edge

Measure your own bundle:

npm run build # Check the build output for large chunks

Real numbers depend on your theme, your sections, and your third-party scripts. Measure your own storefront rather than relying on generic figures.

How does it compare to Liquid in performance?

The architectures are different, so there is no universal performance winner. A Weaverse storefront uses Hydrogen SSR, React hydration, Vite bundles, Shopify’s image CDN, and the caching strategy defined by the theme. A Liquid storefront’s cost depends heavily on its theme and installed app scripts. Compare the same pages, content, and third-party integrations using production builds and field data.

Weaverse doesn’t guarantee a specific Lighthouse score or load-time improvement — those depend on your theme, content, and third-party scripts. Benchmark your own storefront before and after migrating.

What’s the impact on Core Web Vitals?

Weaverse does not guarantee Core Web Vitals scores. Results depend on the selected sections, image sizing, fonts, app scripts, loader latency, and cache configuration. Test a production deployment with Lighthouse and monitor field data in Search Console. When a metric regresses, profile the affected route rather than assuming the page builder is the only source.

How does image optimization work?

Shopify Native Image Handling:

Shopify Images: Weaverse uses Shopify’s native image system directly
Media Manager: Upload and manage images through Shopify’s media manager
Shopify CDN: Images served from Shopify’s global CDN infrastructure
Built-in Optimization: Shopify handles format conversion and compression

Implementation:

import { Image } from '@shopify/hydrogen';

// Example GraphQL query for image data
const IMAGE_QUERY = `#graphql
  query {
    product {
      featuredImage {
        altText
        url
        height
        width
      }
    }
  }
`;

export default function ProductImage({product}) {
  if (!product.featuredImage) {
    return null;
  }

  return (
    <Image
      data={product.featuredImage}
      sizes="(min-width: 45em) 50vw, 100vw"
      aspectRatio="4/5"
    />
  );
}

Shopify Image Features:

Automatic WebP/AVIF format delivery
Responsive image generation with srcset
Global CDN delivery
Built-in lazy loading support
SEO-optimized alt text and structured data

Learn More: Shopify Image Component

Can I use CDN and edge caching?

Shopify Oxygen (Primary Deployment):

✅ Built on Cloudflare Workers: Global edge network with 200+ data centers
✅ Zero Configuration: Deploy directly from Shopify CLI
✅ Automatic CDN: Global distribution included
✅ Edge Caching: Built-in caching strategies

Deployment to Oxygen:

# Deploy Hydrogen project to Shopify Oxygen
shopify hydrogen deploy

# Automatic benefits:
# - Global Cloudflare Worker deployment
# - Oxygen CDN and cache integration

Edge Caching Features (Oxygen):

Automatic static asset caching
Shopify API response caching
Geographic content distribution

What’s the typical build time?

There is no reliable component-count-to-build-time estimate. Build duration depends on dependencies, generated assets, type checking, the runner, and cache state. Record npm run build on the same CI runner over time and investigate regressions from that baseline.

How do I implement lazy loading?

Images: use Hydrogen’s Image component, which emits native lazy loading and a responsive srcset:

import { Image } from '@shopify/hydrogen';

<Image data={product.featuredImage} loading="lazy" sizes="(min-width: 45em) 50vw, 100vw" />

For the raw Shopify image object stored by an image schema input (typed as WeaverseImage), pass it to Hydrogen’s Image or your theme’s own image component — WeaverseImage is a data type, not a component you can render. Components: split heavy code out with React’s lazy() and Suspense:

import { lazy, Suspense } from 'react';

const HeavyComponent = lazy(() => import('./heavy-component'));

<Suspense fallback={<ComponentSkeleton />}>
  <HeavyComponent />
</Suspense>

Section-level deferral: the component schema has no lazyLoad option — defer work yourself, for example with an Intersection Observer that renders the heavy part only once the section scrolls into view:

function HeavySection(props) {
  const ref = useRef<HTMLDivElement>(null);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setVisible(true);
        observer.disconnect();
      }
    }, { rootMargin: '200px' });
    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  return <div ref={ref}>{visible ? <HeavyContent /> : <ComponentSkeleton />}</div>;
}

Does Weaverse support SSG/ISR?

Dependency Chain: Weaverse → Shopify Hydrogen → React Router v7 Server-Side Rendering: ✅ Via Shopify Hydrogen

Every request is rendered on the server (ssr: true in react-router.config.ts)
Seamless hydration on the client
Powered by React Router v7’s SSR architecture

Static Site Generation / ISR: ❌ Not part of the Weaverse model

Weaverse page data is fetched from the Builder API per request, so pages are not pre-generated at build time
The equivalent speed-up is caching, not prerendering: use Hydrogen caching strategies in your loaders plus the Oxygen edge cache

Implementation — cache instead of prerender:

import { CacheLong } from '@shopify/hydrogen';

export async function loader({ params, context }) {
  return {
    product: await context.storefront.query(PRODUCT_QUERY, {
      variables: { handle: params.handle },
      cache: CacheLong(),
    }),
  };
}

Note: Content published in Studio becomes visible once the relevant cache entry expires or revalidates, so pick cache strategies that match how often your merchants publish.

Migration & Compatibility

How do I migrate from Online Store 2.0?

Weaverse Migration Service: We recommend contacting our Weaverse team directly for migration assistance. What We Provide:

✅ Full-Service Migration: Complete migration from any store project to Hydrogen with Weaverse
✅ Expert Consultation: Assessment of your current theme and migration strategy
✅ Component Conversion: Professional conversion of Liquid sections to React components
✅ Content Migration: Seamless transfer of all content, settings, and customizations
✅ Testing & QA: Thorough testing before go-live
✅ Training & Support: Team training on Weaverse workflow

Migration Process:

Initial Consultation: Review your current store and requirements
Migration Planning: Custom strategy based on your specific needs
Component Development: Convert and enhance your existing functionality
Content Transfer: Migrate all pages, settings, and data
Testing & Launch: Comprehensive testing and smooth deployment

Contact for Migration:

Join our Slack community to discuss your migration
Get migration help in our Slack community
We handle migrations from any platform to Hydrogen + Weaverse

Can I migrate from other Hydrogen themes?

Yes! Migration from existing Hydrogen themes is straightforward: Component Migration:

// Existing Hydrogen component
function ProductCard({ product }) {
  return <div>...</div>;
}

// Weaverse-enabled version (React 19)
function ProductCard({ ref, product, ...rest }) {
  return <div ref={ref} {...rest}>...</div>;
}

export let schema = createSchema({
  type: 'product-card',
  title: 'Product card',
  settings: [],
});

Key Changes:

Export a valid Weaverse schema
Attach the React 19 ref prop to the component’s root DOM element
Add the component to the static component registry
Define the settings merchants can edit in Studio

What happens to my metafields and custom data?

Full Compatibility: Weaverse maintains complete compatibility with Shopify metafields: Metafield Access:

// In component loaders
export const loader = async ({ weaverse }) => {
  const { storefront } = weaverse;
  
  const product = await storefront.query(PRODUCT_QUERY, {
    variables: { handle: 'product-handle' }
  });
  
  // Access metafields normally
  const customData = product.metafields;
  return { product, customData };
};

Custom Data Integration:

Product metafields: Full access
Collection metafields: Complete support
Customer metafields: Available in customer routes
Store metafields: Global access via settings

Can I run Weaverse and traditional themes simultaneously?

Hybrid Approach: Yes, with proper configuration: Use Cases:

Gradual migration strategy
A/B testing new vs. old
Feature-specific implementations
Risk mitigation during transition

Implementation:

Deploy Weaverse on subdomain (shop-new.example.com)
Use URL-based routing for specific pages
Gradually migrate sections of the site
Maintain both themes during transition

Considerations:

SEO implications of split traffic
Analytics tracking setup
Customer experience consistency
Maintenance overhead

How do I handle URL redirects?

Built-in Redirect Handling:

// In route loaders
export const loader = ({ request }) => {
  const url = new URL(request.url);
  
  // Handle legacy URLs
  if (url.pathname.startsWith('/old-path/')) {
    throw redirect('/new-path/' + url.pathname.slice(11));
  }
};

Redirect Configuration (Shopify Oxygen/Cloudflare Workers):

// Handle redirects in your React Router loader
export async function loader({ request, params }) {
  const url = new URL(request.url);
  
  // Legacy URL redirects
  if (url.pathname.startsWith('/old-path/')) {
    return redirect(url.pathname.replace('/old-path/', '/new-path/'), 301);
  }
  
  // Product handle redirects
  if (params.handle === 'old-product-handle') {
    return redirect('/products/new-product-handle', 301);
  }
  
  // Continue with normal loading...
}

Migration Strategy:

Document all current URLs
Map old URLs to new structure
Implement redirect rules
Test redirect chains
Monitor 404 errors post-migration

Is Weaverse compatible with Shopify’s checkout extensibility?

Weaverse renders the storefront before checkout. Checkout extensibility runs in Shopify Checkout and is configured through Shopify apps, Functions, and UI extensions rather than through the Weaverse page renderer. Checkout Extensions:

Payment customizations
Shipping method modifications
Order summary enhancements
Custom validation rules

Send customers to the checkoutUrl returned by Hydrogen’s cart API. Any checkout extension must be implemented and tested separately in Shopify Checkout.

Can I migrate content from other page builders?

There is no universal automatic importer for third-party page-builder layouts. A migration normally requires mapping the source content model, rebuilding sections as Weaverse components, recreating page assignments, and planning URL/SEO redirects. Existing Hydrogen projects can follow the integration guide. Contact the Weaverse team to confirm whether migration services are available for your source platform and scope.

What about existing Shopify Plus customizations?

Weaverse does not replace Shopify Plus features, but a headless storefront must integrate each required feature explicitly. Audit B2B catalogs, Markets, customer accounts, Functions, checkout extensions, analytics, and any legacy Shopify Scripts during migration. Legacy Scripts should be migrated according to Shopify’s current guidance rather than assumed to work through Hydrogen.

Shopify Integration

Which Shopify APIs does Weaverse use?

Primary APIs:

Storefront API: Product data, cart operations, customer data
Weaverse Builder API: Published page and theme data
Admin API / webhooks: Only when your own server-side integration requires them

API Usage Patterns:

// Storefront API usage
const { products } = await storefront.query(PRODUCTS_QUERY, {
  variables: { first: 20, query: 'available:true' }
});

Apply the caching and retry strategy appropriate to each API. The Weaverse SDK does not add a universal retry policy to arbitrary Storefront or Admin API calls.

Can I use Shopify apps with Weaverse?

Compatibility depends on how the app integrates. Apps that only inject Liquid snippets will not automatically appear in a Hydrogen storefront. Apps with public APIs, React packages, web pixels, Functions, or checkout extensions can usually be integrated through their documented headless path. Verify each app individually. Implementation Example:

// Integrating review app
const ProductReviews = ({ productId }) => {
  const reviews = useReviews(productId); // Custom hook for app API
  return <ReviewDisplay reviews={reviews} />;
};

How does checkout work?

Checkout Options: 1. Shopify Checkout (Recommended):

// Redirect to Shopify's optimized checkout
const checkoutUrl = cart.checkoutUrl;
window.location.href = checkoutUrl;

Hydrogen does not provide a helper for building a replacement checkout. Create and update the cart with Hydrogen’s cart API, then redirect to the cart’s Shopify-hosted checkoutUrl. Features:

Mobile-optimized checkout flow
Multiple payment providers
Conversion optimization
Security and PCI compliance
International payment methods

Does it support Shopify Markets and B2B?

Shopify Markets behaviour comes from your Storefront API context, route locale, and Shopify configuration. Weaverse can render localized page content, but your theme must still pass the correct country/language context and test pricing, URLs, shipping, tax, and checkout behaviour per market. Implementation:

// Market-aware pricing
const { products } = await storefront.query(PRODUCTS_QUERY, {
  variables: { 
    country: market.country,
    language: market.language 
  }
});

Shopify B2B requires the appropriate Shopify plan, customer-account flow, company/location context, and catalog-aware Storefront API queries. Checking a customer tag is not a complete B2B implementation; follow Shopify’s current B2B guidance and validate the full buying flow.

Can I use Shopify Flow and Scripts?

Shopify Flow runs on Shopify’s platform rather than inside the Hydrogen renderer. Flows can continue to react to supported Shopify/app events, but verify any workflow that previously depended on Liquid theme code or storefront-injected scripts. Legacy Shopify Scripts are not a Hydrogen or Weaverse feature and should not be assumed to work unchanged. Migrate discount, delivery, payment, and validation logic to the applicable Shopify Functions or checkout-extensibility API, then test the resulting cart and checkout flow.

How do customer accounts work?

Account Management:

// Current Pilot uses Hydrogen's Customer Account API client.
export async function loader({ context }) {
  await context.customerAccount.handleAuthStatus();
  return {};
}

Current Pilot includes Customer Account API routes for authentication, profile details, orders, and addresses. Wishlists, subscriptions, rewards, and other account features require their own provider/API integration.

Does it work with Shopify POS?

Weaverse renders the Hydrogen online storefront; it does not run inside Shopify POS. Products, inventory, customers, and orders may share Shopify backend data, but POS extensions, channel-specific pricing, discounts, identity, and analytics must be configured and tested separately.

Can I use native Shopify search?

Search Options: 1. Native Shopify Search: ✅ Default implementation

const { products } = await storefront.query(SEARCH_QUERY, {
  variables: { query: searchTerm }
});

Third-party search providers such as Algolia or a custom search API can be integrated when they expose a supported headless API. Features such as predictive search, faceting, analytics, typo tolerance, and merchandising depend on the selected provider and your implementation.

How do I handle subscriptions?

Subscription support is provider-specific. Confirm that the app exposes a Hydrogen/headless API, then implement selling-plan selection in the storefront and use the provider’s supported customer-portal flow. Liquid-only widgets do not automatically work in Hydrogen.

What about Shopify Functions?

Shopify Functions execute on Shopify’s platform; storefront code does not call a Function directly. Build and deploy the Function through a Shopify app, configure it in Shopify Admin where required, and let the normal cart/checkout request invoke it. Weaverse sections may collect storefront input, but the Function’s supported target and Shopify configuration determine the actual discount, delivery, payment, or validation behavior.

Deployment & DevOps

Where can I deploy?

Supported Deployment Options: Shopify Oxygen (Primary & Recommended):

# Deploy to Oxygen
npx shopify hydrogen deploy

✅ Full Weaverse Support: Complete integration with Weaverse Studio
✅ Native Shopify Integration: Seamless Shopify API access
Runs on Shopify’s managed Oxygen worker platform
Uses Shopify’s deployment and environment-variable workflow
Requires the same application-level validation, monitoring, and capacity testing as any production storefront

Oxygen is the primary deployment target for Pilot. Other worker or container targets require platform-specific adaptation; see the deployment guides for the required changes.

How do I set up staging environments?

Multi-Environment Setup: 1. Environment Configuration:

# Production .env
PUBLIC_STORE_DOMAIN=production-store.myshopify.com
PUBLIC_STOREFRONT_API_TOKEN=prod_token
WEAVERSE_PROJECT_ID=prod_project_id

# Staging .env.staging
PUBLIC_STORE_DOMAIN=staging-store.myshopify.com
PUBLIC_STOREFRONT_API_TOKEN=staging_token
WEAVERSE_PROJECT_ID=staging_project_id

2. Deployment Pipeline:

# GitHub Actions example for Shopify Oxygen
name: Deploy to Staging
on:
  push:
    branches: [staging]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Deploy to Shopify Oxygen Staging
        run: |
          npm ci
          npm run build
          npx shopify hydrogen deploy --environment staging
        env:
          SHOPIFY_HYDROGEN_DEPLOYMENT_TOKEN: ${{ secrets.STAGING_SHOPIFY_TOKEN }}

3. Branch Strategy:

main → Production
staging → Staging environment
feature/* → Preview deployments
develop → Development environment

How do I set up CI/CD pipelines?

GitHub Actions Example:

name: CI/CD Pipeline
on:
  push:
    branches: [main, staging]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '22'
          cache: 'npm'
      
      - run: npm ci
      - run: npm run typecheck
      - run: npm run test:run
      - run: npm run build

  deploy:
    needs: test
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v3
      - name: Deploy to Production
        run: |
          npm ci
          npm run build
          npx shopify hydrogen deploy
        env:
          SHOPIFY_HYDROGEN_DEPLOYMENT_TOKEN: ${{ secrets.SHOPIFY_TOKEN }}

Pipeline Features:

Automated testing
Type checking
Build verification
Preview deployments
Production deployment
Rollback capabilities

Container Features:

Multi-stage builds
Optimized image size
Security scanning
Health check endpoints
Horizontal scaling
Load balancer integration

How do I handle environment variables?

Environment Configuration: Development (.env.local):

# Shopify Configuration
PUBLIC_STORE_DOMAIN=dev-store.myshopify.com
PUBLIC_STOREFRONT_API_TOKEN=dev_storefront_token
SESSION_SECRET=<generated-random-secret>

# Weaverse Configuration
WEAVERSE_PROJECT_ID=dev_project_id

# Optional Services
GOOGLE_ANALYTICS_ID=GA-DEV-ID
KLAVIYO_API_KEY=dev_klaviyo_key

For stores on a Shopify plan, install the Hydrogen sales channel, create one Hydrogen storefront project, then run npx shopify hydrogen env pull or copy values from Hydrogen sales channel → Storefront Settings → Environments and variables. For development stores or stores without a Shopify plan, install the Headless sales channel and copy the Storefront API values into .env. Production Security:

Use platform secret management
Rotate secrets regularly
Limit access permissions
Audit secret usage
Monitor for leaks

Shopify Oxygen:

# Set environment variables in Shopify CLI
shopify hydrogen env set SECRET_NAME "secret-value" --environment production

How do I monitor production performance?

Performance Monitoring: 1. Built-in Analytics:

Shopify Analytics (built into Oxygen)
Core Web Vitals reporting
Oxygen performance metrics
Edge cache analytics

2. Third-party Solutions:

// Sentry error tracking
import * as Sentry from '@sentry/react';

Sentry.init({
  dsn: process.env.SENTRY_DSN,
  integrations: [new Sentry.BrowserTracing()],
  tracesSampleRate: 1.0,
});

// DataDog APM
import { datadogRum } from '@datadog/browser-rum';

datadogRum.init({
  applicationId: process.env.DD_APPLICATION_ID,
  clientToken: process.env.DD_CLIENT_TOKEN,
});

Metrics to Track:

Core Web Vitals (LCP, FID, CLS)
Error rates and types
API response times
Conversion funnel metrics
User session recordings

Alerting Setup:

Performance degradation alerts
Error rate thresholds
Uptime monitoring
Security incident notifications

Troubleshooting

Components not showing in Studio

Common Causes & Solutions: 1. Component Registration Issues:

// ❌ Incorrect - component not exported properly
export MyComponent;

// ✅ Correct - proper component export
export default MyComponent;
export let schema = createSchema({...});

// ❌ Incorrect - missing from components array
export const components = [
  // MyComponent missing here
];

// ✅ Correct - component included
export const components = [
  * as MyComponent,
];

2. Schema Validation Errors:

// ❌ Incorrect - invalid schema structure
export let schema = {
  type: 'my-component', // Missing createSchema wrapper
};

// ✅ Correct - proper schema validation
export let schema = createSchema({
  type: 'my-component',
  title: 'My Component'
});

3. TypeScript Compilation Errors:

Check browser console for TypeScript errors
Run npm run typecheck to identify issues
Ensure all imports resolve correctly
Verify props interface matches component usage

Debugging Steps:

Check browser console for errors
Verify component appears in network requests
Test component registration with console.log
Validate schema with createSchema function
Restart development server

Build errors and TypeScript issues

Common Build Errors: 1. TypeScript Configuration Issues:

# Error: Cannot find module '@weaverse/hydrogen'
npm install @weaverse/hydrogen @weaverse/react @weaverse/core

# Error: Type definitions missing
npm run typecheck  # Identify specific type issues

2. Import Resolution Problems:

// ❌ Incorrect - wrong import path
import { createSchema } from 'weaverse';

// ✅ Correct - proper import path
import { createSchema } from '@weaverse/hydrogen';

3. React Router v7 Type Issues:

// ❌ Incorrect - old Remix imports
import type { LoaderArgs } from '@remix-run/node';

// ✅ Correct - React Router v7 types
import type { Route } from './+types/route-name';
export const loader = ({ params }: Route.LoaderArgs) => {};

Resolution Steps:

Clear all caches: rm -rf node_modules .react-router dist
Reinstall dependencies: npm install
Generate types: npx react-router typegen
Check for version conflicts: npm ls
Update TypeScript configuration if needed

Studio not loading/connecting

Connection Issues: 1. Development Server Problems:

# Verify the local Hydrogen storefront preview is running for Studio
npm run dev

# Check port availability
lsof -i :3456  # Weaverse default port
netstat -an | grep :3456

2. CORS Configuration:

// vite.config.ts - Add CORS headers if needed
export default defineConfig({
  server: {
    cors: {
      origin: 'https://studio.weaverse.io',
      credentials: true
    }
  }
});

3. Environment Variable Issues:

# Verify required environment variables
echo $WEAVERSE_PROJECT_ID
echo $PUBLIC_STORE_DOMAIN
echo $PUBLIC_STOREFRONT_API_TOKEN

# Check .env file exists and is properly formatted
cat .env

4. Browser/Network Issues:

Clear browser cache and cookies
Disable ad blockers/extensions
Check firewall settings
Try incognito/private browsing mode
Verify internet connectivity

Debugging Tools:

Browser Developer Tools (Network tab)
Check WebSocket connections
Inspect Console for error messages
Test direct localhost access

Performance problems

Performance Diagnosis: 1. Bundle Size Issues:

# Analyze bundle size
npm run build  # Check build output for large chunks

2. Image Optimization Problems:

// ❌ Incorrect - unoptimized raw <img>
<img src={image.url} />

// ✅ Correct - Hydrogen's Image component (responsive srcset + lazy loading)
import { Image } from '@shopify/hydrogen';

<Image
  data={image}          // the value stored by an `image` schema input
  width={800}
  height={600}
  loading="lazy"
  sizes="(min-width: 45em) 50vw, 100vw"
/>

WeaverseImage is a TypeScript type describing the image object an image input stores — it is not a component. Render it with Hydrogen’s Image or your theme’s own image component.

3. Component Performance Issues:

// ❌ Incorrect - expensive operations in render
function MyComponent() {
  const expensiveValue = expensiveCalculation(); // Runs every render
  return <div>{expensiveValue}</div>;
}

// ✅ Correct - memoized expensive operations
function MyComponent() {
  const expensiveValue = useMemo(() => expensiveCalculation(), []);
  return <div>{expensiveValue}</div>;
}

Performance Monitoring Tools:

React DevTools Profiler
Chrome Lighthouse
WebPageTest.org
Core Web Vitals extension

Hydration mismatches

Common Hydration Issues: 1. Server/Client Content Differences:

// ❌ Incorrect - different content on server/client
function MyComponent() {
  return <div>{Date.now()}</div>; // Different on server vs client
}

// ✅ Correct - consistent content
function MyComponent() {
  const [timestamp, setTimestamp] = useState<number | null>(null);
  
  useEffect(() => {
    setTimestamp(Date.now()); // Set after hydration
  }, []);
  
  return <div>{timestamp || 'Loading...'}</div>;
}

2. Conditional Rendering Issues:

// ❌ Incorrect - browser-only checks during SSR
function MyComponent() {
  if (typeof window !== 'undefined') {
    return <ClientOnlyComponent />;
  }
  return <ServerComponent />;
}

// ✅ Correct - consistent rendering
function MyComponent() {
  const [isClient, setIsClient] = useState(false);
  
  useEffect(() => {
    setIsClient(true);
  }, []);
  
  return isClient ? <ClientOnlyComponent /> : <ServerComponent />;
}

Prevention Strategies:

Use useEffect for client-only code
Implement proper loading states
Avoid server/client content differences
Test SSR builds thoroughly

API rate limiting

Storefront API throttling and query limits depend on Shopify’s current API policy and the access mode being used. Do not rely on a fixed requests-per-minute figure from this FAQ. Inspect the actual response, follow Shopify’s current Storefront API limits guidance, reduce duplicate queries, and cache data where semantics allow it. For repeated external requests from component loaders, use the cache helper exposed by the Weaverse client:

import { CacheLong } from '@shopify/hydrogen';

// Use built-in caching. fetchWithCache takes (url, options) — the caching
// strategy goes inside that single options object.
export const loader = async ({ context }) => {
  const data = await context.weaverse.fetchWithCache('https://api.example.com/data', {
    method: 'GET',
    strategy: CacheLong(),
  });
};

The public Weaverse SDK documentation does not promise a fixed API quota. If a service returns throttling metadata, follow that service’s documented retry policy rather than applying an unconditional generic retry loop.

CORS and security issues

CORS Resolution: 1. Development CORS Issues:

// vite.config.ts
export default defineConfig({
  server: {
    cors: true,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization'
    }
  }
});

2. Production CORS Configuration:

// server.ts
app.use(cors({
  origin: process.env.NODE_ENV === 'production' 
    ? ['https://yourdomain.com', 'https://studio.weaverse.io']
    : true,
  credentials: true
}));

Security Best Practices:

Use HTTPS in production
Implement proper Content Security Policy
Sanitize user inputs
Validate API requests
Use environment variables for secrets
Regular security audits

Component data not updating

Data Update Issues: 1. Cache Invalidation Problems:

// ❌ Incorrect - stale cache not invalidated
const data = await fetchWithCache('api', {}, CacheLong());

// ✅ Correct - proper cache invalidation
const data = await fetchWithCache(
  'api',
  {},
  CacheShort(), // Use shorter cache for frequently updated data
  {
    tags: ['product-data'], // Cache tags for invalidation
  }
);

2. Component State Synchronization:

// ❌ Incorrect - component doesn't respond to prop changes
function MyComponent({ data }) {
  const [internalData] = useState(data); // Won't update when data prop changes
  return <div>{internalData}</div>;
}

// ✅ Correct - component updates with prop changes
function MyComponent({ data }) {
  const [internalData, setInternalData] = useState(data);
  
  useEffect(() => {
    setInternalData(data); // Update when prop changes
  }, [data]);
  
  return <div>{internalData}</div>;
}

3. WebSocket Connection Issues:

// Check WebSocket connection in Studio
// Look for connection errors in browser console
// Verify development server is running correctly

Debugging Steps:

Check component props in React DevTools
Verify API responses in Network tab
Test cache invalidation manually
Restart development server
Clear browser cache

Support & Resources

Where do I get help?

Community Support (Free): 1. Slack Community:

Join our Slack
Real-time chat with developers and the Weaverse team
Technical support and Q&A
Feature requests and feedback
Component showcase and sharing
Migration assistance discussions

2. GitHub Resources:

Documentation Repository
GitHub Discussions
Code examples and issue tracking

For professional or enterprise support, contact the Weaverse team for the current options and terms. Do not assume response-time or SLA commitments unless they are included in your agreement.

How do I report bugs?

Bug Reporting Process: 1. Check Existing Issues:

Search GitHub Issues
Check our Slack community for similar problems
Review documentation for known limitations

2. Create Detailed Bug Report:

## Bug Description
Clear description of the issue

## Steps to Reproduce
1. Step one
2. Step two
3. Step three

## Expected Behavior
What should happen

## Actual Behavior
What actually happens

## Environment
- Weaverse version: 5.3.4
- Node.js version: 22.0.0
- Browser: Chrome 120
- OS: macOS 14

## Code Sample
```typescript
// Minimal code example that reproduces the issue

3. Include Relevant Information:

Screenshots or screen recordings
Console error messages
Network requests (if relevant)
Configuration files
Steps already attempted

Bug Report Quality: High-quality bug reports get faster resolutions!

Can I request features?

Yes! We actively welcome feature requests: Feature Request Process: 1. Community Discussion:

Ask in our Slack community first
Gauge interest from other developers
Refine the feature concept
Consider implementation approaches

2. GitHub Feature Request:

## Feature Description
Clear description of the proposed feature

## Use Case
Why is this feature needed?
What problem does it solve?

## Proposed Implementation
Ideas for how it could work

## Examples
Similar features in other tools
Mock-ups or wireframes (if applicable)

3. Feature Development Priority:

Community upvotes and comments
Alignment with product roadmap
Technical feasibility
Resource availability

Popular Feature Categories:

New input types for schemas
Enhanced Studio capabilities
Performance optimizations
Integration improvements
Developer experience enhancements

Is there professional support?

Contact the Weaverse team to confirm the professional-support, migration, training, enterprise, and SLA options available for your plan. Do not assume a response time, dedicated account manager, or included service unless it appears in your agreement. Start with support@weaverse.io or the Slack community.

Where’s the community?

Primary Community Platform: Slack Community:

Join our Slack
Real-time discussions with the Weaverse team
Technical support and troubleshooting
Feature requests and feedback
Component sharing and showcase
Migration help and best practices
Developer networking and collaboration

Additional Resources:

GitHub Organization for code and issues
GitHub Discussions for technical discussions
Official documentation and guides

Community Guidelines:

Be respectful and constructive
Share knowledge and help others
Provide detailed information when asking for help
Contribute to open source projects
Follow code of conduct

Getting Involved:

Join our Slack community and help others
Share components and templates in Slack
Report bugs via GitHub Issues
Suggest improvements in GitHub Discussions
Participate in beta testing discussions on Slack

Still Have Questions?

If you can’t find your answer in this comprehensive FAQ: Quick Help Options:

🔍 Browse the documentation for detailed guides
💬 Join our Slack for community support and real-time help
🐛 GitHub Issues for bug reports
💡 GitHub Discussions for feature requests

Professional Support:

📧 Email support@weaverse.io for business inquiries
📅 Schedule a consultation for complex projects
🏢 Ask the Weaverse team about currently available support plans

Learning Resources:

📚 Complete Tutorial (step-by-step walkthrough)
📖 Development Guide for advanced topics
🧪 Example Components for inspiration

We’re always here to help you build amazing Shopify storefronts with Weaverse! 🚀

​Weaverse FAQ

​Getting Started & Basics

​What is Weaverse and how is it different from Shopify Liquid themes?

​Do I need React/TypeScript knowledge to use Weaverse?

​What’s the difference between Weaverse Studio and the SDK?

​Can I use Weaverse without the visual editor?

​What are the system requirements?

​How much does Weaverse cost?

​Is Weaverse production-ready?

​What’s included in the Pilot theme?

​How does Weaverse compare to other page builders?

​Can I try Weaverse before committing?

​Technical Architecture

​How does Weaverse work with React Router v7 (formerly Remix)?

​What’s the difference between @weaverse/core, @weaverse/react, and @weaverse/hydrogen?

​How does server-side rendering work in Weaverse?

​What’s the difference between component loaders and route loaders?

​How does the createSchema() function validate schemas?

​Do I need forwardRef for components in React 19?

​How does Weaverse handle hydration and client-side navigation?

​What’s the data flow between Studio and local development?

​Can I use React Context, Redux, or Zustand with Weaverse?

​How does component state management work?

​What’s the build process for Weaverse projects?

​How does code splitting work with Weaverse components?

​Development Workflow

​How do I create a custom component from scratch?

​What’s the difference between components and sections?

​Can I use TypeScript strict mode?

​How do I debug Weaverse components?

​Can I use custom CSS/Sass/CSS-in-JS?

​How do I handle responsive design?

​What testing strategies work with Weaverse?

​How do I organize components in large projects?

​Can I use GitHub Copilot/AI assistants with Weaverse?

​How does hot reload work during development?

​Merchant/Studio Questions

​Can non-technical users really build pages?

​Can multiple team members work simultaneously?

​What happens if I break something in the editor?

​How do I handle seasonal campaigns?

​Can I A/B test different layouts?

​How do I backup/restore my designs?

​Is there a mobile app for editing?

​Performance & SEO

​Does Weaverse add JavaScript bloat?

​How does it compare to Liquid in performance?

​What’s the impact on Core Web Vitals?

​How does image optimization work?

​Can I use CDN and edge caching?

​What’s the typical build time?

​How do I implement lazy loading?

​Does Weaverse support SSG/ISR?

​Migration & Compatibility

​How do I migrate from Online Store 2.0?

​Can I migrate from other Hydrogen themes?

​What happens to my metafields and custom data?

​Can I run Weaverse and traditional themes simultaneously?

​How do I handle URL redirects?

​Is Weaverse compatible with Shopify’s checkout extensibility?

​Can I migrate content from other page builders?

​What about existing Shopify Plus customizations?

​Shopify Integration

​Which Shopify APIs does Weaverse use?

​Can I use Shopify apps with Weaverse?

​How does checkout work?

​Does it support Shopify Markets and B2B?

​Can I use Shopify Flow and Scripts?

​How do customer accounts work?

​Does it work with Shopify POS?

​Can I use native Shopify search?

​How do I handle subscriptions?

​What about Shopify Functions?

​Deployment & DevOps

​Where can I deploy?

​How do I set up staging environments?

​How do I set up CI/CD pipelines?

​How do I handle environment variables?

​How do I monitor production performance?

​Troubleshooting

Weaverse FAQ

Getting Started & Basics

What is Weaverse and how is it different from Shopify Liquid themes?

Do I need React/TypeScript knowledge to use Weaverse?

What’s the difference between Weaverse Studio and the SDK?

Can I use Weaverse without the visual editor?

What are the system requirements?

How much does Weaverse cost?

Is Weaverse production-ready?

What’s included in the Pilot theme?

How does Weaverse compare to other page builders?

Can I try Weaverse before committing?

Technical Architecture

How does Weaverse work with React Router v7 (formerly Remix)?

What’s the difference between @weaverse/core, @weaverse/react, and @weaverse/hydrogen?

How does server-side rendering work in Weaverse?

What’s the difference between component loaders and route loaders?

How does the createSchema() function validate schemas?

Do I need forwardRef for components in React 19?

How does Weaverse handle hydration and client-side navigation?

What’s the data flow between Studio and local development?

Can I use React Context, Redux, or Zustand with Weaverse?

How does component state management work?

What’s the build process for Weaverse projects?

How does code splitting work with Weaverse components?

Development Workflow

How do I create a custom component from scratch?

What’s the difference between components and sections?

Can I use TypeScript strict mode?

How do I debug Weaverse components?

Can I use custom CSS/Sass/CSS-in-JS?

How do I handle responsive design?

What testing strategies work with Weaverse?

How do I organize components in large projects?

Can I use GitHub Copilot/AI assistants with Weaverse?

How does hot reload work during development?

Merchant/Studio Questions

Can non-technical users really build pages?

Can multiple team members work simultaneously?

What happens if I break something in the editor?

How do I handle seasonal campaigns?

Can I A/B test different layouts?

How do I backup/restore my designs?

Is there a mobile app for editing?

Performance & SEO

Does Weaverse add JavaScript bloat?

How does it compare to Liquid in performance?

What’s the impact on Core Web Vitals?

How does image optimization work?

Can I use CDN and edge caching?

What’s the typical build time?

How do I implement lazy loading?

Does Weaverse support SSG/ISR?

Migration & Compatibility

How do I migrate from Online Store 2.0?

Can I migrate from other Hydrogen themes?

What happens to my metafields and custom data?

Can I run Weaverse and traditional themes simultaneously?

How do I handle URL redirects?

Is Weaverse compatible with Shopify’s checkout extensibility?

Can I migrate content from other page builders?

What about existing Shopify Plus customizations?

Shopify Integration

Which Shopify APIs does Weaverse use?

Can I use Shopify apps with Weaverse?

How does checkout work?

Does it support Shopify Markets and B2B?

Can I use Shopify Flow and Scripts?

How do customer accounts work?

Does it work with Shopify POS?

Can I use native Shopify search?

How do I handle subscriptions?

What about Shopify Functions?

Deployment & DevOps

Where can I deploy?

How do I set up staging environments?

How do I set up CI/CD pipelines?

How do I handle environment variables?

How do I monitor production performance?

Troubleshooting