Technical Handover Dashboard

There is no separate BCA-built server/database/SSL/CDN infrastructure for the main Shopify website. Any external service that genuinely applies is listed under Apps & Integrations.

Each Outfit Builder product has a Shopify custom.outfit_code metafield. The Builder loads this value as outfitCode and uses it to build the existing McCalls enquiry-system outfit code.

Active format: K[t:4][s:3]H[sh:2]N[nk:2][so:1][j:2]L[h:2][B|H] — 21 characters when all expected components are present.

The encoder finds each selected item by its internal ref or code, reads its outfitCode, and assembles the result using the fixed K, H, N and L separators. This preserves compatibility with the existing McCalls enquiry system.

The decoder accepts the existing 21-character format beginning with K, extracts the fixed-position component codes and matches them back to Builder products using their outfitCode values.

Some source mannequin images are positioned differently within their transparent canvas. These are corrected individually in OutfitPreview.jsx; do not use a global jacket transform to fix a single image.

1. Create or open the required product in Shopify.
2. Add the product to the appropriate collection beginning Outfit Builder - Hire or Outfit Builder - Buy, including the relevant garment/category collection where applicable.
3. Enter the product's Outfit code (custom.outfit_code). Use the correct code length/value for that product type because the live McCalls outfit code is assembled directly from these metafield values.
4. Enter the Outfit Builder Title that should appear in the Builder.
5. Add the Outfit Builder Thumbnail.
6. Add the Outfit Builder Mannequin Image / Shopify-hosted preview layer where the product requires an overlay image.
7. Set the relevant product visibility metafield(s), including Hide from search and Hide product, where the product should remain Builder-only.
8. Save the product and verify it appears in the correct Hire/Buy section of the live Outfit Builder.

1. Clone/download the current Outfit Builder source from the McCalls-owned GitHub repository. The Shopify Files ZIP can be retained as an additional handover copy.
2. Open the project locally in an IDE.
3. Run npm run dev and make/test the required changes locally.
4. When the changes are verified, run npm run build.
5. Take the generated production CSS and JavaScript from the build output.
6. Open the McCalls Shopify theme and go to Online Store → Themes → Edit code.
7. Update outfit-builder.css with the newly built CSS.
8. Update outfit-builder.js with the newly built JavaScript.
9. Do not edit any other Shopify theme code files for a normal Outfit Builder code deployment.
10. Save both files and test the live Builder at https://www.mccalls.co.uk/pages/outfit-builder.

src/icons/ contains local icon assets/components used by the Outfit Builder interface. These are part of the source project and will be bundled when npm run build is run.

Each route contains an internal branch email followed by a customer confirmation email sent to the submitted customer email address.

The Builder resolves the referenced products and reads their handle, title, image, price, currency, default/selected variant and availability. Upsell failure is non-critical; the Builder continues loading even if the upsell query fails.

The Builder reads current Shopify prices and availableForSale directly from the Storefront API. It can resolve products by handle and can use a Shopify title search fallback for certain categories.

When adding to cart, the Builder resolves the correct Shopify variant based on selected options:

• Hire tartan/kilt: selected Jacket & Waistcoat option.
• Shirt: Collar size.
• Jacket: Chest + Length.
• Shoes: selected Shopify shoe size.
• Hose: derived from shoe size — Small 4–7, Medium 8–10, Large 11–13.

After variant IDs are resolved, the Builder creates a standard HTML form and posts directly to:

https://www.mccalls.co.uk/cart/add

Hire items receive internal line-item properties including _outfit_builder=hire and _outfit_code. Customer measurements and event details are attached to the first cart item.

The current source notes that mapping.json is no longer needed by the active product-loading path. Current Builder elements are discovered dynamically from Shopify Outfit Builder collections and metafields. Some older helper functions remain in source; verify actual call sites before removing legacy code.

The helper trackEvent(eventName, params) sends the GA4 event:

window.gtag('event', eventName, {
  app: 'outfit_builder',
  ...params
});

installGlobalTracking() installs document-level listeners for clicks and field changes. Because the listeners are global, new buttons, links and form controls are automatically tracked without adding an individual GA4 call to every React component.

GA4, Google Ads, Merchant Center and Meta are already owned and controlled by McCalls. No BCA account transfer is required. The only handover item here is the custom Outfit Builder event implementation described above.