Shopify ThemeFlow is a VS Code extension designed to enhance Shopify theme development by integrating Shopify CLI commands directly into the editor. The extension provides easy-access commands and customizable settings to improve workflow efficiency.
Features
1. Automatic Shopify Theme Directory Detection
Directory Validation: Ensures the workspace follows the Shopify theme structure, with required folders such as assets, config, layout, locales, sections, snippets, and templates.
Activation: If the directory structure is invalid, the extension will not activate.
2. Shopify CLI Command Shortcuts in Status Bar
The extension places frequently-used Shopify CLI commands in the status bar for quick access:
Run Dev Server (shopify theme dev): Starts the development server.
Run Dev Server with Sync (shopify theme dev --theme-editor-sync): Starts the development server with two-way sync.
💡 Why use this? This keeps your local code and the online Theme Editor in perfect sync. If you change a setting in the online customizer, it updates your local files instantly—preventing the common mistake of overwriting client data when you push your code.
Push Theme (shopify theme push): Deploys the current theme to the store.
Pull Theme (shopify theme pull): Downloads the theme from the store.
Pull JSON Files Only (shopify theme pull -d -o *.json): Retrieves only JSON files for faster syncing.
Share Theme (shopify theme share): Generates a preview URL for sharing the theme.
3. Store URL Prompt and Recent URL History
Store URL Prompt: On running commands like Dev or Push for the first time, you'll be prompted to enter a Shopify store URL.
Recent URL History: The extension saves the last five store URLs, which are then selectable in future prompts for easy switching between stores.
4. Visual Indicators for Running State
Single Instance Check: Prevents multiple instances of the Dev server or Sync from running at the same time.
Running State Indicator: Shows a green indicator next to the Dev or Sync buttons while active. The indicator resets when the server stops or the terminal is closed.
5. Customizable Button Display
Icon Display Mode: In settings, choose between "expanded" (text and icon) or "collapsed" (icon only) mode for buttons in the status bar.
To Configure: Go to Settings > Extensions > Shopify ThemeFlow and select "Icon Display Mode."
Configuration
Store URLs: The extension will prompt you for a store URL the first time you run a command each session. You can select a previously used URL or enter a new one.
CLI Installation Check: The extension automatically checks for the Shopify CLI. If not installed, an error message provides a link to Shopify CLI installation instructions.
Quick Start
Open a Shopify Theme Directory: Ensure your project follows the Shopify theme structure.
Use Status Bar Commands: Click the status bar buttons to execute commands. The first time you'll be prompted for the store URL.
Track Running State: The status bar updates to indicate whether the Dev or Sync server is running. Close the terminal to stop the server and reset the button.
Requirements
Shopify CLI: Ensure the Shopify CLI is installed. You can install it here if needed.
