vite-plugin-shopify-theme is for teams that keep a standard Shopify theme structure but want Vite to manage frontend source code and development feedback. It provides both a Vite plugin and a Theme Run CLI so development, production builds, pushes, and packages share the same Theme Target resolution and delivery checks.

What it solves

When Vite and Shopify CLI are wired together ad hoc, development origins, production assets, Liquid references, Git state, and pre-push checks can drift into separate conventions. This product gives those boundaries one workflow: Vite continues to own frontend modules and builds, Shopify CLI continues to own stores, remote themes, authentication, and native options, and the plugin connects their theme assets.

Who it is for

Teams using a standard Shopify theme rather than a headless storefront;
Projects that need Vite HMR, modular source code, and production builds;
Workflows that should run the same production checks before builds, pushes, and packages;
Teams prepared to manage the generated Mixer Snippet and production assets through an explicit Git workflow.

If a project only uses Shopify-native theme assets and has no separate frontend entry, another build layer may not help. Before adopting the plugin, confirm that the team wants to own a Vite configuration and that the target environment has Node.js 22.14 or newer, Vite 8, and an executable Shopify CLI.

Responsibility boundaries

The plugin does not replace Shopify CLI for store selection, authentication, remote Theme IDs, or environments. It also does not choose a CSS or JavaScript framework. The host project owns its source entry, aliases, and server transport; the plugin owns the Theme Target, asset output, Mixer Snippet, reload behavior, and production checks.

Start with the documentation. General Shopify theme structure and delivery principles are covered in the Chinese knowledge base, in theme architecture and the theme delivery framework, and are not duplicated in these product docs.

License

Use of vite-plugin-shopify-theme is governed by the license in its source repository.

Product documentation

vite-plugin-shopify-theme documentation

Start with the smallest integration, then understand configuration boundaries, Theme Run, the Mixer lifecycle, and delivery checks.

Install and start development

Install the plugin in the host project, declare a frontend entry, and start Vite with Shopify theme development through Theme Run.

Configuration ownership

Separate host Vite settings, plugin responsibilities, and Shopify CLI options so each fact has one owner, with every plugin option and its default.

Theme Run CLI workflows

Choose a command for development, builds, pushes, packages, diagnostics, or restoration, and understand its delivery boundary.

Mixer Snippet and Git

Understand development and production Mixer forms, the Git-index prerequisite, and restoration after an interrupted run.

Phone and LAN debugging

Make Shopify preview and Vite assets reachable from a device while respecting the boundary between LAN HTTP and remote HTTPS.

Code splitting and theme assets

Decide when to split initial or asynchronous code and verify naming, references, and cleanup in Shopify's flat asset directory.

Troubleshooting

Isolate failures across Theme Target resolution, the dev branch check, target locks, the Mixer, Git state, production checks, and network access.

vite-plugin-shopify-theme

What it solves

Who it is for

Responsibility boundaries

License

Get the product

Product documentation

Inspect the implementation. Use the docs for the task.