Skip to main content

​
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

  1. Click the database icon (🔗) above any text, textarea, or richtext field
  2. Browse available data from your store (products, collections, pages, shop info)
  3. Select what you need - we’ll generate the code automatically
  4. See it live - preview updates instantly
Database icon above text input

​
Example: Product Title

Instead of typing code, just:
  • Click the database icon
  • Navigate: Current Page → Product → Title
  • Done! The product title appears automatically
Data selector showing available options

​
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
Real-time preview of connected data

​
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 TypeStudio PathExample
Root loaderroot.*{{root.shop.name}}
Route loaderroutes/[route].*{{routes/product.product.title}}
Custom loader dataroutes/[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

PatternUse ForExample
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'

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

  // Fetch reviews from Judge.me, Yotpo, or any review service
  let reviewsData = await fetch(
    `https://judge.me/api/reviews?product=${product.id}`
  ).then(res => res.json())

  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.

​
Example: Adding Custom API Data

// app/routes/_index.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.