メニュー

Shopifyのテーマをローカル環境からカスタマイズする準備

2021年6月以降、この記事で紹介している「Theme Kit」を用いた環境構築は非推奨になっています。これからShopifyのカスタマイズを始める方は、以下の記事を参考にしてみてください。

「Shopifyのテーマをがっつりカスタマイズしたい」
「クライアント向けに1から作れるようになりたい」

という方向け。Shopifyのテーマをローカル環境からカスタマイズするための手順を解説しています。

運営者の方で、色や文字の大きさを変更するなど、簡単なカスタマイズをしたい方はこちらの記事の方法がおすすめ。

「いや、自分はローカル環境でカスタマイズしたい!」という方は続きをどうぞ。

私はMacを利用しているので、Macでの手順 + 画像になっています。Winの方も流れは同じですが、コマンドラインなどが違うことをご了承ください。

Shopifyテーマをローカル環境でカスタマイズする手順

1.Shopify Theme Kitのインストール
2.ストアのAPIキーを取得
3.ローカル環境にテーマをダウンロード
4.テーマの編集

Shopifyのテーマをローカル環境でカスタマイズするには、以上4つの手順で準備を進めていきます。

順番に1つずつ済ませていけば簡単です!

1.Shopify Theme Kitのインストール

まずは、Shpifyをローカル環境で操作するための「Shpify Theme Kit」をインストールします。

ターミナルを開いて、

brew tap shopify/shopify
brew install themekit

で、Theme Kitをインストール。インストールできたら、

theme version

で、Theme Kitのバージョンを確認してください。

これで、手順1は完了です。

2.ストアのアクセストークンを取得

続いて、テーマの編集を行うストアのアクセストークンを取得します。まずは、Shopifyのストアにログインしましょう。

「Shopifyの運営はまだだけど、開発の練習だけしておきたい」という場合は、「Shopify Partners」に登録することで、開発用のストアを無料で準備することができます。

ログインできたら、左メニューから「アプリ管理」のページへ。右上に「アプリを開発」のメニューが出てくるので、こちらをクリック。

また右上の「アプリを作成」のボタンをクリック。

アプリ名(任意)と、アプリの開発者を選択して、「アプリを作成」をクリック。

アプリの作成ができました。続いて「Admin APIスコープを設定する」ボタンをクリック。

テーマ管理の権限を選択する箇所があるので、両方チェックを入れます。チェックをしたら一番下の方の「保存」ボタンをクリック。

タブメニューから「API資格情報」を選択し、アクセストークンの箇所の「アプリをインストール」をクリック。

「インストール」をクリック。

「トークンを一度開示」をクリックして、必ず他の場所にコピペして保存しておいてください。

ローカル環境とShopifyストアの連携をするためのパスワードのようなものです。次のステップで必要なので、間違って閉じないように注意!

ステップ2のアクセストークンの取得はこれで完了です。

3.ローカル環境にテーマをダウンロード

続いてローカル環境でテーマを編集するために、Shopifyストアのテーマを一式ダウンロードします。

まずは、現在ストアの中にインストールされているテーマを確認。

theme get --list --password=[your-password] --store=[you-store.myshopify.com]

[your-password] … アクセストークン
[you-store.myshopify.com] … ショップURL

をそれぞれ入力します。ショップURLは、ストアを開設する際に最初に決めたデフォルトのURLです(独自ドメインではない)。

ショップURLを忘れた場合は、管理画面の「設定」から確認できます。

テーマ一覧と、テーマIDが表示されました。今回カスタマイズするテーマのIDを控えておきます。

ターミナルでテーマをダウンロードするフォルダに移動して、以下を入力。

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

[your-theme-id] … テーマID

パスワードとストアURLは先ほどと同じ。テーマIDには、前回に確認した数字のIDを入力します。

テーマファイル一式がダウンロードできました!あとはこれをテキストエディタで編集していくだけ。

今回は「Dawn」のテーマをダウンロードしましたが、テーマによって上記の画像とファイルが異なる可能性があります。

4.テーマの編集

テーマの編集をリアルタイムで行うためには、以下のコマンドを入力。

theme watch

このコマンドが動いている間は、ファイルを更新すると自動でshopifyストアに編集箇所が反映されます。

以上でローカル環境でのテーマをカスタマイズするための準備が完了です。

「^ + C」で「theme watch」を停止します。


一度流れを把握してしまえば、難しいことはありません。ローカル環境でカスタマイズの準備できれば、いつものエディタで作業を進めることができるので快適!

また、既存テーマの簡単なカスタマイズに慣れたら、Shopifyの最低限の機能が実装された「スターターテーマ」で、1からテーマを組み立ててみるのがおすすめです(開発者向け)

余計な機能が入っていないコードはシンプルで読みやすく、学習に最適です。

スターターテーマの利用方法は以下の記事で解説しています。

Shopifyのスターターテーマで1からテーマを作る(準備中)

Profile

やまもと

モールから卒業して、自分でネットショップを持ちたい方向けのブログを書いています。

Shopifyの簡単なカスタマイズや、0からの構築。集客面に関する相談などはお気軽にお問い合わせください。

Recent

Tags