vite-plugin-shopify-theme-settings

This plugin adds features to make it easier to manage the JSON schema files for Shopify Theme Settings.

Features

• Maintain schema for individual Theme Settings sections in separate files instead of one large JSON file
• Automatically populate "theme_info" attributes such as theme name and version with current values from your theme's package.json or manually-specified values

Install

1npm i vite-plugin-shopify-theme-settings -D
2
3# yarn
4yarn add vite-plugin-shopify-theme-settings -D
5
6# pnp
7pnpm add vite-plugin-shopify-theme-settings -D

Usage

Add shopifyThemeSettings plugin to vite.config.js / vite.config.ts:

1// vite.config.js / vite.config.ts
2import { shopifyThemeSettings } from "vite-plugin-shopify-theme-settings";
3
4export default {
5  plugins: [
6    // Default options shown:
7    shopifyThemeSettings({
8      themeRoot: "./",
9      schemaSourceDir: "config/src",
10      values: {}
11    })
12  ]
13};

• Create a src directory under your theme's config folder to hold the source files for settings_schema.json (or specify a different schemaSourceDir in the plugin options).
• Create a JSON file for each section of your theme settings. Sections will be ordered alphabetically, so you can prepend the filenames with a number to determine the correct sequence.
• Make sure that your schema source directory is listed in your theme's .shopifyignore file to avoid errors when pushing code to Shopify.