← Back to Kitchen Planner

Add new GLB cabinets to the planner

The planner reads your Shopify shop automatically every time someone opens it. You do not upload GLB files into the planner itself — you set them up in Shopify, then refresh the planner.

1. What happens automatically

When the planner loads, it asks Shopify for all active products and their planner.* metafields. Any product you configure correctly in Shopify appears in the Products panel (⊞ button) after a refresh.

Success looks like: you change nothing in the planner code — only Shopify Admin.

2. Before you start

  1. Have the GLB file hosted. In Shopify Admin go to Content → Files, upload your .glb file, click it, and Copy link. That URL is your glb_url.
Success looks like: a link starting with https://cdn.shopify.com/... ending in .glb.

3. In Shopify Admin — add or edit the product

  1. Open Products → click your cabinet product (or Add product).
  2. Add a product photo (Media). This becomes the thumbnail in the planner catalogue.
  3. Set Price on the variant (needed for Quote and Send to Cart).
  4. Scroll to Metafields on the product (or Settings → Custom data → Products to define them once). Add these under namespace planner:
Metafield keyExample valueWhat it does
glb_url https://cdn.shopify.com/.../cabinet.glb 3D model shown in the room
width_mm 600 Cabinet width in millimetres
height_mm 720 Height in mm
depth_mm 580 Depth in mm
category base Placement: base, wall, corner, tall, island

Type for metafields: glb_url = URL (single line text); dimensions = integer; category = single line text.

Success looks like: all five metafields filled on the product page in Shopify.

4. Publish the product

  1. Status must be Active (not Draft).
  2. Under Sales channels, include Online Store (or the channel your Storefront API uses).
  3. Click Save.
Success looks like: the product is visible on your brownboxkit.co.nz shop.

5. Verify in the planner

  1. Open the planner: planner.brownboxkit.co.nz (or your local dev URL).
  2. Hard refresh so it reloads the catalogue: desktop Ctrl+F5; iPhone/iPad pull down to refresh the page.
  3. Tap the ⊞ Products button (top-left toolbar).
  4. Find your product under its product type group — you should see its photo and name.
  5. Tap the product to place it in the room. The 3D GLB should load (not a plain brown box only).
Success looks like: product in the list with image, places in the room with the real cabinet shape.

6. Troubleshooting

ProblemLikely causeFix
Not in the product list Draft, wrong channel, or title contains “(Draft)” Activate product; add Online Store channel; hard refresh planner
Brown box only, no 3D detail Bad or missing glb_url Re-copy URL from Shopify Files; check metafield on product
Wrong size in room Typo in width_mm / height_mm / depth_mm Fix metafields; refresh planner
Auto-Design skips this cabinet category not base or non-standard width Use category base and standard widths (300–900 mm) for auto-layout
No thumbnail image No product photo in Shopify Add image under product Media in Shopify Admin

Brown Box Kit Kitchen Planner · catalogue loads from Shopify Storefront API on every page open.