ShopifyUtils

ShopifyUtils is a Visual Studio Code extension that provides a suite of utility functions tailored for Shopify theme development. It helps developers streamline repetitive tasks, work more efficiently with Liquid templates, and maintain clean, optimized codebases.

🛠️ Usage

To use a Shopify utility:

1. Open any .liquid or relevant theme file in your workspace.
2. Right-click in the editor and choose from one of the Shopify utility options, or use the command palette (Ctrl + Shift + P / Cmd + Shift + P) and search: Shopify to see the currently available utility functions.

Each utility is designed to run contextually on selected code or the current file, depending on the command. More of that in the Features section!

🧩 Requirements

• A working Shopify theme project.
• Recommended: Shopify Liquid VS Code Extension for syntax highlighting and Liquid language support.

🚀 Features

🏃‍♂️ Shopify Theme Runner

Problem: Working as a freelancer or agency developer across multiple Shopify stores? Constantly double-checking store names or copy-pasting long URLs? Shopify Theme Runner simplifies your workflow by letting you start development on any store with just a few clicks — no more memorizing store names.

Solution: Configure once in your VS Code settings, then spin up any of your development stores instantly using the Command Palette or a convenient status bar button.

⚙️ Configuration

1. Open your VS Code User Settings (JSON): Press (Ctrl + Shift + P / Cmd + Shift + P), then search for “Preferences: Open User Settings (JSON)”

2. Add your store mappings under the following key:

"shopify-dev-utils.labelKeyMappings": {
  "My Test Store": {
    "shopHandle": "test-123",
    "defaultPort": 9292
  },
  "Production Store": {
    "shopHandle": "prod-456",
    "defaultPort": 9293
  },
  "Another Shop": {
    "shopHandle": "shop-789"
  }
}

Each entry maps a human-readable label to a configuration object containing:

• shopHandle: The Shopify store handle (no need for .myshopify.com suffix)
• defaultPort: Default port for this specific store

3. Optional Settings:

"shopify-dev-utils.enablePortSelection": false,
"shopify-dev-utils.enableTerminalDisposal": true

• enablePortSelection: When enabled, prompts for port selection after choosing a store
• enableTerminalDisposal: When enabled, automatically closes existing Shopify terminals before creating new ones

🚀 Running a Store

Once configured, you can start a Shopify development session in two ways:

• Command Palette: Press (Ctrl + Shift + P / Cmd + Shift + P) and search for “Run Shopify Theme”

• Status Bar Shortcut: Look for the “Run Shopify Theme” button in the bottom-right of your VS Code window.

Both options will launch a quick picker where you can choose one of your labeled stores. After selection, Shopify Theme Runner will open a terminal named after your store label and run:

shopify theme dev --store={your-store-handle}

New Features:

• Store handles work without .myshopify.com suffix
• Individual default ports per store
• Clear terminal naming with store labels
• Optional terminal cleanup for cleaner workspace
• Automatic configuration migration from old format
• Port validation and availability checking

No more remembering store names — just label, select, and go!

🔍 Port Configuration Management

Validate Your Ports: Use the Command Palette (Ctrl + Shift + P) and search for "Check Port Configuration" to validate all your configured default ports.

Port Rules:

• Ports must be between 1 and 65535
• Each store should have a unique port to avoid conflicts
• Common Shopify development ports: 9292, 9293, 9294, etc.
• The extension will warn you if ports are invalid or currently in use

Automatic Migration: When upgrading from older versions, your configuration will be automatically migrated:

• Old format: "Store Name": "store-handle"
• New format: "Store Name": { "shopHandle": "store-handle", "defaultPort": 9292 }
• Available ports are automatically assigned during migration starting from port 9292

Let me know when you're ready to add more feature docs — or want help with a GIF or screenshot suggestion to visualize this in the README!

👤 Author

Created and maintained by Tim Dehler Built to support the Shopify theme development community ❤️