Component kit/Page helpPhone

Page help

A question-mark in the same place on every page opens a drawer that says what the page is for, what you can do on it, which pages it connects to and where its data comes from.

Written for someone who has never seen the page. The examples are the real Global Store list and editor.

Help trigger: placement

Top bar, right-hand side, between the environment badge and the account menu. Same position on every page.

StagingHelp for this pageFW
StagingHelp for this pageFW
StagingHelp for this pageFW
UsesTooltipButton .help-q--topbar-h

Help trigger: states

A round 32px icon button, 44px to hit. It stays in the bar while the drawer is open and shows as pressed.

default
hover
Help for this page
focus
open
UsesButtonTooltiparia-expanded--ring

Help drawer

Select the question mark. The drawer slides in from the right below the top bar; Escape, the cross or a click outside closes it.

StagingHelp for this pageFW

Global Store214 products

Products HQ has written for brands to copy.

HandleStatusVersionRecommended priceUpdated
navy-birdseye-two-pieceAvailablev4£1,150+22 Oct
charcoal-herringbone-jacketAvailablev2£780+2Yesterday
mid-grey-flannel-trousersDraftv1£340+2Today 14:20
navy-chalk-stripe-three-pieceAvailablev3£1,390+229 Sep
brown-glen-check-waistcoatRetiredv5£260+121 Sep
stone-linen-jacketDraftv1£690+2Today 09:05
midnight-mohair-dinner-suitAvailablev2£1,480+226 Sep
UsesSheetDialogTooltipScrollArea--help-w--motion-sheet-in--e-sheet

Summary and what you can do here

The summary says what the page is in two sentences. The list that follows starts each line with the verb.

Every product HQ has written for brands to copy. See which ones are ready, which are still drafts, and open one to edit it.

Who can use this: Super admins with two-step sign-in

What you can do here

  • Open a product to change its cloth, details, prices and photos.
  • Start a new product from the button at the top right.
  • Check the status of each product: Draft, Available or Retired.
  • Read the recommended price in the main currency, with the number of other currencies.

Write one product that every brand can copy. Choose the cloth, fill in the details, set prices, add photos and save. Brands see it once it is Available.

Who can use this: Super admins with two-step sign-in

What you can do here

  • Pick the main cloth by code or collection. Matching cloths can be proposed for you to confirm.
  • Change a detail that comes from the cloth, such as weight or weave, for this product only.
  • Set recommended prices in each currency brands sell in.
  • Add photos to the nine slots and write a short description for each.
  • Withdraw or retire a product that should stop being offered.
UsesSeparatorAlert (info).ph-lead.ph-do

Connected to

Each row names the page and says why you would go there. Whole row is the link.

Where the data comes from

A plain sentence first, the technical name second. A source that is not wired or is out of date says so.

Where the data comes from

  • Product list

    Saved in the admin's own database. A change shows here as soon as someone saves it.

    Updated on savemaster drafts
  • Recommended prices

    Saved with each product, one line for each currency. The list shows the first and counts the rest.

    Updated on saveproduct prices
  • Status and version

    Set on the product itself when someone saves it, withdraws it or makes it Available.

Source kinds

  • Saved here

    Kept in the admin's own database.

    Updated on savemaster drafts
  • Copied in

    Copied from another system on a schedule. The time of the last copy is shown.

    Synced Yesterday 06:00cloth library
  • Brand access list

    Which brands can see a product. This is not connected to the page yet.

    Not wired
  • Cloth details

    The last copy from the cloth suppliers did not finish, so these may be out of date.

    Last copy failedLast good copy 6 Octcloth library
UsesBadgeAlert (warning)Alert (destructive).chip.warning.chip.danger.ph-code

Key terms

Three or four words the page uses, each in one line. Nothing a person already knows.

Key terms

Handle
The short name in the web address, like navy-birdseye-two-piece.
Draft, Available, Retired
Draft is still being written. Available can be copied by brands. Retired is kept but no longer offered.
Version
A number that goes up each time a product is made Available again, like v4.

Key terms

Anchor cloth
The main cloth this product is built around.
Sibling cloths
Other colours of the same cloth that can be sold as the same product.
Ways to sell
The kinds of order a brand may take for this product.
Avatar
The model figure used in previews. For this product it is fixed to RJ Clothing.
UsesDescription listCollapsible (phone).ph-terms

Drawer states

Loading, no help written yet, and a failed load. The page behind keeps working in all three.

loading
FW
empty
FW
error
FW
UsesSkeletonAlertButton.ph-sk.ph-note

Drawer on the Global Store editor

The same drawer on a longer page, open on load. The body scrolls; the header and footer stay put.

StagingHelp for this pageFW

Navy birdseye two-piece suitAvailable v4

Global Store product · last saved 2 Oct

Anchor cloth

Cloth
Crystal Springs
Code
HS 81045
Weight
280 g
Colour
Navy
Search cloth code

Recommended price

GBP
£1,150.00
EUR
€1,320.00
USD
$1,450.00
UsesSheetScrollArea--help-w