✨ garment

Shop the Look

Shop the Look lets you curate a set of products into one named, styled outfit — a "Look" — with a cover colour, an occasion tag, and per-item captions, so staff can pitch and sell a complete outfit to a customer in one go instead of one product at a time.

📍 Menu path: /garment/shop-the-look

👤 Who uses it: Owner,Manager,Staff

Overview

Each Look has a Name, an optional Occasion (Casual, Formal, Wedding, Party, Ethnic, Festive, Sports, Beach, or "Any occasion"), and a Cover Colour used as the banner on its card.

Products are added to a Look through a dedicated full-screen Look Editor: search and add products from the left panel, then reorder them and add a short Caption to each on the right.

A look's card shows how many items it has, a "Bundle" price (simply the sum of its item prices — there is no separate bundle-discount field), up to four item name chips, and Edit/Delete actions.

This is conceptually distinct from Digital Lookbooks (garm-lookbooks): a Look here is one curated multi-product outfit meant to be sold together from a single store's POS, whereas a Lookbook is a separate, shareable public collection (accessed via a public token URL) used to showcase items to customers outside the shop.

Before You Start

Requires the "billing" plan feature to be enabled.
Only a Look Name is required to create a Look — Occasion and Cover Colour can be set later, and a Look can be saved with zero items (though it will show "0 items" until products are added via the Look Editor).
Adding items requires the product to already exist and be found via the product search inside the Look Editor.

Step-by-Step Guide

1 Create a look

Click New Look.
Enter Look Name * (e.g. "Summer Casual", "Office Ready").
Optionally pick an Occasion and a Cover Colour swatch.
Click Create Look.

2 Add products to a look

Click Edit on a look's card to open the full-screen Look Editor.
Search for a product in the left panel and click a result to add it to the look — adding the same product twice is blocked with an "Already in look" message.
Optionally type a per-item Caption (e.g. "wear tucked in", "pairs with the black belt").
Use the up/down arrows to reorder items, or the trash icon to remove one.
Click Save to write the current item list back to the look.

💡 Saving the Look Editor replaces the look's entire item list in one request — it does not selectively update just the rows you touched.

3 Manage existing looks

Click the pencil/Edit icon on any look's card to reopen the Look Editor and adjust its items.
Click the trash/Delete icon and confirm to permanently remove the look and every item on it.

Every Field & Button, Explained

Field / Button	What it does
`New Look`	Opens the look creation form.
`Look Name *`	Required name for the curated outfit.
`Occasion`	Casual, Formal, Wedding, Party, Ethnic, Festive, Sports, Beach, or "Any occasion".
`Cover Colour`	One of eight preset swatches; used as the banner background on the look's card.
`Look card`	Cover-colour banner with name/occasion, item count, "Bundle" price (sum of item prices), up to 4 item chips ("+N more" beyond that), and Edit/Delete actions.
`Look Editor — product search (left panel)`	Debounced (300ms) product search; clicking a result adds it as a new item with its current name, SKU and price snapshotted at add-time.
`Look Editor — item grid (right panel)`	One card per added item showing name, SKU and price, an editable Caption field, and up/down reorder plus remove controls.
`Save (Look Editor)`	Replaces every item on the look in a single PUT request, in the current on-screen order.

Tips & Best Practices

Use the Caption field on each item to leave a short styling note for whoever is presenting the look to a customer — it is the only place on this screen to record how a piece should be worn or paired.
Remember the "Bundle" price on a look's card is just the sum of its individual item prices — if you want the complete outfit to be genuinely cheaper than buying each piece separately, apply that saving through product pricing or a discount at billing, not here.
Put your hero/lead piece first when adding items — the display order you set with the up/down arrows is preserved wherever this look is shown.

Troubleshooting & FAQ

I get an "Already in look" message when I try to add a product.

That product is already part of this look — the search results do not filter out items you have already added, so duplicates are only caught at the moment you click to add one.

I want to hide a look temporarily without deleting it — is there an archive/inactive toggle?

Not from this screen. The underlying GarmentLook record does have an isActive column and the update endpoint would accept a change to it, but the New/Edit Look form never exposes a control for it — Delete (which is permanent) is currently the only option.

A product's price changed, but the look's card still shows the old price.

Item price is captured once from the product search result at the moment it is added to the look, not a live reference to the product's current price — remove and re-add the item to refresh it.

I re-saved a look after only reordering items — did I lose anything?

Saving always deletes and re-inserts the full item list for that look rather than updating individual rows, so item IDs are not stable across saves; the data itself (name/SKU/price/caption) is preserved as shown on screen at the time of saving.

🧑‍💻 Developer Notes

Source component(s):

frontend-app/pos-app-garment/src/pages/garment/ShopTheLookPage.jsx

Backend endpoints used:

GET /garment/looks
POST /garment/looks
GET /garment/looks/:id
PUT /garment/looks/:id
DELETE /garment/looks/:id
PUT /garment/looks/:id/items

Related tables (db-core repositories):

GarmentLook
GarmentLookItem

Redux slices:

None — local component state only

Feature flag key: billing

setLookItems (packages/pos-core/src/garment.js) always deletes every existing GarmentLookItem row for the look and bulk-inserts the current in-memory list rather than diffing/upserting, so item IDs are never stable across saves. GarmentLook.isActive exists in the schema and updateLook's allowed-fields list includes it, but no control in LookModal or LookEditor ever sets it — in practice a look can only be permanently deleted, not archived, from this screen. Item price is a point-in-time snapshot taken from the product search result at add-time, not a live foreign-key reference to Product.price. Do not conflate this feature with Digital Lookbooks (garm-lookbooks, GarmentLookbook table + lookbooks routes): a Look is one curated multi-product outfit sold as a set from a store's POS, while a Lookbook is a shareable public token-based collection page.