> ## Documentation Index
> Fetch the complete documentation index at: https://docs.weaverse.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Data Connectors

> Bind dynamic data to your components without writing code - just like Shopify's theme customizer dynamic sources.

# 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

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

<Frame>
  <video autoPlay muted loop playsInline src="https://cdn.shopify.com/videos/c/o/v/59cbe901dbf44f45a3e164839e2036ec.mp4">
    Your browser does not support the video tag.
  </video>
</Frame>

### 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

<Frame>
  <img src="https://cdn.shopify.com/s/files/1/0838/0052/3057/files/Database_icon_above_text_input.webp?v=1759811641" alt="Database icon above text input" />
</Frame>

### Example: Product Title

Instead of typing code, just:

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

<Frame>
  <img src="https://cdn.shopify.com/s/files/1/0838/0052/3057/files/Data_selector_showing_available_options.webp?v=1759811656" alt="Data selector showing available options" />
</Frame>

### 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

<Frame>
  <img src="https://cdn.shopify.com/s/files/1/0838/0052/3057/files/Real-time_preview_of_connected_data.webp?v=1759811624" alt="Real-time preview of connected data" />
</Frame>

## 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:

```tsx theme={null}
// 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}}` |

<Tip>
  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.
</Tip>

## Template Syntax (For Developers)

<Note>
  Using Studio's visual interface? Skip this section - the syntax is auto-generated for you.
</Note>

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

```html theme={null}
<!-- 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:

```html theme={null}
<!-- 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:

```tsx theme={null}
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:

```tsx theme={null}
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

```tsx theme={null}
// 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

```tsx theme={null}
// 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

```html theme={null}
<!-- 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.

## Related Docs

* [Component Schema](/development-guide/component-schema) - Define component settings
* [Input Settings](/development-guide/input-settings) - Configure input types
* [Creating Components](/development-guide/creating-components) - Build components