Shopify Theme Kit(ショッピファイ テーマ キット)インストール方法【初心者向け】

当ページのリンクには広告が含まれています。

ShopifyはWordpressと同じでテーマ(Theme)でデザインテンプレートが変更できます。テーマの販売も同じようにされています。
Shopifyの契約プランで出来ることに差がありますが、デザインを変更するには、管理画面にログインして作業するか、Theme Kit (ショッピファイ テーマ キット)で作業するのが一般的な方法です。
初心者向けにWindowsでShopify Theme Kit(ショッピファイ テーマ キット)をインストールする方法を解説します。

目次

Shopify Theme Kit(ショッピファイ テーマ キット)インストールする方法

基礎知識

Shopifyは、HTML、CSS、JS、Liquidで構成されてます。HTML、CSS、JSは基本言語ですが、LiquidはShopifyがRubyで開発したオープンソースのテンプレート言語です。
全体的に分かりやすく構成されてますが、Shopify Theme Kit(ショッピファイ テーマ キット)を入れてもこれらの基本言語の理解が必要です。

事前準備

Shopifyは、テーマの編集や、Liquidのサンプルソースや、説明がしっかりと準備されてます。

Shopifyブログ(https://www.shopify.jp/blog/partner-shopify-app-development)

インストール方法(Windows版)

インストール方法もこのブログから分かりますが、今回は実際の手順の説明を紹介します。

STEP
Shopify ブログより、Shopify Theme Kitをクリック
STEP
リンク先のShopify developersページに遷移します

Theme Kitやチュートリアルを確認することができます。
リンク先をスクロールして「Getting started」の項目から、Getting started with Theme Kitをクリック。

STEP
Getting started with Theme KitページのStep 1: Install Theme Kitから、Windowsをクリック
STEP
Windows用のパッケージ管理ソフト「Chocolatey」をインストールします。

Chocolatey(https://chocolatey.org/)

Chocolatery公式サイトトプページにある「Get Started」をクリック。遷移先のページに沿ってインストールします。
※ここではChocolateyのインストールの説明は省かせて頂きます。Googleで「Chocolateyインストール方法」で検索していただければ詳しい説明をしているサイトが多くありますので、そちらを参考にしてください。

Chocolateyのインストール参考:https://qiita.com/kangetsu121/items/b6352b547cd32e71bc65

STEP
「Chocolatey」をインストールしたら、shopifyのTheme Kitをインストールします

PowerShellにて、以下コマンドを入力

choco install themekit

コマンドライン上で、Theme Kitがダウンロードされ、インストールして良いか聞かれます。

Do you want to run the script?

インストールに進むので、

Yes[Y]

でインストール開始されます。

Download of theme.exe(容量MB) completed.

で完了です。
試しに

theme help

でhelpコマンドが表示されればインストールされている事が確認できます。

STEP
Shopify側のテーマとパソコンのテーマを連携

ローカルPCのテーマとShopifyを連携させるためのAPIキーの設定を行います。
shopifyにログインして、「アプリ管理」メニューの一番下「プライベートアプリを管理する」をクリック。

次の画面で「プライベートアプリを有効にする」をクリック

チェックボックスを全て入れて「プライベートアプリの開発を有効にする」をクリック
(※全部チェックを入れないとボタンは押せません)

「プライベートアプリを作成する」をクリック

STEP
プライベートアプリを作成するメニューを設定

アプリの詳細で「プライベートアプリ名」「メールアドレス」を入力します。

Admin APIから何か1つ以上選択します。(何の権限を作成するAPIにもたせるか?と言う感じです)
今回はテーマの編集のみなので「Kit Skills」「テーマ」を「読み取り及び書き込み」にしてページ下の「保存する」をクリック

ポップアップから「アプリを作成する」をクリック(APIキーを使うと外部からの操作が出来てしまいますので注意です)

作成が完了すると「APIキー」「パスワード」が発行されます。
ここまでで準備は完了です。

STEP
コマンドプロンプトから作業「テーマIDの確認」

テーマIDの確認は「管理画面」か「コマンド」で確認する事ができます。

<管理画面で確認する方法>
オンラインストアのメニューから現在のテーマの「カスタマイズ」ボタンをクリック
表示されたオンライン編集の画面のURLにある番号がテーマIDです。

<コマンドで確認する方法>
コマンドプロンプトを立ち上げて以下を入力。
your-api-passwordは発行した「パスワード」、
you-store.myshopify.comは「自分のショピファイサイトのアドレス」です。

theme get --list -p=your-api-password -s=you-store.myshopify.com
STEP
テーマをローカルに取得する

テーマをPCに以下のコマンドでダウンロードして、作業できる様にします。
以下のどちらでも実行可能です。

theme get --password=your-api-password --store=you-store.myshopify.com --themeid=your-theme-id

そのままでも良いですが、フォルダを作って分かりやすくする事も良いと思います。
その場合は、コマンドプロンプトのコマンドでフォルダを作ってください。
検索「コマンドプロンプト コマンド一覧

STEP
config.ymlについて

shopifyでテーマをダウンロードすると「config.yml」と言うファイルがあります。
これは、環境の設定が入っているファイルです。
このファイルを変更する事により、本番環境、開発環境へのデプロイが楽になります。

development:
  password: APIパスワード
  theme_id: “テーマID"
  store: sample.myshopify.com
  ignore_files:
    - config/settings_data.json
production:
  password: APIパスワード
  theme_id: "テーマID"
  store: sample.myshopify.com
  ignore_files:
    - config/settings_data.json

「ignore_files:」で更新必要のないファイルは外してください。

Theme Kit コマンド

テーマのID一覧

theme get --list -p=your-api-password -s=you-store.myshopify.com

ブラウザでテーマを開く

theme open

テーマのカスタマイズ画面を開く

theme open -E

リアルタイムに変更をアップロードする(キャンセルはControl + c

theme watch

テーマをダウンロード

theme download

開発環境だけにデプロイする

theme deploy --env=development

本番環境だけにデプロイする

theme deploy --env=production

全てのファイルをアップする

theme deploy

config.ymlで設定してある全ての環境にアップする

theme deploy -a

テーマをはじめから作るとき

theme new --password=[your-password] --store=[your-store.myshopify.com] --name="New Blank Theme"

Shopifyはログインした管理画面と、ThemeKitを使った方法とで編集できます。
両方の環境で作業すると、上書きされてしまいソースが若返ったりしますので、作業はどちらかにします。作業時は必ず一度テーマをダウンロードし、それを開発環境にデプロイして同期させてから作業するようにします。

2020年10月のTheme kitの更新により、公開しているテーマに対して変更を加える場合は、末尾に「–allow -live」が必要です。

最後に…

shopify(ショッピファイ)は管理画面からでもテーマの編集は可能ですが、見やすさ作業のしやすさを考えると、ThemeKitからの方が安全で良いと思います。検索するとたくさん情報がありますので、ノンプログラマーでも是非チャレンジしてみてください。

Special Thanks
下記の記事を参考、コードをそのまま、あるいは改造して使用させていただきました。

※リンクは張られていないものは、リンク先のサイトアドレスが変更もしくは見つからなくなったためです。

楽天市場で注目の商品![ sponsored ]

  • URLをコピーしました!
目次