Specs for a Shopify theme team
Everything needed to build the concept as theme section and block changes — no new apps. Tokens extend the live site's own palette and type; each section lists layout, data sources, states, edge cases and accessibility.
Live palette plus four additions
Read from travelpro.com's CSS: cream page #FDFCF6, brand brown #675144, "Travelpro Display" serif over "Travelpro Inter". New: sale red, success green, hero burgundy, deep brown.
| Token | Value | Use | Contrast |
|---|---|---|---|
| color.bg | #FDFCF6 | Page | — |
| color.surface | #F4EFE6 | Image wells, cards | — |
| color.band | #EFE7DA | Top bar, footer, help panel | — |
| color.text | #1C1A17 | Body, product names | 17:1 on bg |
| color.text-muted | #5F5850 | Secondary text | 6.8:1 on bg |
| color.brand | #675144 | Primary buttons, logo | 7.4:1 white on brand |
| color.hero (new) | #5E1620 | Promo hero | 12.7:1 cream on hero |
| color.sale (new) | #A3122A | Sale prices and badges only | 7.7:1 on bg |
| color.success (new) | #2E6B3A | Delivery dates | 6.2:1 on bg |
| type.display | Serif 600 · 56 / 40 / 30 px | Hero, section titles | — |
| type.body | Sans 400–700 · 15 px base, 13 px min | Everything else | — |
| radius | 4 / 6 / 8 px · pill | Buttons / cards / panels · search, chips | — |
| space | 8, 12, 16, 24, 32, 56 | Gaps and section padding | — |
| target | 44 × 44 px minimum | Every tap target | — |
Five pieces do most of the work
Button
Primary (brand fill, 48–56 px) for one main action per view; Secondary (1.5 px brand outline) for "Add both"; On-dark inside the hero. Hover darkens 8%. Focus keeps the live 2 px #236192 outline. Loading: "Adding…", width locked, aria-busy.
Swatch picker
A radio group: 44 px circles, selected ring 2 px #1C1A17, name in the legend ("Color: Bordeaux"). Limited editions sit behind a "+3 limited editions" link in the same group. Arrow keys move, Space selects.
Product card
Image well, optional "Save $X" badge (only when compare-at > price), up to 4 decorative dots + "+N", sentence-case name as H3, "★ 4.6 · 1,560 reviews", price with struck regular price.
Proof strip
Four verified claims — 220,000+ aviation pros, Built for a Lifetime warranty, 100-day guarantee, Wirecutter 2026 — icon + bold claim + one muted line; 4 across, 2 × 2 on phones.
Purchase bar (phone)
Pinned to the bottom: free-delivery date (max 40 characters) + Add to cart with price. A labeled region; page reserves bottom padding so it never covers content; hides while the keyboard is open.
Five words and a search field
| Breakpoint | Header | Menu | Search |
|---|---|---|---|
| Phone < 768 px | 52 px bar: menu, centered logo, account, cart; one static top message | Full-height drawer, one level at a time | 44 px pill under the header on home and collections; icon on product pages |
| Tablet | Same; logo left | Drawer | Pill in the header row |
| Desktop ≥ 1024 px | Logo, five items, search (min 260 px), account, cart | Mega-menu on hover (150 ms intent) or click | Always visible |
| Top item | Columns |
|---|---|
| Luggage | By size (Carry-On, Checked, Sets) · By type (Hardside, Softside) · By collection · Help me choose (Luggage Finder, Airline size limits, Compare carry-ons, Hardside vs softside) |
| Bags | Backpacks, Totes, Underseat, Garment, Duffels, Laptop bags · Collections |
| Accessories | Toiletry bags, Packing cubes, Tags and passport covers |
| Gifts | Gift guide, Gifts by price, Corporate gifting |
| Sale | Direct link; hidden automatically when the collection is empty |
Search: Shopify predictive search after 2 characters, 200 ms debounce — 4 products, 3 collections, 2 guides. Results page includes pages and guides (today "warranty" returns 181 bags). No matches: "No matches for 'xyz'. Try 'carry-on' or browse Luggage." Accessibility: menu items are buttons with aria-expanded; search is a combobox; arrows move through suggestions, Esc clears.
Shopping within the first phone screen
| Section | Desktop | Phone | Data |
|---|---|---|---|
| Hero | 50/50 copy and art, one offer, no auto-rotation | Card ≤ 220 px tall | Theme section |
| Proof strip | 4 across | 2 × 2 tiles | 4 blocks, verified claims only |
| Shop by type | 5 tiles, auto-fit, min 190 px | Horizontal chip row (scrolls) | Menu "Shop by type" |
| Not sure which bag? | Title + 3 link cards | 2 stacked link cards | 3 blocks |
| Best sellers | 4-column grid | 2-column grid | First 4 in-stock products; fill from New arrivals |
| Our story | Copy + 4 stat tiles | Copy only | Editable text, no counters |
| Signup | Footer form | Inline card after Best sellers; never a full-screen overlay | Existing email platform form |
States: signup success "You're in. Check your inbox for 10% off." · invalid "Enter an email like name@example.com." (keeps the text) · already subscribed "You're already on the list". Best-seller images use fixed 1:1.2 wells so nothing shifts while loading. One H2 per section; product names as H3; card dots decorative.
Decide, then add — without scrolling
| Order | Block | Spec | Data |
|---|---|---|---|
| 1 | Gallery | 240 px, swipe, "1 / 8" | Variant images |
| 2 | Name, price, rating | H1 22 px; price 22 px 700; rating links to reviews | Product |
| 3 | Color | Swatch picker; first screen | Variant option + limited-color metafield |
| 4 | Size | 3-column 46 px buttons; fit line | Linked products; keep color on navigate |
| 5 | Purchase bar | Pinned; free-delivery date + Add to cart · price | Same estimate source as checkout |
| 6 | Warranty card | Name + one-line summary + "What's covered" | Collection metafield — never hard-code "lifetime" |
| 7 | Size and weight | 3 rows, in/lb with cm/kg toggle; hide if missing | Product metafields |
| 8 | Will it fit? | Airline picker → "Fits United's limit" / "Over by 0.5 in" | Airline Size Limits guide data |
| 9 | Features · Q&A · Reviews | Accordions, one open at a time | Description, current apps |
| 10 | Complete the set | 2-up, "Add both · $total" in one request | Complementary recommendations |
| Element | State | Behavior |
|---|---|---|
| Add to cart | Loading | "Adding…", width locked, disabled, aria-busy="true" |
| Add to cart | Success | Cart drawer opens; focus to its heading |
| Add to cart | Error | "Couldn't add to cart. Check your connection and try again." under the button |
| Add to cart | Sold out | "Sold out — get an email when it's back", secondary style |
| Swatch | Unavailable | Diagonal line; still focusable; announced "unavailable" |
| Set builder | Loading | Reserve 320 px; load after main content; no skeleton above the fold |
| Interaction speed | Swatch or size tap | Next paint under 200 ms (today 255 ms) — defer third-party scripts |
One column of decisions, top to bottom
Container 1280 px. Gallery flex: 999 1 560px (2 × 2 images, "View all 8 photos" opens a dialog viewer) and buy box flex: 1 1 380px, sticky at 96 px until the gallery ends. Buy box order: breadcrumb → eyebrow (collection · material · award) → H1 → price + rating → Shop Pay line → color → size + "Compare sizes" → delivery line → Add to cart (56 px, carries the price) → warranty card → returns and shipping tiles → "Best for".
States: color change updates ?variant=, images, price and availability without reload · size change navigates and keeps color · ZIP edit inline, invalid → "Enter a 5-digit ZIP code." · under 3 reviews hide the average and show "Be the first to review". Edge cases: variant without images falls back with "Shown in True Navy"; missing dimensions hide the block; one-size products hide the size group.