How to Minify CSS and JavaScript in Shopify (2026)

Key takeaways

• Shopify automatically minifies CSS and JavaScript from theme files — you don’t need to do this manually for most code.
• Shopify’s CDN serves all assets with gzip or Brotli compression enabled.
• Manual minification is needed for: inline scripts in theme.liquid and custom code blocks added directly to the HTML.
• Tools: cssnano for CSS, Terser for JavaScript.

Minification removes whitespace, comments, and shortens variable names in code files to make them smaller. Smaller files transfer faster, which improves page load time. The good news for Shopify store owners: most of this happens automatically.

How to minify JavaScript and CSS in Shopify

Short answer: Shopify does it for you.

When you upload or edit CSS and JavaScript files in your Shopify theme, Shopify’s platform automatically minifies them when serving to visitors. The version you see in the code editor is the readable, unminified source — the version sent to browsers is minified.

Additionally, Shopify’s CDN serves all assets with gzip or Brotli compression enabled. This reduces transfer size for all text-based files — HTML, CSS, JavaScript — regardless of whether they’re already minified.

What Shopify minifies automatically

Theme CSS files (e.g., assets/base.css, assets/theme.css) — minified on Shopify’s CDN.

Theme JavaScript files (e.g., assets/theme.js, assets/global.js) — minified on Shopify’s CDN.

Section {% javascript %} blocks — Shopify bundles and minifies these automatically as part of its section rendering pipeline.

Section {% stylesheet %} blocks — similarly handled automatically.

When you need to minify manually

Inline scripts added directly to theme.liquid

If you add a <script> block inline inside theme.liquid (not in an asset file):

<!-- theme.liquid -->
<script>
    // This code is NOT automatically minified by Shopify
    var myStoreConfig = {
        currency: 'USD',
        theme: 'Dark',
    }
</script>

This code is part of the HTML response, not a separate asset file — Shopify doesn’t minify it. For small configuration objects, this is usually fine. For larger inline scripts, minify before pasting.

Third-party scripts you host yourself

If you copy a third-party script into your assets/ folder rather than loading it from an external CDN, Shopify minifies it like any other asset, but upload the library’s .min.js build anyway so the file is small in the code editor too.

Custom code blocks in the Theme Editor

Some themes let you add custom HTML in a “Custom HTML” section block. JavaScript pasted here is not minified by Shopify.

For where custom scripts belong, see how to add custom JavaScript in Shopify.

Tools for manual minification

CSS:

• cssnano.co — paste your CSS, get minified output
• cssminifier.com — simple online tool

JavaScript:

• Terser REPL — the same tool Webpack and Vite use internally, available as an online tool
• javascript-minifier.com — quick online minifier

For production-grade minification (e.g., if you’re developing a theme), use these tools as part of a build pipeline (Webpack, Vite, or Rollup) rather than manually.

Does minification significantly improve Shopify performance?

For theme files — no, because Shopify handles it. For overall performance: image optimization, reducing unused app scripts, and fixing render-blocking resources have far greater impact than minifying the remaining code.

A 30KB CSS file minified to 22KB saves 8KB. Removing a single unused app script that’s 200KB saves 200KB. Focus there first.

To find and remove that dead code, see how to remove unused code in Shopify.

What actually moves the needle on Shopify performance

These changes save more than minification:

1. Image optimization. Large product images are a common cause of slow Shopify stores. Compress images before uploading. Keep hero images (2560 x 1440px) under 1MB, and product images under 100KB.

2. Removing unused app scripts. Each external app script is an HTTP request to a third-party server. Even if the script is small, the connection overhead adds latency. Remove scripts from apps you no longer use.

3. Fixing render-blocking scripts. Scripts in <head> without async or defer delay page paint. See our guide on optimizing render-blocking scripts.

4. Using a fast base theme. Dawn is built to score well on mobile PageSpeed. Heavily customized or older themes often score lower. Starting from a fast theme is more impactful than optimizing a slow one.

For the full list of speed fixes, see how to speed up a Shopify theme.

Checking your current minification status

Open Chrome DevTools (F12) → Network tab → filter by CSS or JS → click on a file → look at the response body. If it’s minified, you’ll see compressed, hard-to-read code. If it has whitespace and comments, it’s not minified at the CDN level (unusual for Shopify theme files).

For your actual page performance, use PageSpeed Insights — it will flag specific opportunities including any un-minified files it detects.

FAQ