cowelltactical.com · design handoff v3

Screens for Peter

Every screen of the new site, clickable. Use them for structure, layout and behavior. The copy is draft and the owner is rewriting it, and anything in [ brackets ] or an empty photo slot is a fact or photograph still to come. Where the mockup fakes something (a cart kept in the browser, a form that doesn't send), the spec describes the real behavior.

Read the full build spec →
Khand / BarlowRed #C8102E · ink #15171A · shell #EDF0F2Square cornersHamburger on phones only

Read this first: two purchase paths

External armor carriers Configured in the Loadout Designer (loadout.cowelltactical.com), quoted by email, then invoiced through Xero when the carrier ships. Never paid at checkout, and never allowed in the cart. Specs change during a 14–16 week build, so invoicing happens at the end. Owner's instruction: do not unify this with checkout.
Everything else: one shared checkout ID panels, name tapes, identification vests, air medic vests, MOLLE pouches and accessories all go into one cart and check out together. Three routes, chosen once for the whole basket: card (paid now via Stripe), purchase order (Xero invoices against the PO), or request a quote (Xero emails a quote). The cart contract is in cart.js.
Lead timesCarriers 14–16 weeks · ID and air medic vests 4–6 weeks · pouches and accessories within 2 weeks · panels and name tapes batched weekly, ship Wednesdays XeroThe system of record. Every route ends there: a paid invoice for card, an emailed invoice for PO, an emailed quote for quote. Always page → server → Xero, never from the browser PricingPrices on the page are indicative. Re-price every line on the server from the product and its options. The patch configurator's shared package already does this for panels; extend it to the catalog Sales taxIdaho orders only RepairOur own armor carriers only, $50/hour, quoted first. Not sold on the site One sign inThe store and the Loadout Designer share one passwordless identity: email plus a confirmation code. Customer records live in Xero, or are pushed to it. "Sign in" is a single door that routes by what the customer has: store orders, carrier quotes, or both AccountsBelong to the department, not the person. History, saved configurations and the cart are keyed to the organization; the purchaser's email is a contact that can be changed. Cowell staff reassign an account from an admin screen when the clerk changes Owned by LoadoutArmor tracings, measurements and saved department carrier specs

Screens

Store front Home Statement and portrait photo, three entry cards (see the carrier, build one now, ID panels), product grid of all six lines with from-prices, reviews, the shop, in service with. Open → Products index Grouped by the two purchase paths: the carrier as a feature card, then the five lines ordered on the site. Configurable lines offer "photos and specifications" or "build one now". Departments band at the foot. Open → Armor carrier · Loadout Designer path External armor carrier Hero with from-price, six feature tiles (swipe row on phones), customer quotes, department gallery, sizing with video, five-step ordering timeline, samples band, then accordions closed by default (specs, construction, full sizing, ordering, repairs, departments, care, questions). Every action goes to the Loadout Designer. Product schema in the head. Open → Sample carriers Departments borrow a sample to see and handle before ordering. Terms strip, sample cards with availability, and a request form whose sample dropdown is built from the same data as the cards. The sample rack must be editable by shop staff. Open → Ordered on the site · shared cart ID panels & name tapes Sales page: how they are made, price tiers and stock sizes, name tapes, the lettering rule, colors, where they go. Sends people to the configurator. Open → Panel configurator Build left, live drawing right, every size at one scale. Two steps: Add to order stages pieces on an editable list (re-count, copy to editor, remove), then Add to cart hands the lot over. Name tapes entered as a list of names. Pricing and validation from the configurator's tested shared package. Open → Identification vests Line page: the RC150, RC250 and RC350 drawn side by side with prices and what each carries, each opening the order page on that model. Open → Vest order page One step: model, colors, front and rear wording, name tapes assigned to sizes, adjustment, quantity per size, then Add to cart. Live front and back drawing with the running total. Same ID on every vest, so no staged order here. Adding clears the wording and sizes and keeps model and colors. Open → MOLLE pouches Catalog of 15 pouches in four groups. Add opens a quick-add drawer (side panel on desktop, swipe-down bottom sheet on phones) with the pouch's options, color and quantity. Dropdowns open on a placeholder so nothing is ordered by default; what was typed is kept per pouch. Open → Pouch product page One template for every pouch: photos, price, fits, option fields, color, add to cart, specifications, links to the others. The drawer and this page read the same pouch data. Open → Air medic vests Line page and order page on the identification vest templates. Models, prices and pockets still to come; fill from product data. Open → Accessories Catalog on the MOLLE pouch pattern: rows, quick-add drawer, shared cart. Items still to come. Open → Cart, checkout, confirmation One page in three steps: your order, where it ships, how you are paying. Card / purchase order / request a quote as equal choices; tax line reacts to the state field; confirmation differs per route. Shows the shared cart (the mockup shows sample lines). Open → Company and support Reviews Reviews from Google and WooCommerce, filterable by product line, plus departments in service. Reviews tagged to a product also show on that product's page. Open → Vendor information W-9 download, DUNS, CAGE, SAM, billing paths. Link it from Xero invoices and quotes, not just the site. Open → Questions and answers Expandable rows in four groups with jump links: ordering and payment, sizing and fit, repair, departments. Open → About Company history, how we work, owners, in service with. Open → Contact Details as a table, two shortcut cards for people who should not use the form, topic picker that changes the message prompt, Turnstile. Open →

Worth reusing from the mockup

cart.jsThe cart contract: item shape, operations, the three checkout routes, the one seam where the back end plugs in, and carriers refused patch-logic.jsPanel and name tape pricing, sizes, colors and validation. Generated from the configurator's tested shared package; use the package placard-layout.jsThe lettering engine for panels, name tapes and vest placards, drawn in self-hosted Inter Black pouch-data.jsThe shape of catalog data with per-product option fields sitenav.jsProducts dropdown, and the hamburger below 760px only tokens.css · site.cssColors, faces, page width, and the components and style pass

Not in the mockup yet

Sign in, account, order statusPasswordless, department-owned accounts, reorder from past orders, saved work in progress, staff admin for reassigning accounts. With the developer Loadbearing vestsNot announced yet. Leave room for another line: its own page and its own Loadout Designer entry Search resultsThe search box is on every page; results page not designed Shipping ratesCheckout has the line; rates to come from the owner Policy pagesTerms, privacy, shipping and returns

All copy in these files is draft and photography is still to come. Build copy, prices and product data as editable content rather than hard-coded strings.