Shopify Theme Kitをダウンロードしてコードエディタでテーマ編集する
Shopifyテーマとは
Shopifyをご存知の方はもちろん、最近ノーコードが注目される中でプログラミングなしでECサイトが作れちゃうということで人気になっているShopify
Shopifyのアプリケーション開発を担当する中でテーマの方をお手伝いしたこともあり、ブラウザ上でコードを見るのが非常に辛かったので、自分のコードエディタで作業するために必要なことをまとめます。
はじめに
Shopifyはテーマ開発においてLiquidという独自の言語を使用しています。今回のテーマ開発に関しては、このLiquidを使用して作られた既存のテーマたちとそのテーマにカスタムCSSを加える際に活用できる環境整備についてお話します。
まずはじめに、こちらよりShopify Theme Kitをダウンロードしてください。
ローカル環境の整備
Shopify Theme Kitでは、新たなテーマをCLIで1から開発する際、下記のようなコマンド
theme new --password=[your-password] --store=[your-store.myshopify.com] --name=[theme name]
が必要となっていますが、実際にテーマを購入したり、選んだりしてストアに入れてみてから、管理画面上でセクション等をカスタマイズしてみて初めて構築・CSS編集となることが多いかと思います。
なので、ここでは既存のストアにテーマを入れてある状態で、ローカルにそのテーマを落としてくるところから解説します。
- ローカルにテーマ構築のディレクトリを作成
mkdir "project_name"
cd "project_name"
- config.ymlを作成
touch config.yml
- config.ymlにAPIシークレットを記載
development:
password: "Password from Admin API"
theme_id: "Theme_id from URL"
store: "https://<store_name>.myshopify.com"
編集するテーマのAPIアクセスを取得
Shopifyストアの管理画面にいき、Appsをクリックします
Admin APIの箇所で全てのAPI許可を表示し、テーマの読み取り・書き込みを許可します
API作成で表示されるPasswordがconfig.ymlに記載する"Password from Admin API"になります
テーマIDとストアのURLを取得
ローカルで現行のテーマを編集する
config.ymlに必要な箇所を記載したあと、下記のコマンドでローカルに現行のテーマをダウンロードできます
theme download
実際に作業する際、ローカルで編集したものをリアルタイムで現行のテーマに反映させるには
theme watch
を実行してからコード編集をしてください。
注意点
上記のtheme watchを実行することで、ローカルで編集したコードは直接テーマに反映されますが、
テーマをストア管理画面上で編集した場合、theme downloadを実行しない限り、ローカルには反映されません。
管理画面上で現行のテーマを編集した場合には、ローカルのテキストエディタで編集する前にtheme downloadを実行されることをお勧めします。
また、現行のテーマをそのままローカルで編集するのに抵抗がある場合には、編集前のテーマを複製しておくのが良いかもしれません。
Author And Source
この問題について(Shopify Theme Kitをダウンロードしてコードエディタでテーマ編集する), 我々は、より多くの情報をここで見つけました https://qiita.com/chihirot0109/items/ee3c0114ad8bf1a87b66著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .