{"_id":"@ashraf8928/section-schema-generator","_rev":"3-b9f1c6933af52eb057efe1370e6da110","name":"@ashraf8928/section-schema-generator","dist-tags":{"latest":"2.2.1"},"versions":{"2.1.0":{"name":"@ashraf8928/section-schema-generator","version":"2.1.0","keywords":["shopify","hydrogen","react","vite","cli","schema","json","generator","sections","codegen","liquid","section-schema","esm","commonjs"],"author":{"name":"Ashraf Islam Shaikh"},"license":"MIT","_id":"@ashraf8928/section-schema-generator@2.1.0","maintainers":[{"name":"ashraf8928","email":"ashrafshaikh.binary@gmail.com"}],"bin":{"section-schema":"bin/section-schema.js"},"dist":{"shasum":"640c103b1f8be40054d9938845d8aca179c7889a","tarball":"https://registry.npmjs.org/@ashraf8928/section-schema-generator/-/section-schema-generator-2.1.0.tgz","fileCount":12,"integrity":"sha512-bG6/nQC0xkNm7R3/ll4ydIdlTPVCGZqRYwslc09klNH7PhMgepum6q7CnnKvE77gIPLP/DjXwVySDKngjdbJOw==","signatures":[{"sig":"MEUCIQDfeXbrwq0kP9SgoREHartFKR/uhu2H1Vtg4qam8u0DgwIgHqtgKbL0+qhWBfBelFN+QgVNJkdonfgWP4FIlzFnbJc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":54671},"main":"lib/generateSchema.js","engines":{"node":">=14.0.0"},"scripts":{"test":"node test/run.js","postinstall":"node bin/postinstall.js"},"_npmUser":{"name":"ashraf8928","email":"ashrafshaikh.binary@gmail.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.6.1","description":"CLI tool for React + Vite / Shopify Hydrogen projects. Write Shopify section schemas in JS/TS using export default and generate a consolidated settingSchema.json. Works with both CommonJS and ESM projects.","directories":{},"_nodeVersion":"24.11.0","_hasShrinkwrap":false,"peerDependenciesMeta":{"jiti":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/section-schema-generator_2.1.0_1781805808268_0.1599434294446016","host":"s3://npm-registry-packages-npm-production"}},"2.1.1":{"name":"@ashraf8928/section-schema-generator","version":"2.1.1","keywords":["shopify","hydrogen","react","vite","cli","schema","json","generator","sections","codegen","liquid","section-schema","esm","commonjs"],"author":{"name":"Ashraf Islam Shaikh"},"license":"MIT","_id":"@ashraf8928/section-schema-generator@2.1.1","maintainers":[{"name":"ashraf8928","email":"ashrafshaikh.binary@gmail.com"}],"bin":{"section-schema":"bin/section-schema.js"},"dist":{"shasum":"dcaca3b640941261ad1574c88b813db7516bbd48","tarball":"https://registry.npmjs.org/@ashraf8928/section-schema-generator/-/section-schema-generator-2.1.1.tgz","fileCount":12,"integrity":"sha512-aNRPEepiMLnzVThkVIArO4kDREU/DdKBqaKHn+t8Jsq6IpfqiB8LBuGFZTSIBCO9ERLV2KlxKYfqGrIfxpBeAg==","signatures":[{"sig":"MEYCIQDNgygxNHFMtq1aYPnGnq/ZTxTDChUi9NtPt8FKNJYAHAIhANyRTvDJ+cTo8LQgpj/3lDJWnkeTVrqaXKm0a/0nNifj","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":48927},"main":"lib/generateSchema.js","engines":{"node":">=14.0.0"},"scripts":{"test":"node test/run.js","postinstall":"node bin/postinstall.js"},"_npmUser":{"name":"ashraf8928","email":"ashrafshaikh.binary@gmail.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.6.1","description":"CLI tool for React + Vite / Shopify Hydrogen projects. Write Shopify section schemas in JS/TS using export default and generate a consolidated settingSchema.json. Works with both CommonJS and ESM projects.","directories":{},"_nodeVersion":"24.11.0","_hasShrinkwrap":false,"peerDependenciesMeta":{"jiti":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/section-schema-generator_2.1.1_1781806301419_0.03337363593033782","host":"s3://npm-registry-packages-npm-production"}},"2.2.1":{"name":"@ashraf8928/section-schema-generator","version":"2.2.1","description":"CLI tool for React + Vite / Shopify Hydrogen projects. Write Shopify section schemas in JS/TS using export default and generate a consolidated settingSchema.json. Works with both CommonJS and ESM projects.","main":"lib/generateSchema.js","bin":{"section-schema":"bin/section-schema.js"},"scripts":{"test":"node test/run.js","postinstall":"node bin/postinstall.js"},"keywords":["shopify","hydrogen","react","vite","cli","schema","json","generator","sections","codegen","liquid","section-schema","esm","commonjs"],"author":{"name":"Ashraf Islam Shaikh"},"license":"MIT","engines":{"node":">=14.0.0"},"repository":{"type":"git","url":""},"peerDependenciesMeta":{"jiti":{"optional":true}},"_id":"@ashraf8928/section-schema-generator@2.2.1","_nodeVersion":"24.11.0","_npmVersion":"11.6.1","dist":{"integrity":"sha512-KhLmyPNWg34PL/l7cGPlKlvaOCmIdMqA688OsMg4SaBo4i9B25vRC6rPjcTcFe4IKyH9gQao7M7oMJmChfNSXg==","shasum":"3841d38872bef595604fe4f5cff5ae00fd08c3b2","tarball":"https://registry.npmjs.org/@ashraf8928/section-schema-generator/-/section-schema-generator-2.2.1.tgz","fileCount":12,"unpackedSize":49055,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCd36Rd+qnAIWAN3bN9S3rbc8iz798FaBcO64HegrdPpgIhAJ4aFDZKczXu/Gn7d8f1gYuZcV9HiW12swwSI68LDkd1"}]},"_npmUser":{"name":"ashraf8928","email":"ashrafshaikh.binary@gmail.com"},"directories":{},"maintainers":[{"name":"ashraf8928","email":"ashrafshaikh.binary@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/section-schema-generator_2.2.1_1781807076245_0.6969689001078916"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-18T18:03:28.027Z","modified":"2026-06-18T18:24:36.543Z","2.1.0":"2026-06-18T18:03:28.396Z","2.1.1":"2026-06-18T18:11:41.567Z","2.2.1":"2026-06-18T18:24:36.428Z"},"author":{"name":"Ashraf Islam Shaikh"},"license":"MIT","keywords":["shopify","hydrogen","react","vite","cli","schema","json","generator","sections","codegen","liquid","section-schema","esm","commonjs"],"repository":{"type":"git","url":""},"description":"CLI tool for React + Vite / Shopify Hydrogen projects. Write Shopify section schemas in JS/TS using export default and generate a consolidated settingSchema.json. Works with both CommonJS and ESM projects.","maintainers":[{"name":"ashraf8928","email":"ashrafshaikh.binary@gmail.com"}],"readme":"# @ashraf8928/section-schema-generator\r\n\r\nA CLI tool for **React + Vite** and **Shopify Hydrogen** projects.\r\n\r\nWrite your Shopify section schemas in **JavaScript or TypeScript** using `export default` — with full IntelliSense and type safety in your editor — and let this tool scan, validate, and generate a consolidated `settingSchema.json` that follows Shopify's native section schema format exactly.\r\n\r\nWorks with **both CommonJS and ESM** projects. No config needed.\r\n\r\n---\r\n\r\n## Table of Contents\r\n\r\n- [Why use this?](#why-use-this)\r\n- [Install](#install)\r\n- [Quick Start](#quick-start)\r\n- [Folder Structure](#folder-structure)\r\n- [Writing a Schema](#writing-a-schema)\r\n  - [Basic Example](#basic-example)\r\n  - [With Blocks](#with-blocks)\r\n  - [With Section Groups](#with-section-groups-enabled_on--disabled_on)\r\n  - [With Locales](#with-locales)\r\n  - [With Product / Collection Pickers](#with-product--collection-pickers)\r\n  - [CommonJS Style](#commonjs-style-moduleexports)\r\n- [All Setting Types](#all-supported-setting-types)\r\n- [All Top-Level Keys](#all-top-level-schema-keys)\r\n- [Run Commands](#run-commands)\r\n- [CLI Options](#cli-options)\r\n- [Generated Output](#generated-output)\r\n- [TypeScript Support](#typescript-support)\r\n- [Validation](#validation)\r\n- [Backward Compatibility](#backward-compatibility)\r\n- [Architecture](#architecture)\r\n- [License](#license)\r\n\r\n---\r\n\r\n## Why use this?\r\n\r\nIn a standard Shopify Liquid theme, section schemas live inside `{% schema %}` tags — raw JSON buried inside `.liquid` files. You get no autocomplete, no validation, no reuse.\r\n\r\nThis tool lets you write schemas as plain JavaScript objects:\r\n\r\n```js\r\n// src/sections/hero/schema.js\r\nexport default {\r\n  name: \"Hero\",\r\n  settings: [\r\n    { type: \"text\", id: \"heading\", label: \"Heading\", default: \"Welcome\" }\r\n  ]\r\n}\r\n```\r\n\r\nRun one command → get a clean, validated `settingSchema.json` that your Hydrogen storefront can consume.\r\n\r\n---\r\n\r\n## Install\r\n\r\n```bash\r\nnpm install --save-dev @ashraf8928/section-schema-generator\r\n```\r\n\r\n**That's it.** After install, the package automatically adds a `generate-schema` script to your `package.json`:\r\n\r\n```json\r\n{\r\n  \"scripts\": {\r\n    \"generate-schema\": \"node ./node_modules/@ashraf8928/section-schema-generator/bin/section-schema.js\"\r\n  }\r\n}\r\n```\r\n\r\nYou will see this confirmation in your terminal:\r\n\r\n```\r\n✔ [@ashraf8928/section-schema-generator] Added \"generate-schema\" script to your package.json.\r\nℹ [@ashraf8928/section-schema-generator] Run it anytime with: npm run generate-schema\r\n```\r\n\r\nIf the script already exists, it is never overwritten.\r\n\r\n---\r\n\r\n## Quick Start\r\n\r\n**Step 1 — Install the package**\r\n\r\n```bash\r\nnpm install --save-dev @ashraf8928/section-schema-generator\r\n```\r\n\r\n**Step 2 — Create a section folder with a schema file**\r\n\r\n```\r\nsrc/\r\n  sections/\r\n    hero/\r\n      index.jsx\r\n      schema.js    ← create this\r\n```\r\n\r\n**Step 3 — Write your schema**\r\n\r\n```js\r\n// src/sections/hero/schema.js\r\nexport default {\r\n  name: \"Hero\",\r\n  tag: \"section\",\r\n  settings: [\r\n    {\r\n      type: \"text\",\r\n      id: \"heading\",\r\n      label: \"Heading\",\r\n      default: \"Welcome to our store\"\r\n    },\r\n    {\r\n      type: \"image_picker\",\r\n      id: \"background_image\",\r\n      label: \"Background image\"\r\n    }\r\n  ],\r\n  presets: [{ name: \"Hero\" }]\r\n}\r\n```\r\n\r\n**Step 4 — Generate the JSON**\r\n\r\n```bash\r\nnpm run generate-schema\r\n```\r\n\r\n**Step 5 — Done!** Your `src/settingSchema.json` is generated:\r\n\r\n```json\r\n[\r\n  {\r\n    \"name\": \"Hero\",\r\n    \"tag\": \"section\",\r\n    \"settings\": [\r\n      {\r\n        \"type\": \"text\",\r\n        \"id\": \"heading\",\r\n        \"label\": \"Heading\",\r\n        \"default\": \"Welcome to our store\"\r\n      },\r\n      {\r\n        \"type\": \"image_picker\",\r\n        \"id\": \"background_image\",\r\n        \"label\": \"Background image\"\r\n      }\r\n    ],\r\n    \"presets\": [{ \"name\": \"Hero\" }]\r\n  }\r\n]\r\n```\r\n\r\n---\r\n\r\n## Folder Structure\r\n\r\n### Flat layout — `--depth=1` (default)\r\n\r\nEach section is a direct subfolder of `src/sections`. This is the recommended layout for Shopify Hydrogen projects.\r\n\r\n```\r\nsrc/\r\n  sections/\r\n    hero/\r\n      index.jsx\r\n      schema.js        ← CLI reads this\r\n    slideshow/\r\n      index.jsx\r\n      schema.js        ← CLI reads this\r\n    footer/\r\n      index.jsx\r\n      schema.js        ← CLI reads this\r\n```\r\n\r\nRun:\r\n\r\n```bash\r\nnpm run generate-schema\r\n# or\r\nnpx section-schema\r\n```\r\n\r\n---\r\n\r\n### Nested layout — `--depth=2`\r\n\r\nSections grouped under page folders.\r\n\r\n```\r\nsrc/\r\n  sections/\r\n    home/\r\n      banner/\r\n        schema.js      ← CLI reads this\r\n      carousel/\r\n        schema.js      ← CLI reads this\r\n    product/\r\n      collection-grid/\r\n        schema.js      ← CLI reads this\r\n```\r\n\r\nRun:\r\n\r\n```bash\r\nnpx section-schema --depth=2\r\n# or add it to your package.json script:\r\n# \"generate-schema\": \"section-schema --depth=2\"\r\n```\r\n\r\n---\r\n\r\nIn both layouts the **output is always a flat JSON array** — folder structure is only used to find schema files.\r\n\r\n---\r\n\r\n## Writing a Schema\r\n\r\n### Basic Example\r\n\r\n```js\r\n// src/sections/hero/schema.js\r\n\r\nexport default {\r\n  name: \"Hero\",\r\n  tag: \"section\",\r\n  class: \"hero-section\",\r\n  settings: [\r\n    {\r\n      type: \"text\",\r\n      id: \"heading\",\r\n      label: \"Heading\",\r\n      default: \"Welcome to our store\"\r\n    },\r\n    {\r\n      type: \"textarea\",\r\n      id: \"subtext\",\r\n      label: \"Subtext\"\r\n    },\r\n    {\r\n      type: \"image_picker\",\r\n      id: \"background_image\",\r\n      label: \"Background image\"\r\n    },\r\n    {\r\n      type: \"color\",\r\n      id: \"overlay_color\",\r\n      label: \"Overlay color\",\r\n      default: \"#000000\"\r\n    },\r\n    {\r\n      type: \"range\",\r\n      id: \"overlay_opacity\",\r\n      label: \"Overlay opacity\",\r\n      min: 0,\r\n      max: 100,\r\n      step: 5,\r\n      unit: \"%\",\r\n      default: 30\r\n    },\r\n    {\r\n      type: \"url\",\r\n      id: \"button_link\",\r\n      label: \"Button link\"\r\n    },\r\n    {\r\n      type: \"text\",\r\n      id: \"button_label\",\r\n      label: \"Button label\",\r\n      default: \"Shop now\"\r\n    }\r\n  ],\r\n  presets: [\r\n    { name: \"Hero\" }\r\n  ]\r\n}\r\n```\r\n\r\n---\r\n\r\n### With Blocks\r\n\r\n```js\r\n// src/sections/slideshow/schema.js\r\n\r\nexport default {\r\n  name: \"Slideshow\",\r\n  tag: \"section\",\r\n  class: \"slideshow\",\r\n  limit: 1,\r\n  settings: [\r\n    {\r\n      type: \"header\",\r\n      content: \"Slideshow settings\"\r\n    },\r\n    {\r\n      type: \"checkbox\",\r\n      id: \"autoplay\",\r\n      label: \"Auto-rotate slides\",\r\n      default: true\r\n    },\r\n    {\r\n      type: \"range\",\r\n      id: \"autoplay_speed\",\r\n      label: \"Change slides every\",\r\n      min: 3,\r\n      max: 9,\r\n      step: 2,\r\n      unit: \"s\",\r\n      default: 5\r\n    },\r\n    {\r\n      type: \"select\",\r\n      id: \"slide_size\",\r\n      label: \"Slide size\",\r\n      options: [\r\n        { value: \"small\",  label: \"Small\"  },\r\n        { value: \"medium\", label: \"Medium\" },\r\n        { value: \"large\",  label: \"Large\"  }\r\n      ],\r\n      default: \"medium\"\r\n    }\r\n  ],\r\n  blocks: [\r\n    {\r\n      type: \"slide\",\r\n      name: \"Slide\",\r\n      limit: 6,\r\n      settings: [\r\n        {\r\n          type: \"image_picker\",\r\n          id: \"image\",\r\n          label: \"Image\"\r\n        },\r\n        {\r\n          type: \"text\",\r\n          id: \"heading\",\r\n          label: \"Heading\",\r\n          default: \"Slide heading\"\r\n        },\r\n        {\r\n          type: \"select\",\r\n          id: \"heading_size\",\r\n          label: \"Heading size\",\r\n          options: [\r\n            { value: \"h2\", label: \"Small\"  },\r\n            { value: \"h1\", label: \"Medium\" },\r\n            { value: \"h0\", label: \"Large\"  }\r\n          ],\r\n          default: \"h1\"\r\n        },\r\n        {\r\n          type: \"richtext\",\r\n          id: \"subheading\",\r\n          label: \"Subheading\"\r\n        },\r\n        {\r\n          type: \"text\",\r\n          id: \"button_label\",\r\n          label: \"Button label\"\r\n        },\r\n        {\r\n          type: \"url\",\r\n          id: \"button_link\",\r\n          label: \"Button link\"\r\n        },\r\n        {\r\n          type: \"select\",\r\n          id: \"button_style\",\r\n          label: \"Button style\",\r\n          options: [\r\n            { value: \"primary\",   label: \"Primary\"   },\r\n            { value: \"secondary\", label: \"Secondary\" },\r\n            { value: \"outline\",   label: \"Outline\"   }\r\n          ],\r\n          default: \"primary\"\r\n        }\r\n      ]\r\n    }\r\n  ],\r\n  max_blocks: 6,\r\n  presets: [\r\n    {\r\n      name: \"Slideshow\",\r\n      blocks: [\r\n        { type: \"slide\" },\r\n        { type: \"slide\" }\r\n      ]\r\n    }\r\n  ]\r\n}\r\n```\r\n\r\n---\r\n\r\n### With Section Groups (`enabled_on` / `disabled_on`)\r\n\r\n```js\r\n// src/sections/announcement-bar/schema.js\r\n\r\nexport default {\r\n  name: \"Announcement bar\",\r\n  tag: \"section\",\r\n  class: \"announcement-bar\",\r\n  settings: [\r\n    {\r\n      type: \"text\",\r\n      id: \"text\",\r\n      label: \"Announcement\",\r\n      default: \"Free shipping on orders over $50\"\r\n    },\r\n    {\r\n      type: \"url\",\r\n      id: \"link\",\r\n      label: \"Link\"\r\n    },\r\n    {\r\n      type: \"color\",\r\n      id: \"bg_color\",\r\n      label: \"Background color\",\r\n      default: \"#000000\"\r\n    },\r\n    {\r\n      type: \"color\",\r\n      id: \"text_color\",\r\n      label: \"Text color\",\r\n      default: \"#ffffff\"\r\n    },\r\n    {\r\n      type: \"checkbox\",\r\n      id: \"show_close\",\r\n      label: \"Show close button\",\r\n      default: true\r\n    }\r\n  ],\r\n  enabled_on: {\r\n    templates: [\"*\"],\r\n    groups:    [\"header\"]\r\n  }\r\n}\r\n```\r\n\r\n---\r\n\r\n### With Locales\r\n\r\n```js\r\n// src/sections/hero/schema.js\r\n\r\nexport default {\r\n  name: \"t:sections.hero.name\",\r\n  tag: \"section\",\r\n  settings: [\r\n    {\r\n      type: \"text\",\r\n      id: \"heading\",\r\n      label: \"t:sections.hero.settings.heading.label\",\r\n      default: \"t:sections.hero.settings.heading.default\"\r\n    },\r\n    {\r\n      type: \"richtext\",\r\n      id: \"body\",\r\n      label: \"t:sections.hero.settings.body.label\"\r\n    }\r\n  ],\r\n  presets: [\r\n    { name: \"t:sections.hero.presets.hero.name\" }\r\n  ],\r\n  locales: {\r\n    en: {\r\n      sections: {\r\n        hero: {\r\n          name: \"Hero\",\r\n          presets: { hero: { name: \"Hero\" } },\r\n          settings: {\r\n            heading: { label: \"Heading\",     default: \"Welcome\" },\r\n            body:    { label: \"Description\"                     }\r\n          }\r\n        }\r\n      }\r\n    },\r\n    fr: {\r\n      sections: {\r\n        hero: {\r\n          name: \"Héros\",\r\n          presets: { hero: { name: \"Héros\" } },\r\n          settings: {\r\n            heading: { label: \"Titre\",       default: \"Bienvenue\" },\r\n            body:    { label: \"Description\"                        }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n---\r\n\r\n### With Product / Collection Pickers\r\n\r\n```js\r\n// src/sections/featured-collection/schema.js\r\n\r\nexport default {\r\n  name: \"Featured collection\",\r\n  tag: \"section\",\r\n  settings: [\r\n    {\r\n      type: \"text\",\r\n      id: \"title\",\r\n      label: \"Heading\",\r\n      default: \"Featured collection\"\r\n    },\r\n    {\r\n      type: \"collection\",\r\n      id: \"collection\",\r\n      label: \"Collection\"\r\n    },\r\n    {\r\n      type: \"range\",\r\n      id: \"products_to_show\",\r\n      label: \"Maximum products to show\",\r\n      min: 2,\r\n      max: 25,\r\n      step: 1,\r\n      default: 4\r\n    },\r\n    {\r\n      type: \"checkbox\",\r\n      id: \"show_view_all\",\r\n      label: \"Show \\\"View all\\\" button\",\r\n      default: true\r\n    },\r\n    {\r\n      type: \"header\",\r\n      content: \"Product card\"\r\n    },\r\n    {\r\n      type: \"checkbox\",\r\n      id: \"show_secondary_image\",\r\n      label: \"Show second image on hover\",\r\n      default: false\r\n    },\r\n    {\r\n      type: \"checkbox\",\r\n      id: \"show_vendor\",\r\n      label: \"Show vendor\",\r\n      default: false\r\n    },\r\n    {\r\n      type: \"select\",\r\n      id: \"image_ratio\",\r\n      label: \"Image ratio\",\r\n      options: [\r\n        { value: \"adapt\",    label: \"Adapt to image\" },\r\n        { value: \"portrait\", label: \"Portrait\"       },\r\n        { value: \"square\",   label: \"Square\"         }\r\n      ],\r\n      default: \"adapt\"\r\n    }\r\n  ],\r\n  presets: [\r\n    { name: \"Featured collection\" }\r\n  ]\r\n}\r\n```\r\n\r\n---\r\n\r\n### CommonJS Style (`module.exports`)\r\n\r\nIf your project uses CommonJS (no `\"type\": \"module\"` in `package.json`), use `module.exports` instead:\r\n\r\n```js\r\n// src/sections/hero/schema.js\r\n\r\nmodule.exports = {\r\n  name: \"Hero\",\r\n  tag: \"section\",\r\n  settings: [\r\n    {\r\n      type: \"text\",\r\n      id: \"heading\",\r\n      label: \"Heading\",\r\n      default: \"Welcome\"\r\n    }\r\n  ],\r\n  presets: [{ name: \"Hero\" }]\r\n}\r\n```\r\n\r\nBoth styles work. You can even mix them — one section can use `export default` and another can use `module.exports` in the same project.\r\n\r\n---\r\n\r\n## All Supported Setting Types\r\n\r\n| Type | Description |\r\n|------|-------------|\r\n| `text` | Single-line text input |\r\n| `textarea` | Multi-line text input |\r\n| `richtext` | Rich text editor (supports block-level HTML) |\r\n| `inline_richtext` | Inline rich text (no block elements like `<p>`) |\r\n| `image_picker` | Image selector from the Shopify media library |\r\n| `video` | Shopify-hosted video selector |\r\n| `video_url` | YouTube or Vimeo URL input |\r\n| `url` | URL picker — internal pages or external links |\r\n| `checkbox` | Boolean toggle (`true` / `false`) |\r\n| `radio` | Radio button group (requires `options` array) |\r\n| `select` | Dropdown select (requires `options` array) |\r\n| `range` | Numeric slider (requires `min`, `max`, `step`) |\r\n| `number` | Freeform numeric input |\r\n| `color` | Color picker (hex value) |\r\n| `color_background` | Solid color or gradient picker |\r\n| `color_scheme` | Color scheme selector |\r\n| `color_scheme_group` | Color scheme group selector |\r\n| `font_picker` | Font selector from Shopify's font library |\r\n| `html` | Raw HTML textarea |\r\n| `liquid` | Liquid code textarea |\r\n| `article` | Article resource picker |\r\n| `blog` | Blog resource picker |\r\n| `collection` | Single collection picker |\r\n| `collection_list` | List of collections picker |\r\n| `page` | Page resource picker |\r\n| `product` | Single product picker |\r\n| `product_list` | List of products picker |\r\n| `link_list` | Navigation menu picker |\r\n| `metaobject` | Single metaobject entry picker |\r\n| `metaobject_list` | List of metaobject entries picker |\r\n| `header` | Informational header divider (no `id` required) |\r\n| `paragraph` | Informational paragraph text (no `id` required) |\r\n\r\n---\r\n\r\n## All Top-Level Schema Keys\r\n\r\n| Key | Type | Required | Description |\r\n|-----|------|----------|-------------|\r\n| `name` | `string` | ✅ Yes | Section name shown in the Shopify theme editor |\r\n| `tag` | `string` | No | HTML element for the section wrapper (`\"section\"`, `\"div\"`, `\"aside\"`, `\"article\"`, `\"footer\"`, `\"header\"`) |\r\n| `class` | `string` | No | CSS class added to the section wrapper element |\r\n| `limit` | `number` | No | Max number of times this section can be added per template |\r\n| `settings` | `array` | No | Array of setting objects (see setting types above) |\r\n| `blocks` | `array` | No | Array of block type definitions (each block can have its own `settings`) |\r\n| `max_blocks` | `number` | No | Maximum total block instances allowed |\r\n| `presets` | `array` | No | Default configurations shown in the \"Add section\" panel |\r\n| `locales` | `object` | No | Inline translation strings (keyed by locale code) |\r\n| `enabled_on` | `object` | No | Restricts which templates or section groups can use this section |\r\n| `disabled_on` | `object` | No | Prevents this section on specific templates or groups |\r\n\r\n---\r\n\r\n## Run Commands\r\n\r\n### Generate the schema (normal)\r\n\r\n```bash\r\nnpm run generate-schema\r\n```\r\n\r\n### Generate with npx (no script needed)\r\n\r\n```bash\r\nnpx section-schema\r\n```\r\n\r\n### Custom source folder\r\n\r\n```bash\r\nnpx section-schema --src app/sections\r\n```\r\n\r\n### Custom output file\r\n\r\n```bash\r\nnpx section-schema --out app/schema.json\r\n```\r\n\r\n### Custom source and output\r\n\r\n```bash\r\nnpx section-schema --src app/sections --out app/schema.json\r\n```\r\n\r\n### Nested page/section layout (depth 2)\r\n\r\n```bash\r\nnpx section-schema --depth=2\r\n```\r\n\r\n### Everything custom\r\n\r\n```bash\r\nnpx section-schema --src=app/sections --out=dist/schema.json --depth=2\r\n```\r\n\r\n### Add to package.json scripts manually\r\n\r\n```json\r\n{\r\n  \"scripts\": {\r\n    \"generate-schema\":      \"section-schema\",\r\n    \"generate-schema:watch\": \"section-schema --src src/sections --out src/settingSchema.json\"\r\n  }\r\n}\r\n```\r\n\r\nThen run:\r\n\r\n```bash\r\nnpm run generate-schema\r\n```\r\n\r\n### Show help\r\n\r\n```bash\r\nnpx section-schema --help\r\n```\r\n\r\nOutput:\r\n\r\n```\r\nsection-schema\r\n\r\nScans your project's section folders for schema.js / schema.ts / schema.json\r\nfiles and generates a consolidated settingSchema.json array that follows\r\nShopify's native section schema format.\r\n\r\nUsage:\r\n  section-schema [options]\r\n\r\nOptions:\r\n  --src <path>     Path to the sections root directory (default: src/sections)\r\n  --out <path>     Path to write the generated JSON file (default: src/settingSchema.json)\r\n  --depth <1|2>    Folder scan depth:\r\n                     1 = flat:   src/sections/<section>/schema.js  (default)\r\n                     2 = nested: src/sections/<page>/<section>/schema.js\r\n  -h, --help       Show this help message\r\n```\r\n\r\n---\r\n\r\n## CLI Options\r\n\r\n| Flag | Default | Description |\r\n|------|---------|-------------|\r\n| `--src <path>` | `src/sections` | Path to the sections root directory |\r\n| `--out <path>` | `src/settingSchema.json` | Path to write the generated JSON file |\r\n| `--depth <1\\|2>` | `1` | `1` = flat layout, `2` = page/section nested layout |\r\n| `-h, --help` | — | Show usage help |\r\n\r\nAll paths resolve relative to wherever you run the command from (`process.cwd()`).\r\n\r\n---\r\n\r\n## Generated Output\r\n\r\nEvery `schema.js` file becomes one entry in the output array. The output file is always overwritten on each run so it stays in sync with your source files.\r\n\r\n**Example — two sections:**\r\n\r\n```\r\nsrc/sections/\r\n  hero/schema.js\r\n  slideshow/schema.js\r\n```\r\n\r\n**Generates `src/settingSchema.json`:**\r\n\r\n```json\r\n[\r\n  {\r\n    \"name\": \"Hero\",\r\n    \"tag\": \"section\",\r\n    \"settings\": [\r\n      {\r\n        \"type\": \"text\",\r\n        \"id\": \"heading\",\r\n        \"label\": \"Heading\",\r\n        \"default\": \"Welcome to our store\"\r\n      },\r\n      {\r\n        \"type\": \"image_picker\",\r\n        \"id\": \"background_image\",\r\n        \"label\": \"Background image\"\r\n      }\r\n    ],\r\n    \"presets\": [\r\n      { \"name\": \"Hero\" }\r\n    ]\r\n  },\r\n  {\r\n    \"name\": \"Slideshow\",\r\n    \"tag\": \"section\",\r\n    \"class\": \"slideshow\",\r\n    \"limit\": 1,\r\n    \"settings\": [\r\n      {\r\n        \"type\": \"checkbox\",\r\n        \"id\": \"autoplay\",\r\n        \"label\": \"Auto-rotate slides\",\r\n        \"default\": true\r\n      }\r\n    ],\r\n    \"blocks\": [\r\n      {\r\n        \"type\": \"slide\",\r\n        \"name\": \"Slide\",\r\n        \"settings\": [\r\n          {\r\n            \"type\": \"image_picker\",\r\n            \"id\": \"image\",\r\n            \"label\": \"Image\"\r\n          }\r\n        ]\r\n      }\r\n    ],\r\n    \"presets\": [\r\n      { \"name\": \"Slideshow\" }\r\n    ]\r\n  }\r\n]\r\n```\r\n\r\n---\r\n\r\n## TypeScript Support\r\n\r\nInstall `jiti` as a dev dependency:\r\n\r\n```bash\r\nnpm install --save-dev jiti\r\n```\r\n\r\nThen write your schemas in TypeScript:\r\n\r\n```ts\r\n// src/sections/hero/schema.ts\r\n\r\nexport default {\r\n  name: \"Hero\",\r\n  tag: \"section\" as const,\r\n  settings: [\r\n    {\r\n      type: \"text\" as const,\r\n      id: \"heading\",\r\n      label: \"Heading\",\r\n      default: \"Welcome\"\r\n    },\r\n    {\r\n      type: \"image_picker\" as const,\r\n      id: \"bg_image\",\r\n      label: \"Background image\"\r\n    }\r\n  ],\r\n  presets: [{ name: \"Hero\" }]\r\n}\r\n```\r\n\r\nOr with a typed interface for full IntelliSense:\r\n\r\n```ts\r\n// src/sections/slideshow/schema.ts\r\n\r\ninterface Setting {\r\n  type: string\r\n  id?: string\r\n  label?: string\r\n  default?: unknown\r\n  [key: string]: unknown\r\n}\r\n\r\ninterface Block {\r\n  type: string\r\n  name: string\r\n  settings?: Setting[]\r\n}\r\n\r\ninterface SectionSchema {\r\n  name: string\r\n  tag?: string\r\n  class?: string\r\n  limit?: number\r\n  settings?: Setting[]\r\n  blocks?: Block[]\r\n  max_blocks?: number\r\n  presets?: { name: string }[]\r\n}\r\n\r\nconst schema: SectionSchema = {\r\n  name: \"Slideshow\",\r\n  tag: \"section\",\r\n  class: \"slideshow\",\r\n  limit: 1,\r\n  settings: [\r\n    { type: \"checkbox\", id: \"autoplay\", label: \"Auto-rotate slides\", default: true }\r\n  ],\r\n  blocks: [\r\n    {\r\n      type: \"slide\",\r\n      name: \"Slide\",\r\n      settings: [\r\n        { type: \"image_picker\", id: \"image\", label: \"Image\" }\r\n      ]\r\n    }\r\n  ],\r\n  presets: [{ name: \"Slideshow\" }]\r\n}\r\n\r\nexport default schema\r\n```\r\n\r\nRun the same command:\r\n\r\n```bash\r\nnpm run generate-schema\r\n```\r\n\r\nIf `jiti` is not installed, `schema.ts` files are skipped with a warning and the CLI never crashes:\r\n\r\n```\r\n⚠ Found \"src/sections/hero/schema.ts\" but no TypeScript loader is installed.\r\n  Install jiti to enable schema.ts support:\r\n  npm install --save-dev jiti\r\n```\r\n\r\n---\r\n\r\n## Validation\r\n\r\nThe CLI validates every schema before writing the output. If validation fails, the run stops and every problem is listed clearly:\r\n\r\n```\r\n✖ Schema validation failed with 3 error(s):\r\n  • src/sections/hero/schema.js: schema is missing required \"name\" field.\r\n  • src/sections/slideshow/schema.js: duplicate setting id \"heading\" in settings.\r\n  • src/sections/slideshow/schema.js: blocks[0]: missing required \"type\" field.\r\n```\r\n\r\nFix the errors and re-run:\r\n\r\n```bash\r\nnpm run generate-schema\r\n```\r\n\r\n**Warnings** (non-blocking) are printed but never stop the build. Example: using a setting type that was introduced in a newer version of Shopify and isn't yet in this package's known-types list — it gets a warning but still passes through to the output as-is.\r\n\r\n---\r\n\r\n## Backward Compatibility\r\n\r\n`schema.json` files still work. If you have existing JSON schema files, they are loaded as-is.\r\n\r\n**Priority order** when multiple files exist in the same folder:\r\n\r\n| Priority | File | Notes |\r\n|----------|------|-------|\r\n| 1st | `schema.js` | ESM or CJS — always preferred |\r\n| 2nd | `schema.ts` | Requires `jiti` installed |\r\n| 3rd | `schema.json` | Legacy fallback |\r\n\r\n---\r\n\r\n## Architecture\r\n\r\n```\r\nbin/\r\n  section-schema.js    # CLI entrypoint — args, help text, error handling, exit code\r\n  postinstall.js       # Runs after npm install — adds generate-schema script automatically\r\nlib/\r\n  generateSchema.js    # Orchestrator — resolves paths, calls scan, writes output, logs\r\n  scanSections.js      # Discovers all section folders, returns validated schema array\r\n  schemaLoader.js      # Loads schema.js (ESM+CJS) / schema.ts (jiti) / schema.json\r\n  validator.js         # Validates each schema object against Shopify's section schema spec\r\nutils/\r\n  argsParser.js        # Parses --src / --out / --depth / --help from process.argv\r\n  fileUtils.js         # isDirectory, isFile, listSubdirectories, writeJsonFile\r\n  logger.js            # ANSI-colored console output — success, error, warn, info\r\ntest/\r\n  run.js               # 31 tests using node:assert only — no test framework needed\r\n```\r\n\r\nEach module has a single responsibility. To add a new file type (e.g. `schema.yaml`), only `schemaLoader.js` needs to change. To add a new validation rule, only `validator.js` needs to change.\r\n\r\n---\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md"}