Shopify OS 2.0 theme editor Steal
Sections tree + sidebar toggling per-page vs global; conditional settings; double-sidebar at wide widths.
help.shopify.com/en/manual/online-store/themes/customizing-themes/theme-editor/features-overviewstorekit · Task #2 · UX/UI Review
Store Designer - Research & Inspiration
How we approached the redesign: a live audit of the current Store Designer, benchmarked against the editors operators already trust, distilled into one governing idea, then traced back into every design decision.
1. Audit the live product
2. Benchmark the giants
3. Distil the governing idea
4. Trace into the redesign
METHOD
How we did the research
We logged into the real Store Designer and captured its actual screens, catalogued the friction, then sourced a named, real-world reference for every problem from product docs, changelogs and design-system guidelines. Nothing here is opinion without a citation.
Steal - pattern we adopt
Beat - where we do better
Ours - the live product we are fixing
01 · THE THESIS
The one governing idea
What every best-in-class editor converges on
Abandon "one raw field per element". Instead: a small set of named brand tokens/roles that cascade, assigned to whole regions, edited by pointing at a live, click-to-edit preview, with presets as the starting point and progressive disclosure hiding the advanced controls. Every reference below is a variation on this.
02 · THE STARTING POINT
The live Store Designer, as it is today
Our own captures of the current product. These are the screens the client asked us to improve, and the baseline every reference is measured against.
03 · BENCHMARK - SHELL
Screen 1 - the editor shell
Grouped/scoped navigation, live-preview coupling, guided setup with progress, and a command palette.
Grouped, scoped, progressive navigation
Stripe dashboard Steal
Every setting under exactly three buckets - nothing is a flat list.
docs.stripe.com/dashboard/basics
Wix Studio / Framer Inspector Steal
A single context panel, empty until you select an element, then only that element's options.
support.wix.com/en/article/studio-editor-using-the-inspector-panelLive-preview coupling / click-to-edit
Shopify online editor Steal
Click a section in the preview - selects it in the sidebar; changes re-render live.
shopify.dev/docs/storefronts/themes/tools/online-editor
Squarespace Fluid Engine Steal
Hover a section - "Edit Section"; global Site Styles kept distinct from local edits.
support.squarespace.com/hc/en-us/articles/6421525446541-Edit-your-site-with-Fluid-Engine
Webflow Navigator Steal
Structure tree, canvas and Style panel all synced.
help.webflow.com/hc/en-us/articles/33961320786451-NavigatorGuided setup / presets / progress
Shopify Setup Guide Steal
Checklist with progress, auto-opens next step, dismissible. Direct fix for "no sense of progress".
shopify.dev/docs/api/app-home/patterns/compositions/setup-guide
Square Online Steal
Start from a preset matching your brand; template pre-selected by business type.
squareup.com/help/us/en/article/7820-choose-themes-for-your-square-online-site
Canva Brand Kit Builder Steal
Auto-extracts logo, colours, fonts from a website/PDF. Model for "import your brand".
www.canva.com/help/brand-kit-builder/
Linear / Notion / Vercel Steal
Cmd-K palette, fuzzy search over all settings/actions, grouped by category.
mobbin.com/glossary/command-palette04 · BENCHMARK - COLOURS
Screen 2 - colours
A small palette of roles that cascade, semantic tokens with light/dark, and point-at-the-storefront contrast fixing.
Squarespace colour themes Steal
Define 5 brand colours; auto-generates ~10 role-mapped themes. Strongest single model.
tutorials.squarespace.com/design/color-themes
Google Material 3 Steal
One seed brand colour generates the whole accessible scheme. Canonical answer to 30 hex fields.
m3.material.io/styles/color/roles
shadcn/ui + Radix Colors Steal
Every surface has a bonded -foreground pair so text is legible by construction; dark mode overrides same tokens.
www.radix-ui.com/colors
Canva colour themes Steal
Eyedropper reveals any element's colour + name; "Shuffle" previews coordinated looks.
www.canva.com/help/color-themes/
Webflow style indicators Steal
Coloured dots show local vs inherited vs global. Fixes "why did changing one thing change all of them?"
help.webflow.com/hc/en-us/articles/33961362040723-Style-panel-overview
APCA + CSS contrast-color() Steal
Auto-legible text; one-click "fix text" to a passing colour. Backs our contrast warning.
apcacontrast.com/05 · BENCHMARK - MENU ITEMS
Screen 3 - menu items / item modal
Edit the real dish popup with a live preview that updates as you style it; show each layout choice as a clear structural tile; and group the controls by purpose with the advanced ones tucked away.
Shopify block/section previews Steal
Picker renders the actual block content, not a generic icon.
shopify.dev/changelog/block-previews-now-available-in-theme-editor
Framer variants Steal
Selecting a variant animates current - chosen, making the delta visible.
www.framer.com/dictionary/component-variant/
me&u / Mr Yum dish modal Steal
Hero photo, name, price, dietary tags, modifier groups, sticky "Add to order". The bar our preview must match.
help.meandu.com/hc/en-us/articles/6539926480527-How-to-add-photos-to-your-menustorekit Buttons panel Ours
Already renders real style tiles + inline preview. The internal proof we scale to Colours & Menu items.
the live product (internal gold standard)
06 · COMPETITORS
Hospitality peers - steal & beat
Where the direct competitors are strong (adopt) and where they leave gaps (our opportunity).
Toast Online Ordering Pro Steal Beat
Steal: colour-by-named-region, font upload, format guardrails. Beat: no in-flow live preview, no presets, no logo-to-palette.
support.toasttab.com/en/article/Toast-Online-Ordering-Pro-Menu-Customization
Flipdish Steal
A true Brand object that cascades across web/app/kiosk with per-channel override - fits storekit's web + QR + pay-at-table.
help.flipdish.com/en/articles/10137839-how-to-create-and-edit-brand-in-the-portal
GloriaFood Steal
Built-in free food-photo stock library - huge for operators with no photos.
www.gloriafood.com/online-ordering
Slerp comparison page Beat
Runs a public "better than storekit" page. We screenshot it, then show our redesign closing each claimed gap.
www.slerp.com/alternatives/storekit07 · GALLERIES & STANDARDS
Pattern galleries & commercial standards
Where we mined live patterns, and the authorities we cite to justify each decision. Gallery sources are login-gated - referenced by URL, not scraped.
[ reference: Mobbin - login-gated ]
Mobbin
Real shipped patterns: dashboards, settings/preferences, colour pickers, inline-edit.
mobbin.com[ reference: Refero ]
Shopify Polaris Steal
"Make colour a visual task, not a technical one." >5 inputs - titled sections; progressive disclosure; avoid large forms in modals.
polaris-react.shopify.com/design/colors/palettes-and-roles
Duda Global Colors Steal
Auto-generate palette from the uploaded logo, "cuts colour picks 80%". Closest analog to our operator.
www.duda.co/product-updates/global-colors
Elementor global colours Steal
Named global colours; element pickers bind to a global via a globe icon. Model for Colours roles.
elementor.com/help/view-and-edit-global-colors/
Apple HIG - Color Wells Steal
Compact swatch showing the live colour; opens picker with saved reusable colours. Model for swatch-first rows.
developer.apple.com/design/human-interface-guidelines/color-wells08 · TRACEABILITY
How the research fed the redesign
Every requirement in our design brief maps a live pain to a proven reference. This is the through-line of the presentation.
| Live pain (audit) | What we do | Proven by |
|---|---|---|
| 12 flat nav items, no start | Grouped nav + preset + import-brand + setup checklist with progress | Shopify Setup Guide, Stripe buckets, Canva Brand Kit, Duda logo-to-palette |
| Preview never shows what you edit | Two-way click-to-edit; preview binds to the open feature's surface | Shopify select-to-reveal, Squarespace, Webflow Navigator, Elementor |
| Can't find a control you can see | Always-visible search + Cmd-K palette over every setting | Linear / Notion / Vercel command palette |
| 30 raw colour fields | Small set of named roles that cascade; presets; light/dark on one token | Squarespace themes, Material 3, Radix, shadcn, Webflow variables |
| Illegible text pairings | Inline contrast warning + one-click "fix text", brand colour untouched | APCA, CSS contrast-color(), shadcn foreground pairs |
| Grey wireframe option tiles | Every option rendered as its real, populated result | Shopify block previews, Squarespace gallery, storekit Buttons panel |
| Ambiguous look-alike layout tiles | Named discrete stops; desktop/mobile split explicit | Framer variants, Klaviyo/Mailchimp layout choice |
| Mixed destructive + primary top bar | Regrouped top bar, two-axis save status, reconciled discard/revert | Shopify editor top bar, Elementor revisions, NN/g status |
Sources compiled from live product docs, changelogs and design-system guidelines (Shopify, Squarespace, Square, Wix, Webflow, Framer, Figma, Canva, shadcn, Radix), hospitality peers (Toast, Flipdish, me&u/Mr Yum, GloriaFood, Slerp) and UI galleries (Mobbin, Refero, Dribbble). URLs verified 2026-07-11. Companion to Audit/AUDIT.md and Audit/RESEARCH-REFERENCES.md.