Data Connectors

Connect your components to dynamic data from your Shopify store - product titles, prices, collection names, and more. Update once in the visual editor, and your content stays fresh automatically.

Using Data Connectors in Studio

No coding required! Click the database icon above any text field to visually select your data source.

How It Works

Click the database icon above any text, textarea, or richtext field

Browse available data from your store (products, collections, pages, shop info)
Select what you need - we’ll generate the code automatically
See it live - preview updates instantly

Example: Product Title

Instead of typing code, just:

Click the database icon
Navigate: Current Page → Product → Title
Done! The product title appears automatically

Available Data Sources

Shop Data: Store name, currency, domain (from root loader) Current Page: Product/collection/page details for the active page (from route loaders) Route Data: Specific page routes in your theme (from route loaders) Custom Data: Any data you return from your loader functions - third-party APIs, custom integrations, computed values

How Data Connectors Work

Data connectors pull information from your Hydrogen/React Router loader functions. This means developers can customize what data is available by modifying loaders.

Adding Custom Data Sources

Want to connect to third-party APIs? Just add the data to your route loader:

// app/routes/product.$handle.tsx
export async function loader({ params }: LoaderFunctionArgs) {
  let product = await getProduct(params.handle)

  // Add custom data from any API
  let reviews = await fetch(`https://reviews-api.com/product/${params.handle}`)
    .then(res => res.json())

  let customData = await fetch('https://your-api.com/data')
    .then(res => res.json())

  return {
    product,
    reviews,        // Now available in Studio!
    customData      // This too!
  }
}

Once you add data to your loader, it automatically appears in Weaverse Studio’s data selector - no extra configuration needed. Users can then visually bind to {{routes/product.reviews.rating}} or {{routes/product.customData.value}} without writing code.

Where Data Comes From

Loader Type	Studio Path	Example
Root loader	`root.*`	`{{root.shop.name}}`
Route loader	`routes/[route].*`	`{{routes/product.product.title}}`
Custom loader data	`routes/[route].*`	`{{routes/product.yourCustomData}}`

Any data returned from your loader functions is automatically available in the visual data selector. Add third-party integrations, custom APIs, or computed data - users can bind to it instantly.

Template Syntax (For Developers)

Using Studio’s visual interface? Skip this section - the syntax is auto-generated for you.

Data connectors use {{path}} syntax to reference data:

<!-- Shop info -->
{{root.shop.name}}

<!-- Product data -->
{{routes/product.product.title}}
{{routes/product.product.price}}

<!-- Images -->
{{routes/product.product.images[0].url}}

<!-- Collection -->
{{routes/collection.collection.title}}

Data Source Patterns

Pattern	Use For	Example
`root.*`	Global shop data	`{{root.shop.currency}}`
`routes/product.*`	Product pages	`{{routes/product.product.title}}`
`routes/collection.*`	Collection pages	`{{routes/collection.collection.title}}`
`current.*`	Current page	`{{current.product.price}}`

Complex Routes

For routes with parameters:

<!-- Localized homepage -->
{{routes/($locale)._index.weaverseData.page.title}}

<!-- Blog article -->
{{routes/($locale).blogs.$blogHandle.$articleHandle.article.title}}

<!-- Product with locale -->
{{routes/($locale).products.$handle.product.price}}

Using in Component Code

Add data connectors to your component schema:

import { createSchema } from '@weaverse/hydrogen'

export let schema = createSchema({
  type: 'product-card',
  title: 'Product Card',
  settings: [
    {
      type: 'text',
      name: 'title',
      label: 'Product Title',
      defaultValue: '{{routes/product.product.title}}'
    },
    {
      type: 'text',
      name: 'price',
      label: 'Price',
      defaultValue: '${{routes/product.product.price}}'
    },
    {
      type: 'richtext',
      name: 'description',
      label: 'Description',
      defaultValue: '{{routes/product.product.description}}'
    }
  ]
})

Then use in your component:

function ProductCard({ title, price, description }: ProductCardProps) {
  return (
    <div className="product-card">
      <h3>{title}</h3>
      <p className="price">{price}</p>
      <div dangerouslySetInnerHTML={{ __html: description }} />
    </div>
  )
}

Extending with Third-Party Data

Example: Adding Product Reviews

// app/routes/product.$handle.tsx
import { getProduct } from '~/lib/shopify'
import { getProductReviews } from '~/lib/reviews.server'

export async function loader({ params }: LoaderFunctionArgs) {
  let product = await getProduct(params.handle)

  // Fetch reviews through a server-only integration adapter.
  // The adapter owns vendor authentication and response mapping.
  let reviewsData = await getProductReviews(product.id)

  return {
    product,
    reviews: {
      average: reviewsData.average_rating,
      count: reviewsData.total_reviews,
      items: reviewsData.reviews
    }
  }
}

Now in Studio, users can visually select:

{{routes/product.reviews.average}} → Shows “4.5”
{{routes/product.reviews.count}} → Shows “127 reviews”
{{routes/product.reviews.items[0].text}} → First review text

No code required for users - they just click and select from the visual interface. For a complete server-side implementation, see Integrate Judge.me Reviews with Shopify Hydrogen.

Example: Adding Custom API Data

// app/routes/home.tsx (registered with index("routes/home.tsx"))
export async function loader() {
  // Fetch from your backend, CMS, or any API
  let announcement = await fetch('https://your-cms.com/announcement')
    .then(res => res.json())

  let featuredContent = await fetch('https://your-api.com/featured')
    .then(res => res.json())

  return {
    weaverseData: await getWeaverseData(),
    announcement,      // Available as {{routes/_index.announcement.text}}
    featuredContent    // Available as {{routes/_index.featuredContent.title}}
  }
}

Quick Tips

✅ Best Practices

<!-- Use specific paths -->
{{routes/product.product.title}}

<!-- Not generic ones -->
{{product.title}}

🐛 Troubleshooting

Data not showing?

Check the path exists on that page type
Verify you’re on the correct page (e.g., product page for product data)
Use Studio’s visual picker to verify the correct path

Seeing {{...}} in output?

The data path doesn’t exist or isn’t loaded yet
Check your route matches the data source

🔒 Security

Data connectors automatically sanitize output to prevent XSS attacks. Your content is safe.

Component Schema - Define component settings
Input Settings - Configure input types
Creating Components - Build components

Environment

Building Components

Content Management

Internationalization

Security & Privacy

Pages & Routing

Advanced

Deployment

Data Connectors

Data Connectors

Using Data Connectors in Studio

How It Works

Example: Product Title

Available Data Sources

How Data Connectors Work

Adding Custom Data Sources

Where Data Comes From

Template Syntax (For Developers)

Data Source Patterns

Complex Routes

Using in Component Code

Extending with Third-Party Data

Example: Adding Product Reviews

Example: Adding Custom API Data

Quick Tips

✅ Best Practices

🐛 Troubleshooting

🔒 Security

​Data Connectors

​Using Data Connectors in Studio

​How It Works

​Example: Product Title

​Available Data Sources

​How Data Connectors Work

​Adding Custom Data Sources

​Where Data Comes From

​Template Syntax (For Developers)

​Data Source Patterns

​Complex Routes

​Using in Component Code

​Extending with Third-Party Data

​Example: Adding Product Reviews

​Example: Adding Custom API Data

​Quick Tips

​✅ Best Practices

​🐛 Troubleshooting

​🔒 Security

​Related Docs

Data Connectors

Using Data Connectors in Studio

How It Works

Example: Product Title

Available Data Sources

How Data Connectors Work

Adding Custom Data Sources

Where Data Comes From

Template Syntax (For Developers)

Data Source Patterns

Complex Routes

Using in Component Code

Extending with Third-Party Data

Example: Adding Product Reviews

Example: Adding Custom API Data

Quick Tips

✅ Best Practices

🐛 Troubleshooting

🔒 Security

Related Docs