{"title":"Compiling Liquid theme resources","slug":"compiling-liquid-theme-resources","url":"https://support.storeconnect.com/articles/compiling-liquid-theme-resources","url_markdown":"https://support.storeconnect.com/articles/compiling-liquid-theme-resources.md","subtitle":null,"summary":"Build, watch, and compile theme scripts, styles, and files with Node.js and esbuild: install, build commands, production builds, clean rebuilds, and deploying selective updates via manifest.json.","type":"Developer_Documentation","video_url":"","keywords":"liquid, theme resources, compile liquid, esbuild, npm build, theme scripts, theme styles, manifest.json, watch mode, production build, node.js, theme importer","last_modified":"2026-08-21T07:12:35+0000","body_markdown":"## Directory Structure Overview\n\n```\ntheme/\n└── resources/\n    ├── build/\n    │   ├── files-config.js\n    │   ├── helpers.js\n    │   ├── index.js\n    │   ├── scripts-config.js\n    │   └── styles-config.js\n    ├── src/\n    │   ├── files/\n    │   ├── scripts/\n    │   └── styles/\n    ├── script.liquid\n    ├── style.liquid\n    ├── package.json\n    └── package-lock.json\n```\n\n## ✅ Prerequisites\n\nEnsure Node.js is installed on your machine.\n\n### Install Node (macOS Example):\n\n```\nbrew update\nbrew install node\n```\n\nVerify installation:\n\n```\nnode -v\nnpm -v\n```\n\n## 🔧 Step-by-Step Instructions\n\n1.  ### Navigate to the Resources Directory\n\n    ```\n    cd theme/resources\n    ```\n\n2.  ### Install Dependencies\n\n    This installs everything from `package.json`:\n\n    ```\n    npm install\n    ```\n\n3.  ### Run the Build Script\n\n    ```\n    npm run build\n    ```\n\n4.  ### Expected Output\n\n    ```\n    [esbuild theme scripts] building...\n    [esbuild theme scripts] ...done\n    [esbuild theme styles] building...\n    [esbuild theme styles] ...done\n    [esbuild theme files] building...\n    [esbuild theme files] ...done\n    ```\n\n\n## 🛠 Additional Commands\n\n| Command                  | Description                                        |\n|--------------------------|----------------------------------------------------|\n| npm run build            | Build scripts, styles, and files                   |\n| npm run watch            | Watch for changes and auto-recompile (with minify) |\n| npm run clean            | Remove dist/ and rebuild                           |\n| npm run heroku-postbuild | Production build with minify and cleanup           |\n\n## 📌 Optional Tasks\n\n### 🧹 Clean\n\nAfter extended development, compiled output may become bloated. You can clean and regenerate only the latest files by running:\n\n```\nnpm run clean\n```\n\nThis removes the `dist/` directory and runs a fresh build.\n\n### 🚀 Production\n\nTo prepare a final production version for deployment:\n\n1.  Clean the build:\n\n```\nnpm run clean\n```\n\n1.  Run a minified production build:\n\n```\nnpm run heroku-postbuild\n```\n\nThis generates a fully packaged and minified `resources` folder suitable for use with the StoreConnect Theme Importer.\n\n### 📝 Minor Changes\n\nTo make minor updates to only a few scripts, styles, or assets without a full theme re-import, you can overwrite the manifest to include only the changed files.\n\n1.  **Run the watch script:**\n\n    ```\n    npm run watch\n    ```\n\n2.  **Edit the desired files:**\n\n    As you make changes to JavaScript, CSS, or static files in `resources/src/`, esbuild will automatically compile and generate updated hashed files in `resources/dist/`.\n\n3.  **Deploy selective updates without full import:**\n    1.  Open Salesforce.\n    2.  Navigate to the **Themes** tab.\n    3.  Open the Theme record you want to update.\n    4.  Navigate to the **Theme Templates** section.\n    5.  Create or update the appropriate template for each modified file. Use these template key formats:\n\n        -   **Scripts:** `resources/dist/scripts/[dir]/[filename].[hash].js`\n        -   **CSS:** `resources/dist/css/[dir]/[filename].[hash].css`\n        -   **Files:** `resources/dist/files/[dir]/[filename].[hash].[ext]`\n    6.  Create or modify a template with the key: `resources/dist/manifest.json`\n\n        This maps updated files to their unhashed equivalents and augments the existing manifest without overwriting the full bundle. Example format:\n\n        ```\n        {\n          \"dist/scripts/bundles.js\": \"dist/scripts/bundles.KCS3ODL5.js\",\n          \"dist/css/utils/dropdown.css\": \"dist/css/utils/dropdown.GRARK238.css\",\n          \"dist/files/logo.png\": \"dist/files/logo.IJQZ82PO.png\"\n        }\n        ```\n\n\n#### 📌 Notes on Hashing\n\nThe `[hash]` in filenames is used for browser caching. When a file changes, its hash will change. To ensure updated files are loaded, make sure:\n\n-   The new `[hash]` is used in both the file name and the `manifest.json` template.\n-   You're using esbuild in watch mode or running a fresh build after edits.\n\n#### 🧩 Usage in the Theme\n\nWithin your Liquid templates, you should reference the unhashed resource names. The Theme engine will resolve these using `manifest.json`.\n\n\n```\n{% require 'scripts/bundles.js' %}\n{% require 'css/utils/dropdown.css' %}\n{% require 'files/logo.png' %}\n```\n\n\n## ✅ Summary\n\n-   **Navigate:** `cd theme/resources`\n-   **Install:** `npm install`\n-   **Build:** `npm run build`\n-   **Watch:** `npm run watch`\n-   **Clean:** `npm run clean`\n-   **Prod Build:** `npm run heroku-postbuild`"}