@display-studio/vite-plugin-shopify-theme

A zero-runtime-dependency Vite 8 plugin and setup CLI for explicit Shopify theme entries.

Requirements

• Node.js ^20.19.0 || >=22.12.0 (on Node.js 20.19.0, upgrade npm first; see Support and Compatibility)
• Shopify CLI installed as shopify
• Vite ^8.0.0 (installed by init)

New theme

1. Create and configure the latest official Shopify Skeleton:

   npx @display-studio/vite-plugin-shopify-theme init my-theme

2. Enter the project and start Shopify and Vite together:

   cd my-theme
   npm run dev

Existing theme

1. From a theme containing assets, layout, and snippets, run:

   npx @display-studio/vite-plugin-shopify-theme init

2. Start local development with npm run dev. Use npm run dev:editor to see live updates in the Theme Editor without a tunnel.

The wizard defaults to TypeScript, the detected package manager (npm otherwise), and Tailwind CSS. Pass --yes for those defaults or --no-tailwind to opt out.

Minimal configuration

import { defineConfig } from 'vite';
import shopify from '@display-studio/vite-plugin-shopify-theme';

export default defineConfig({
  plugins: [shopify({
    entries: {
      'theme.css': 'frontend/entrypoints/theme.css',
      'theme.ts': 'frontend/entrypoints/theme.ts',
    },
  })],
});

An entry can also be an object ({ source, attributes, inline }) to add validated tag attributes or inline a small critical stylesheet; see the configuration guide.

Every entry remains explicit. Generated output is deterministic, stale cleanup is restricted to recorded plugin-owned assets, and manual theme files are preserved.

Read why this plugin exists and the complete documentation for CLI flags, development modes, configuration, frameworks, advanced workflows, API, and troubleshooting.