Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Shopify Theme FlowNew to Visual Studio Code? Get it now.
Shopify Theme Flow

Shopify Theme Flow

Rishabh Mishra

|
593 installs
| (22) | Free
VS Code extension to enhance theme development with theme server functionality.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Shopify ThemeFlow

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 Alert: If the directory structure is invalid, the extension will display an error message and 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 server with two-way sync for the theme editor.
  • 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

  1. 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.
  2. 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

  1. Open a Shopify Theme Directory: Ensure your project follows the Shopify theme structure.
  2. Use Status Bar Commands: Click the status bar buttons to execute commands. The first time you’ll be prompted for the store URL.
  3. 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.


Made with ❤️ by Rishabh — bringing ease and joy to Shopify theme development!

Connect with me on LinkedIn, X, and Instagram

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft