File transformation best practices for Shopify themes

File transformations improve the developer experience by letting you write and maintain code using your preferred strategies and build tools, and ship compiled code that is optimized for browser runtime.

For example, you might want to divide your stylesheets into multiple files, each scoped to a particular UI element, which makes them easier to maintain. However, loading a large number of small stylesheets is slower than loading one or two larger stylesheets. You can use file transformations to automate the process of combining these smaller, scoped stylesheets into fewer, larger bundles.

You can transform files as part of a build process, and then upload your compiled code as a theme that can be accessed in the Shopify admin.

Below are some examples of file transformations that theme developers might want to perform:

File transformation Benefit
Custom file structure > Shopify theme file structure Code maintenance flexibility
SCSS > CSS Write in SCSS, output Shopify-compatible CSS
SVG > snippet Include SVGs inline in HTML
PostCSS transformations (e.g. Autoprefixer, cssnano, tailwindcss) Linting, variables, transpiling, browser compatibility
Section folders > section files Build sections in separate Liquid, JS, CSS, and JSON files
Automated calculation and inlining of critical styles Avoid load-blocking CSS resources
Optimized JavaScript bundles Reduced load times, smaller file sizes
JavaScript, CSS, and HTML minification Reduced load times, smaller file sizes

If you want to perform transformations on your files, then you need to decide how you want to manage both the source code and the transformed, or compiled, code. To learn about the options, and which options can be used with Shopify tools, refer to Version control best practices for Shopify themes.

You can also consider using just-in-time (JIT) file transformations to reduce the need to track changes to compiled code. JIT transformations can deliver optimized dependencies and resources at runtime, allowing for a unified code base that doesn't need to be backfilled.