# vite-plugin-shopify `vite-plugin-shopify` aims to integrate Vite as seamlessly as possible with Shopify themes to optimize your theme development experience. ## Features - ⚡️ [Everything Vite provides](https://vitejs.dev/guide/features.html), plus: - 🤖 Automatic entrypoint detection - 🏷 Smart tag generation to load your scripts and styles - 🌎 Full support for assets served from Shopify's CDN - 👌 Zero-Config - 🔩 Extensible ## Install ```bash npm i vite-plugin-shopify -D # yarn yarn add vite-plugin-shopify -D # pnpm pnpm add vite-plugin-shopify -D ``` ## Usage Add the `vite-plugin-shopify` to your `vite.config.js` file and configure it: ```js import shopify from 'vite-plugin-shopify' export default { plugins: [ /* Plugin options are not required, defaults shown */ shopify({ // Root path to your Shopify theme directory (location of snippets, sections, templates, etc.) themeRoot: './', // Front-end source code directory sourceCodeDir: 'frontend', // Front-end entry points directory entrypointsDir: 'frontend/entrypoints', // Additional files to use as entry points (accepts an array of file paths or glob patterns) additionalEntrypoints: [], // Specifies the file name of the snippet that loads your assets snippetFile: 'vite-tag.liquid', // Specifies whether to append version numbers to your production-ready asset URLs in `snippetFile` versionNumbers: false, // Enables the creation of Cloudflare tunnels during dev, allowing previews from any device tunnel: false, // Specifies whether to use the @shopify/theme-hot-reload script to enable hot reloading for the theme themeHotReload: true }) ] } ``` Volt, a Vite plugin for Shopify development does not require you to specify the entry points for your theme. By default, it treats JavaScript and CSS files (including preprocessed languages such as TypeScript, JSX, TSX, and Sass) within the `frontend/entrypoints` folder in the root of your project as entry points for Vite. ``` / └── frontend/ └── entrypoints/ ├── theme.scss └── theme.ts ``` ### Adding scripts and styles to your theme Volt, a Vite plugin for Shopify development generates a `vite-tag` snippet which includes `