# Compiling Liquid theme resources Source: https://support.storeconnect.com/articles/compiling-liquid-theme-resources · Last modified 21 August 2026 ## Directory Structure Overview ``` theme/ └── resources/ ├── build/ │ ├── files-config.js │ ├── helpers.js │ ├── index.js │ ├── scripts-config.js │ └── styles-config.js ├── src/ │ ├── files/ │ ├── scripts/ │ └── styles/ ├── script.liquid ├── style.liquid ├── package.json └── package-lock.json ``` ## ✅ Prerequisites Ensure Node.js is installed on your machine. ### Install Node (macOS Example): ``` brew update brew install node ``` Verify installation: ``` node -v npm -v ``` ## 🔧 Step-by-Step Instructions 1. ### Navigate to the Resources Directory ``` cd theme/resources ``` 2. ### Install Dependencies This installs everything from `package.json`: ``` npm install ``` 3. ### Run the Build Script ``` npm run build ``` 4. ### Expected Output ``` [esbuild theme scripts] building... [esbuild theme scripts] ...done [esbuild theme styles] building... [esbuild theme styles] ...done [esbuild theme files] building... [esbuild theme files] ...done ``` ## 🛠 Additional Commands | Command | Description | |--------------------------|----------------------------------------------------| | npm run build | Build scripts, styles, and files | | npm run watch | Watch for changes and auto-recompile (with minify) | | npm run clean | Remove dist/ and rebuild | | npm run heroku-postbuild | Production build with minify and cleanup | ## 📌 Optional Tasks ### 🧹 Clean After extended development, compiled output may become bloated. You can clean and regenerate only the latest files by running: ``` npm run clean ``` This removes the `dist/` directory and runs a fresh build. ### 🚀 Production To prepare a final production version for deployment: 1. Clean the build: ``` npm run clean ``` 1. Run a minified production build: ``` npm run heroku-postbuild ``` This generates a fully packaged and minified `resources` folder suitable for use with the StoreConnect Theme Importer. ### 📝 Minor Changes To 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. 1. **Run the watch script:** ``` npm run watch ``` 2. **Edit the desired files:** 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/`. 3. **Deploy selective updates without full import:** 1. Open Salesforce. 2. Navigate to the **Themes** tab. 3. Open the Theme record you want to update. 4. Navigate to the **Theme Templates** section. 5. Create or update the appropriate template for each modified file. Use these template key formats: - **Scripts:** `resources/dist/scripts/[dir]/[filename].[hash].js` - **CSS:** `resources/dist/css/[dir]/[filename].[hash].css` - **Files:** `resources/dist/files/[dir]/[filename].[hash].[ext]` 6. Create or modify a template with the key: `resources/dist/manifest.json` This maps updated files to their unhashed equivalents and augments the existing manifest without overwriting the full bundle. Example format: ``` { "dist/scripts/bundles.js": "dist/scripts/bundles.KCS3ODL5.js", "dist/css/utils/dropdown.css": "dist/css/utils/dropdown.GRARK238.css", "dist/files/logo.png": "dist/files/logo.IJQZ82PO.png" } ``` #### 📌 Notes on Hashing The `[hash]` in filenames is used for browser caching. When a file changes, its hash will change. To ensure updated files are loaded, make sure: - The new `[hash]` is used in both the file name and the `manifest.json` template. - You're using esbuild in watch mode or running a fresh build after edits. #### 🧩 Usage in the Theme Within your Liquid templates, you should reference the unhashed resource names. The Theme engine will resolve these using `manifest.json`. ``` {% require 'scripts/bundles.js' %} {% require 'css/utils/dropdown.css' %} {% require 'files/logo.png' %} ``` ## ✅ Summary - **Navigate:** `cd theme/resources` - **Install:** `npm install` - **Build:** `npm run build` - **Watch:** `npm run watch` - **Clean:** `npm run clean` - **Prod Build:** `npm run heroku-postbuild` --- ## Follow StoreConnect - [Email Newsletter](https://getstoreconnect.com/c/lp-newsletter) - [LinkedIn Newsletter](https://www.linkedin.com/build-relation/newsletter-follow?entityUrn=7444956928444862464) - [YouTube](https://www.youtube.com/channel/UCngKdP2x8l1wcbAKW3tvU8g) - [LinkedIn](https://www.linkedin.com/company/storeconnect) - [X / Twitter](https://x.com/storeconnecthq) ## Popular Links - [Partners](https://getstoreconnect.com/partners) - [News](https://getstoreconnect.com/articles/news) - [Events](https://getstoreconnect.com/articles/events) - [Feature Comparison](https://getstoreconnect.com/how-we-compare) - [Download a free trial](https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3A00000FMkeKUAT) - [Book a Demo](https://getstoreconnect.com/contact) ## Documentation - [Help documentation](https://support.storeconnect.com/help-documentation) - [AI agents](https://support.storeconnect.com/ai) - [Videos & tutorials](https://support.storeconnect.com/videos-tutorials) - [Developer reference](https://support.storeconnect.com/developer-reference) - [Release notes](https://support.storeconnect.com/release-notes) - [Troubleshooting](https://support.storeconnect.com/troubleshooting) - [Trust Center](https://trust.getstoreconnect.com/) - [Status Page](https://status.storeconnect.com/) ## Contact - info@getstoreconnect.com - US +1 415 745 3230 - AUS +61 2 8365 2308 100 S Ashley Dr, Suite 600-2461 Tampa FL 33602-600 USA Level 22, Sydney Place 180 George Street Sydney, NSW, 2000, AUS --- StoreConnect Support — https://support.storeconnect.com/articles/compiling-liquid-theme-resources