# Northstar Onboarding Lab Setup Guide

Use this walkthrough to demonstrate a tenant setup from an empty tenant workspace to a working eight-product VectraShop storefront.

## Before You Start

- Sign in with the temporary Northstar tenant-owner credentials supplied separately.
- The platform has provisioned the tenant account, but its catalog and storefront integration begin unconfigured.
- The tenant uses these exact values:
  - Tenant name: `Northstar Onboarding Lab`
  - Tenant slug: `northstar-onboarding`
  - Storefront domain: `northstar-onboarding-lab.pages.dev`

## 1. Sign In to the Tenant Workspace

1. Open [Northstar tenant products](https://vectrashop-tryon.pages.dev/?admin=products&tenant=northstar-onboarding).
2. Sign in with the supplied tenant-owner email and temporary password.
3. Confirm the header identifies `Northstar Onboarding Lab`.
4. Confirm that the Products screen is ready for its initial import.

## 2. Import the Product Catalog

1. Download the [eight-product import package](https://vectrashop-tryon.pages.dev/sample-data/northstar-product-package.json).
2. Open the new tenant's **Products** screen.
3. Select **Import package** and choose the downloaded JSON file.
4. Confirm that all eight products appear: four rings and four bracelets.
5. Open at least one ring and one bracelet to confirm their transparent assets, fit settings, and occlusion masks are present.

The optional [intake CSV](https://vectrashop-tryon.pages.dev/sample-data/northstar-product-intake.csv) shows the simpler product information a tenant would normally provide before the try-on assets are prepared.

## 3. Connect the Storefront

1. Open the tenant's **Integration** screen.
2. Add `northstar-onboarding-lab.pages.dev` as an allowed storefront domain.
3. Select an imported product and review its generated try-on URL and embed values.
4. Run the integration preflight check.

The storefront needs only the VectraShop script and a product button:

```html
<script async
  src="https://vectrashop-tryon.pages.dev/vectrashop.js"
  data-vectrashop-tenant="northstar-onboarding"></script>

<button
  data-vectrashop-tryon
  data-vectrashop-product="ring"
  data-vectrashop-style="finecarat-emerald">
  Try it on
</button>
```

VectraShop hosts the camera flow, QR session, image processing, and desktop callback. The tenant does not install those services on its server.

## 4. Test the End-to-End Flow

1. Open the [Northstar sample storefront](https://northstar-onboarding-lab.pages.dev/).
2. Select a product card and confirm the SKU, title, image, and price update.
3. Select **Try it on**.
4. On desktop, scan the QR code with a phone.
5. Capture a try-on preview on the phone.
6. Confirm the preview returns to the same desktop session.
7. Repeat with one ring and one bracelet to verify product-specific fit and masking.

## Completion Check

- The login opens only the expected tenant workspace.
- Eight products are visible in the tenant catalog.
- The storefront domain passes preflight.
- Every product button launches its matching try-on item.
- A phone capture returns to the desktop session.
- Ring and bracelet results retain their product-specific masks and fit settings.

## Reset the Catalog for Another Walkthrough

1. Return to the tenant's **Products** screen.
2. Under **Catalog onboarding**, select **Clear catalog**.
3. Confirm the warning. This removes only the tenant's imported product records.
4. Confirm the screen returns to `0 configured`.
5. Import the same product package again to repeat the walkthrough.

The tenant account, login, shared image assets, storefront, and historical reporting remain available after the catalog is cleared.