--- title: "Documentation" description: "Jump into any Shopify store’s admin from the macOS menu bar." --- Storefront # Documentation ## Getting started Storefront runs on macOS 14 or later, on Apple Silicon. Download the latest release, open the DMG, and drag Storefront into Applications. - [Download for macOS](https://github.com/nuotsu/storefront-macos-menubar/releases/latest/download/Storefront.dmg) Click the menu bar icon, or press the default global hotkey `⌃⌥⌘S` (configurable in Settings → Keybindings). ## Add your stores Open Settings → Stores to add each shop: display name, `.myshopify.com` domain, and an accent color. Pin, reorder, or hide stores so the rail matches how you work. Storefront fetches each shop’s favicon for the rail and detail header. Refresh from Settings → Stores if a mark is missing or stale. Need to load many stores at once? Use [CSV import and export](#csv-import-and-export). ## Use the panel The left rail lists your stores. Select one to see section cards (Products, Orders, Themes, and more) with deep links into that store’s admin. Right-click a store in the rail to pin or unpin it, move it up or down, or hide it. Pinned stores stay at the top. Hidden stores collect under Hidden stores at the bottom of the rail: hover one and click the eye to unhide it. Hover compact panel controls to see their action and configured keyboard shortcut. Press `/` to search the rail. Storefront matches the display name or an abbreviation of it, so `bfg` reaches Blue Falcon Golf. Press `Return` (or click) to open a link in your default browser. Storefront only opens URLs using your existing logged-in Shopify session. It does not call the Shopify API and does not store credentials. ![](https://cdn.sanity.io/images/esz74z9f/production/812a6bf5accddb4c867399ecb96f8db854409f09-1264x1184.png) ## Settings - General: [app options](#general-settings) - Appearance: [theme, icons, and look](#appearance-settings) - Stores: add, edit, reorder, show or hide, recolor, import or export CSV - Sections: enable, disable, reorder; custom presets and Library CSV import/export - Keybindings: editable global hotkey and panel shortcuts, with a warning when two shortcuts claim the same chord - About: version, updates, website/docs links, and Send Feedback ### General settings Open Settings → General to control where Storefront lives on your Mac. - **Launch at login**: start Storefront when you log in - **Show in Dock**: show or hide the Dock icon (on by default for new installs) - **Show in menu bar**: show or hide the status item (global hotkey still works when hidden) - **Pinned stores in menu bar**: show favicons for visible pinned stores beside the menu bar icon (off when the icon is hidden) - **Open under mouse**: open a floating panel at the pointer on hotkey (always on when the menu bar icon is hidden). Menu bar clicks still open below the icon ![Screenshot of the General settings](https://cdn.sanity.io/images/esz74z9f/production/f74b273b562ac3bec8fd7d9f9b38e64ffad8831b-1662x1288.png) ### Appearance settings Open Settings → Appearance to control how Storefront looks. - **Menu bar icon**: Store, Cart, or Shopify in Outline or Filled (Shopify has a single form) - **App Icon**: Auto, Light, or Dark for the Dock and About icon (Auto follows system Light/Dark) - **Theme**: macOS (native chrome) or Shopify (Polaris-style Admin look for the menu bar widget, with a dark sidebar and a white main panel) - **Appearance**: Auto, Light, or Dark for the menu bar panel and Settings window (macOS theme only) - **Widget background**: Liquid Glass (vibrancy) or Opaque for the menu bar widget (macOS theme only) When Theme is Shopify, Appearance and Widget background follow the Admin look and are unavailable. ![Screenshot of the Appearance settings](https://cdn.sanity.io/images/esz74z9f/production/3a167afeabbaca3b9918f3f433a2c851df9e569e-1662x1534.png) #### CSV import and export Storefront can import and export CSV for stores and for saved section presets. ### Stores From Settings → Stores you can export your list or import a CSV to bulk-load stores. Use a header row plus one store per line. Color is hex without #. Files saved from Excel or Google Sheets import as is. - Display Name: label shown in the rail - Domain: e.g. *acme-coffee.myshopify.com* - Color: hex accent without the # prefix **storefront-stores.csv** ```csv Display Name,Domain,Color Acme Coffee,acme-coffee.myshopify.com,1f6f4a Northwind Outfitters,northwind-outfitters.myshopify.com,c07a2c Brightleaf,brightleaf-studio.myshopify.com,3a6ea8 ``` ![Screenshot of the Stores settings](https://cdn.sanity.io/images/esz74z9f/production/66f170d7ad62580dfe1d96a4873e46affb69c050-1662x1494.png) ### Customize sections Open Settings → Sections to choose which section cards appear in the panel. Toggle sections on or off, or use Enable All / Disable All. Save custom presets (or pick a built-in role preset) to switch layouts quickly. Need to import or export saved custom presets from Settings → Sections → Library? Use [CSV import and export](#csv-import-and-export). Drag rows to reorder the grid. Changes apply to every store. Use a preset or Reset to Default anytime to restore a saved or built-in layout. ![Screenshot of the Sections settings](https://cdn.sanity.io/images/esz74z9f/production/07af573f9305b28fa98990e5dc9ce0c8b7157277-1662x1762.png) #### Search and create Many links support inline search. Focus a row and press `⌃S` (or click the search control) to open or focus the search field. Leftover query text is selected so you can replace it. Press `⌃S` again while focused to close. Type a query and press `Return` to open the filtered admin page. Where a section has a create action, press `⌃A` (or click the `+` button) to open the “New” admin page for that resource. #### Section presets (Library) From Settings → Sections → Library you can export or import saved custom presets as CSV. Built-in role presets are not included. Import upserts presets by name (case-insensitive): matching names replace that preset’s layout, new names are added. Other saved presets stay put, and the currently applied section layout does not change until you select a preset. Columns (one row per section per preset): - Preset: saved preset name - Section: section id (e.g. *orders*, *products*) - Title: display title - Enabled: *true* or *false* **storefront-section-presets.csv** ```csv Preset,Section,Title,Enabled Store Ops,orders,Orders,true Store Ops,products,Products,true ``` ### Keyboard shortcuts #### Global - Global hotkey: open or close the panel (default `⌃⌥⌘S`, editable in Settings → Keybindings) - `⌘Q`: quit Storefront #### Store list - `/`: focus the store search field - `↑` / `↓`: move through the store list - `⌘1` - `⌘9`: jump to a specific store - `→` / `←`: enter the section-card grid - `A`: open Admin for the selected store - `O`: open Online Store for the selected store - `H`: open Support (Shopify Help Center) for the selected store The Admin, Online Store, and Support buttons underline the letter that opens them, so a rebound shortcut stays visible. #### Section grid - `←` / `→`: move between cards - `↑` / `↓`: move between links in a card - `Return`: open the focused link - `⌘-click`: open a link and keep the panel open - `⌃S`: open or focus search on the focused link; press again while focused to close - `⌃A`: create a new item for the focused link - `Esc`: step back, then close the panel #### Card links Press a letter to open that card link for the selected store. Each link shows its letter on the right of its row. Letters work from the store list or the section grid, but not while you type in a search field, and only for sections that are turned on. | Key | Opens | | --- | --- | | `P` | Products | | `C` | Collections (Products) | | `T` | Theme library | | `N` | Menus | | `R` | URL Redirects | | `D` | Discounts | | `G` | General (Store settings) | | `W` | Pages | | `B` | Blogs | | `F` | Files | | `M` | Metafields | ![Screenshot of the Keybindings settings](https://cdn.sanity.io/images/esz74z9f/production/bb08d9983bd33eb3f4528f95e957d9dcce33e162-1662x1288.png)