📖 garment

Digital Lookbooks

Digital Lookbooks let you curate a themed, ordered collection of products — a seasonal drop, a festival collection, a styled edit — with a cover colour and per-product captions, then publish it behind a public, no-login shareable link for customers.

📍 Menu path: /garment/lookbooks

👤 Who uses it: Owner,Manager,Staff

Overview

Each lookbook has a Name, optional Season (e.g. "SS2026") and Description, a Cover Colour picked from eight preset swatches (shown as a coloured banner on both the management card and, presumably, any public view), and an isPublished flag that must be on for its share link to actually work.

A lookbook's content lives in a separate item list managed inside its own editor: click Edit on a lookbook card to open the Lookbook Editor, where an "Add Product" tile opens a searchable product picker, and each added product becomes a card you can reorder (up/down arrow buttons), caption, or remove.

The editor tracks unsaved changes with a dirty flag — a Save Changes button only appears once you have actually added, removed, reordered or re-captioned an item, and clicking it replaces the lookbook's entire item list on the server in one call.

Publishing is a simple toggle (Publish/Unpublish button on each lookbook card) — publishing activates the shareable link immediately; unpublishing deactivates it without deleting the lookbook or its items.

The public share link is built from a per-lookbook shareToken as /#/lookbook/<shareToken> and is available to copy (via the Copy Link / share icon) only while a lookbook is published.

Before You Start

No plan-tier restriction beyond the route's "billing" feature gate (note this is billing, not inventory, unlike the other garment-exclusive pages in this section).
Only a lookbook Name is required to create one; a lookbook can be created, edited and reordered entirely in Draft (unpublished) state before ever generating a link customers can use.
A lookbook needs at least one product added through the editor before it is useful to share — an empty published lookbook will simply show no items.

Step-by-Step Guide

1 Create a new lookbook

Click New Lookbook.
Enter Name * (required, e.g. "Spring/Summer 2026") and optional Season (e.g. "SS2026") and Description.
Pick a Cover Colour from the eight preset swatches.
Leave Publish (make shareable link active) unchecked to keep it a private draft for now, or check it to publish immediately, then click Save.

2 Add and arrange products in a lookbook

Click Edit on a lookbook card to open its editor.
Click the Add Product tile, search for a product by name in the picker, and click a result to add it to the lookbook.
Use the up/down arrow buttons on a product card to reorder it within the lookbook, type a short caption into its caption box, or click the ✕ to remove it.
Click Save Changes (only shown once something has actually changed) to persist the current item list, order and captions to the server.

💡 The editor loads existing items fresh from the server each time it opens (GET /garment/lookbooks/:id), so changes are always made against the latest saved state.

3 Publish and share a lookbook

Click Publish on a lookbook card once you are happy with its contents — this activates its shareable link immediately.
Click the share icon (or Copy Link inside the editor) to copy the public URL (/#/lookbook/<token>) to your clipboard, then send it to customers via WhatsApp, social media or email.
Click Unpublish at any time to deactivate the link without losing the lookbook or its products — the same lookbook can be republished later.

4 Delete a lookbook

Click the trash icon on a lookbook card and confirm — this permanently deletes the lookbook and all of its items.

Every Field & Button, Explained

Field / Button	What it does
`New Lookbook`	Opens the blank lookbook creation form.
`Name *`	Required title of the lookbook, e.g. "Spring/Summer 2026".
`Season`	Optional free-text season label, e.g. "SS2026".
`Description`	Optional free-text description shown on the lookbook card.
`Cover Colour`	One of eight preset swatch colours used as the banner background on the lookbook card (and any public view).
`Publish checkbox`	In the create/edit form: toggles whether the lookbook's shareable link is active.
`Edit`	Opens the Lookbook Editor to manage this lookbook's product items.
`Publish / Unpublish button`	On the lookbook card: quick toggle for isPublished without opening the full edit form.
`Share icon (Copy Link)`	Only shown when a lookbook is published; copies the public share URL to the clipboard.
`itemCount`	Number of products currently in the lookbook, shown on its card.
`Add Product tile (editor)`	Opens a searchable product picker; clicking a result adds it as a new item with the product's name, SKU and price.
`Reorder arrows (editor)`	Move a product card up or down within the lookbook's display order.
`Caption box (editor)`	Free-text caption saved per product item, e.g. a styling note or price call-out.
`Remove (✕) (editor)`	Removes a product from the lookbook (only takes effect once Save Changes is clicked).
`Save Changes (editor)`	Only appears once the item list is "dirty"; replaces the lookbook's entire saved item list with the current editor state.
`Delete icon`	Permanently deletes the lookbook and all its items after a confirmation prompt.

Tips & Best Practices

Build and arrange a lookbook fully in Draft first, then Publish only once it is ready — customers can only ever see the currently-saved, published state, so there is no risk of them seeing a half-built collection.
Use short, punchy captions ("Best-seller", "New colour", "Only 3 left") rather than long descriptions — the caption box is small and reads best as a one-line call-out under each product.
Reuse the Season field consistently (e.g. always "SS2026", "AW2026") so past lookbooks stay easy to find and compare later.

Troubleshooting & FAQ

I copied a lookbook's link but nothing shows the actual products when I visit it.

Check that the lookbook is still Published — unpublishing deactivates the link immediately even though the lookbook and its items still exist; the frontend also currently has no dedicated public route registered for viewing a lookbook by its share token, so the generated /#/lookbook/ link has no matching page to render in this app build — treat this as a known gap rather than something you configured incorrectly.

My product images aren't showing in the lookbook.

The editor has no field or control to set an item's image — every item is created with an empty imageUrl and falls back to a plain emoji placeholder tile; there is currently no way to attach a real product photo to a lookbook item from this screen.

I made changes in the editor but they didn't save.

Check for the Save Changes button — it only appears while there are unsaved ("dirty") changes; if you closed the editor without seeing or clicking it, your reorder/caption/add/remove changes were not sent to the server.

The Copy Link button is missing from a lookbook.

It only appears once a lookbook is Published — publish it first (via the Publish button on its card, or the Publish checkbox in its edit form) and the link/share controls will appear.

Can I filter who sees the lookbook link?

No — the public link (once implemented/routed) is a single, unauthenticated URL per lookbook; there is no per-customer or per-dealer variant, unlike the category-scoped links on the Dealer Portal page.

🧑‍💻 Developer Notes

Source component(s):

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

Backend endpoints used:

GET /garment/lookbooks
POST /garment/lookbooks
GET /garment/lookbooks/:id
PUT /garment/lookbooks/:id
DELETE /garment/lookbooks/:id
PUT /garment/lookbooks/:id/items
GET /garment/lookbooks/public/:token (backend-only — not called by this app build)

Related tables (db-core repositories):

Lookbook
LookbookItem

Redux slices:

None — local component state only

Feature flag key: billing

shareToken is a random 16-character hex string generated server-side once at creation (packages/pos-core/src/garment.js generateToken/createLookbook) and never regenerated on update, so a published-then-unpublished-then-republished lookbook keeps the same URL throughout its life. getLookbookByToken (the public read used by GET /garment/lookbooks/public/:token) correctly checks both shareToken match and isPublished = true before returning data, so the backend half of "public share" is fully implemented and safe — but a full-repo check found no React Router route in pos-app-garment/src/App.js matching a public "/lookbook/:token" path, meaning the /#/lookbook/ links generated and copied by this page currently have nowhere to render inside this variant's SPA. This looks like a genuine half-finished feature (backend + link-generation done, public viewer page not yet wired up) rather than an intentional design choice, and is the most actionable gap found across this batch of pages. Separately, LookbookItem.imageUrl exists in the schema and is read by the editor UI, but no input control anywhere in LookbookEditor lets a user set it — every item is created with imageUrl: '' and can only ever get a real image via a direct API call, not through this screen.