Shopify のテーマを Theme Kit で作るための環境構築
Shopify のテーマを Theme Kit で作るための環境構築です。 本当に最初の最初
Macに Theme Kit を install
brew tap shopify/shopify brew install themekit
インストールの確認
theme help
Usageが表示されればinstall 成功。
Complete documentation is available at https://shopify.github.io/themekit/
Usage:
theme [command]
Available Commands:
configure Create a configuration file
deploy deploy files to shopify
download Download one or all of the theme files
get Get a theme and config from shopify
help Help about any command
new New will generate a new blank slate theme in the same directory where it gets called from and create a new theme on Shopify with those files.
open Open the preview for your store.
publish publish a theme
remove Remove theme file(s) from shopify
update Update Theme kit to the newest version.
version Print the version number of Theme Kit
watch Watch directory for changes and update remote theme
Flags:
--allow-live Will allow themekit to make changes to the live theme on the store.
-c, --config string path to config.yml (default "/Users/jimai/workspaces/MyProject/shopify/config.yml")
-d, --dir string directory that command will take effect. (default current directory)
-e, --env stringArray environment to run the command (default [development])
-h, --help help for theme
--ignored-file stringArray A single file to ignore, use the flag multiple times to add multiple.
--ignores stringArray A path to a file that contains ignore patterns.
--no-ignore Will disable config ignores so that all files can be changed
--no-update-notifier Stop theme kit from notifying about updates.
-p, --password string theme password. This will override what is in your config.yml
--proxy string proxy for all theme requests. This will override what is in your config.yml
-s, --store string your shopify domain. This will override what is in your config.yml
-t, --themeid string theme id. This will override what is in your config.yml
--timeout duration the timeout to kill any stalled processes. This will override what is in your config.yml
--vars string path to an file that defines environment variables
-v, --verbose Enable more verbose output from the running command.
Use "theme [command] --help" for more information about a command.
Access keyを生成する
shopify管理画面からAPIのAccessキーを生成します。
アプリ管理 > プライベートアプリを管理する をクリック
諸々同意しならが、アプリを作成
アプリ名と連絡先emailを設定
テーマを 読み書きできるようにアクセス権を変更
保存すると、キーやパスワードが生成されます。
テーマを新規作成
mkdir my-theme cd my-theme theme new --password=[your-password] --store=[your-store.myshopify.com] --name=[theme name]
[your-password] => 管理画面で生成されたパスワード [your-store.myshopify.com] => 自分のshopify の ドメイン部分 (xxxxx.myshopify.com) [theme name] => テーマ名 任意の名前
これで、ベースのファイルが生成されるので開発に取りかかれます。
開発中に使うコマンド
ブラウザで開発中の内容を確認する場合
theme open
変更をすぐアップロードしてくれる
theme watch
ファイルを全部アップする場合
theme deploy
関連記事
