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": "test-123",
  "Production Store": "prod-456",
  "Another Shop": "shop-789"
}

Each entry maps a human-readable label to the corresponding Shopify store slug.

4. If you want to decide which port your theme preview should start on just enable the enablePortSelection

"shopify-dev-utils.enablePortSelection": false;

After selecting the store you can now enter a port the preview should start on. Keep in mind that only valid ports (1–65535) will be accepted.

🚀 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 and run:

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

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

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 ❤️