A Shopify CLI plugin for building theme components.
The plugin-theme-component repository is a foundational part of the Archetype Devkit preview. It provides commands to create, develop, and install a collection of theme components.
You'll need to ensure you have the following installed on your local development machine:
- Latest version of Node.js and npm (or another package manager of your choice)
- Shopify CLI
Simply run the following command to install the Shopify CLI plugin:
shopify plugins install plugin-theme-componentIf you want to uninstall the plugin from the Shopify CLI, you can run the following command:
shopify plugins uninstall plugin-theme-componentshopify theme componentshopify theme component dev [COMPONENTS]shopify theme component generate COMPONENTSshopify theme component install [COMPONENTS]
Theme Component Plugin - By Archetype Themes
USAGE
$ shopify theme component [-v]
FLAGS
-v, --version Display Plugin Version
DESCRIPTION
Theme Component Plugin - By Archetype Themes
See code: src/commands/theme/component/index.js
Develop using theme components
USAGE
$ shopify theme component dev [COMPONENTS...] [--debug] [--trace] [-t <value>] [-l <value>] [-s] [-w]
ARGUMENTS
COMPONENTS... Component name(s)
FLAGS
-s, --[no-]setup-files Copy Setup Files
-w, --[no-]watch Watch For Changes
PATH FLAGS
-l, --locales-path=<path-or-github-url> [default: https://github.com/archetype-themes/locales.git] Path to your
locales data
-t, --theme-path=<path-or-github-url> [default: https://github.com/archetype-themes/reference-theme.git] Path to
your theme
DEBUG FLAGS
--debug Debug Mode is more verbose.
--trace Trace Mode provides tracing and debug information.
DESCRIPTION
Develop using theme components
FLAG DESCRIPTIONS
-l, --locales-path=<path-or-github-url> Path to your locales data
The path to your locales data should point to a GitHub URL or a local path. This defaults to Archetype Themes'
publicly shared locales database.
-s, --[no-]setup-files Copy Setup Files
Installs component setup files in your dev theme to allow component exploration in an isolated environment.
-t, --theme-path=<path-or-github-url> Path to your theme
The path to your theme should point to a GitHub URL or a local path. This defaults to Archetype Themes' publicly
shared component explorer theme.
-w, --[no-]watch Watch For Changes
Any changes to component, locale of theme source files triggers a file copy and theme build if necessary.
See code: src/commands/theme/component/dev.js
Generate canvas files for new components
USAGE
$ shopify theme component generate COMPONENTS... [--debug] [--trace]
ARGUMENTS
COMPONENTS... Component name(s)
DEBUG FLAGS
--debug Debug Mode is more verbose.
--trace Trace Mode provides tracing and debug information.
DESCRIPTION
Generate canvas files for new components
See code: src/commands/theme/component/generate.js
Install a collection of components
USAGE
$ shopify theme component install [COMPONENTS...] [--debug] [--trace] [-c <value>] [-l <value>]
ARGUMENTS
COMPONENTS... Component name(s)
PATH FLAGS
-c, --components-path=<path-or-github-url> [default: https://github.com/archetype-themes/reference-components.git]
Path to your components
-l, --locales-path=<path-or-github-url> [default: https://github.com/archetype-themes/locales.git] Path to your
locales data
DEBUG FLAGS
--debug Debug Mode is more verbose.
--trace Trace Mode provides tracing and debug information.
DESCRIPTION
Install a collection of components
FLAG DESCRIPTIONS
-c, --components-path=<path-or-github-url> Path to your components
The path to your components should point to a GitHub URL or a local path. This defaults to Archetype Themes'
publicly shared reference components.
-l, --locales-path=<path-or-github-url> Path to your locales data
The path to your locales data should point to a GitHub URL or a local path. This defaults to Archetype Themes'
publicly shared locales database.
See code: src/commands/theme/component/install.js
Interested in shaping the future of theme development with us? We welcome you to join our community! Your insights and discussions play a crucial role in our continuous improvement. We encourage you to start discussions, ask questions, and provide feedback on our component approach.
If you notice a bug, or want to contribute to the codebase, feel free to do so in the form of creating an issue or pull request.
If you already have the plugin installed via npm, you'll need to uninstall the plugin before being able to develop the plugin locally.
Once this is done, follow these steps to ensure the Shopify CLI is running the local version of the plugin:
git clone https://github.com/archetype-themes/plugin-theme-component.gitcd plugin-theme-componentnpm cishopify plugins link
