Virtro Integration & Architecture Guide

5-Minute Quickstart Integration

Integrating Virtro into your boutique storefront takes two simple steps. No backend database setup or catalog sync is required upfront.

<script type="module" src="https://cdn.virtro.tech/v1/virtro.js"></script>

<virtro-fitting-room
  garment-image-url="https://yourboutique.com/images/silk-midi-skirt.jpg"
  title="Pleated Silk Midi Skirt"
  price="£185.00"
  product-url="https://yourboutique.com/products/pleated-silk-skirt"
  accent-color="#10b981"
></virtro-fitting-room>

Zero-Touch Merchant Catalog Onboarding

Unlike legacy virtual try-on software that forces merchants to manually upload CSV spreadsheets, map 50 category fields, or configure 3D mesh assets, Virtro is Zero-Touch and AI-Autonomous.

Shopify Theme Integration (Liquid)

In your Shopify theme editor, open sections/main-product.liquid (or your custom product actions block) and paste the fitting room custom element:

<!-- Virtro Virtual Fitting Room Integration -->
<virtro-fitting-room
  garment-image-url="{{ product.featured_image | image_url: width: 1200 }}"
  title="{{ product.title | escape }}"
  price="{{ product.price | money }}"
  product-url="{{ shop.url }}{{ product.url }}"
  accent-color="#171717"
></virtro-fitting-room>

WooCommerce Theme Integration (PHP)

In your WordPress child theme, add this to woocommerce/single-product/add-to-cart/simple.php or hook it into woocommerce_after_add_to_cart_button:

<?php
// Hook into WooCommerce PDP
echo sprintf(
  '<virtro-fitting-room garment-image-url="%s" title="%s" price="%s" product-url="%s" accent-color="#171717"></virtro-fitting-room>',
  esc_url( wp_get_attachment_url( $product->get_image_id() ) ),
  esc_attr( $product->get_name() ),
  esc_attr( wc_price( $product->get_price() ) ),
  esc_url( get_permalink() )
);
?>

Batch CSV Pre-Inspection Script

For boutiques scanning 500+ items upfront before marketing launch. With your merchant key, rate limits elevate to 250 requests/min so you can inspect an entire catalog in under 2 minutes:

import fs from 'fs';
import { parse } from 'csv-parse/sync';

const VIRTRO_API_URL = "https://api.virtro.tech/garment/inspect";
const MERCHANT_API_KEY = process.env.VIRTRO_API_KEY; // "vtr_live_..."

async function prewarmCatalog(csvFilePath) {
  const fileContent = fs.readFileSync(csvFilePath, 'utf-8');
  const records = parse(fileContent, { columns: true, skip_empty_lines: true });

  console.log(`Starting pre-flight inspection for ${records.length} garments...`);

  for (const item of records) {
    const res = await fetch(VIRTRO_API_URL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "x-api-key": MERCHANT_API_KEY
      },
      body: JSON.stringify({
        image_url: item.image_url,
        title: item.title
      })
    });
    const data = await res.json();
    console.log(`[PASS] ${item.title}: ${data.garment?.category} (${data.latency_ms}ms)`);
  }
}

prewarmCatalog('./catalog.csv');

Web Component Specification (<virtro-fitting-room>)

Packaged as @virtro/embed-element. It renders an understated, luxury secondary action button with a sparkling diamond icon and opens the sandboxed cross-origin fitting room modal.

React & Next.js SDK (@virtro/react)

For custom headless storefronts built with Next.js App Router, Hydrogen, or Remix:

npm install @virtro/react

"use client";

import { VirtroFittingRoom } from "@virtro/react";

export function ProductFittingRoom({ product }: { product: any }) {
  return (
    <VirtroFittingRoom
      imageUrl={product.thumbnail}
      title={product.title}
      price={product.price}
      productUrl={`https://yourboutique.com/products/${product.handle}`}
      accentColor="#171717"
    />
  );
}

Retailer Insights & Conversion Telemetry

Virtro proves its exact commercial lift. When you query your Retailer Insights API, you receive verified metrics measuring customer engagement, conversion lift, and reverse-logistics cost savings.

curl -X GET "https://api.virtro.tech/analytics/insights?period=30d" \
  -H "X-Virtro-Key: vtr_live_your_boutique_key"

{
  "status": "success",
  "retailer": "your-boutique",
  "period": "30d",
  "summary": {
    "total_tryons": 1420,
    "unique_shoppers": 985,
    "conversion_lift_percent": 32.1,
    "vto_attributed_orders": 248,
    "vto_attributed_revenue_gbp": 21080.00,
    "est_returns_avoided": 54,
    "est_return_cost_savings_gbp": 945.00
  }
}

Multi-Tier Rate Limiting & Automated IP Defense

Virtro protects GPU infrastructure and boutique budgets with multi-tier rate limiting and automated IP banning.

Zero-Trust Biometrics & UK GDPR Article 9

Customer body photographs are classified as Special Category Biometric Data under UK GDPR Article 9. Virtro eliminates retailer liability through strict architectural isolation.

Biometric Governance: Age Restrictions & Base Layers

Clear, transparent human rules governing customer uploads:

Enterprise Data Sovereignty: Private Gemma 4 Enclave

For luxury fashion conglomerates and high-security enterprise retailers requiring zero public cloud AI exposure.

Core REST API Reference

{
  "model_image_url": "https://storage.virtro.tech/biometric-closet/guest/user_abc123.jpg",
  "garment_image_url": "https://yourboutique.com/images/silk-skirt.jpg",
  "garment_category": "lower_body",
  "garment_description": "black pleated silk midi skirt"
}

{
  "image_url": "https://yourboutique.com/images/wool-blazer.jpg",
  "title": "Tailored Double-Breasted Wool Blazer"
}

{
  "status": "success",
  "upload_url": "https://supabase.virtro.tech/storage/v1/upload/resumable/...",
  "file_path": "guest/session_xyz987.jpg",
  "expires_in_seconds": 900
}

{
  "ip_address": "82.165.197.1"
}