ECサイトShopifyの初心者必見！オリジナルテーマ制作の基本を解説 〜環境構築編〜

ShopifyはWordPressと同様に、テーマを管理してデザインを変更します。
オリジナルのテーマのデザインを変更する場合、直接コードを編集します。

ここまでは、WordPressと同じですね。

編集したコードをアップロードする際は、通常FTPソフトを使ってアップロードするのが一般的かと思います。
しかしShopifyでは、ローカル環境のコードを編集しただけで、実際のサイトに反映することができる便利な機能があります！

今回はその便利な機能を含め、実際にオリジナルテーマを制作する際のローカル環境の構築について紹介します。

※登録や設定の画面は、今後変更される可能性があります。以降のスクショは2023年10月1日時点のものになります。

なお、執筆者はMacBookAir のM2チップ仕様のものを使っていることから、同じPCではない場合画面が異なる場合があります。その点、ご了承ください。

Theme Kitのダウンロード

さっそく初めて聞く名前で恐縮ですが、Shopifyにはテーマ用のコマンドラインツールがあり、それがTheme Kitというものになります。

インストールの方法は、公式ドキュメントに記載があります↓
https://shopify.dev/docs/themes/tools/theme-kit/getting-started

今回私のPCはmacOSであることから、macOSの方法でインストールします。

Windowsの方は、Windowsの方法に従ってダウンロードしてください。

 

macOSの場合、Homebrewというものを使ってダウンロードします。
持っておられない方は、下記のページからダウンロードします↓
https://brew.sh/

ターミナルを使って、下記のコマンド実行でもダウンロードは可能ですが、
/bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)”
今回はインストーラを使ってダウンロードします。

下記GitHubのページから、.pkgのファイルをダウンロードします。
https://github.com/Homebrew/brew/releases/tag/4.1.13

インストーラを起動すると、下記の画像が表示されます。

インストール後、下記の指示がある場合は、ターミナルでコマンドを実装する必要があります。

ターミナルを開き、下記のコマンドを実行します。※ユーザ名には、御自身のものを入れてください。
echo ‘eval “$(/opt/homebrew/bin/brew shellenv)”‘ >> /Users/ユーザ名/.zprofile
eval “$(/opt/homebrew/bin/brew shellenv)”

これでHomebrewの準備は完了です。

試しにbrew -vと入力し、バージョンが表示されればインストール完了です。

ここまで完了したら、下記のコマンドを実行することでThemeKitをインストールできます。

brew tap shopify/shopify

brew install themekit

最後に、ターミナルでthemeと入力してエラーがなければ、ThemeKitのインストールは完了になります。

Shopifyの設定

まずはshopifyのアカウントを持っていない場合は、Shopifyのアカウントを作成しましょう。

https://www.shopify.com/jp

アカウントを作成したら、ストアを作成してください。

ストア作成後、ログイン下画面の左サイドメニューの「アプリ」をクリックします。

次に「アプリと販売チャンネルの設定」をクリックします。

「アプリを開発」をクリックします。

「カスタムアプリ開発を許可」をクリックします。
【補足】
「アプリ」という単語でも意味は様々ですが、ここではThemeKitのことを指します。
また「アプリ」を開発するには管理者の権限が必要なので、ここではストア作成者が管理立場として
アプリの開発を許可する必要があります。

開発の許可ができたら、アプリを作成します。

次に、どのようなアプリにするのかを設定します。
「概要」タブの「Admin APIスコープを設定する」をクリックします。

今回オリジナルテーマなので、アプリとしてはテーマの編集を可能としたアプリにします。
下記赤枠2つにチェックを入れて、「保存」をクリックします。

その後、「API資格情報」タブにて、アプリのインストールを行います。

アプリがインストールできたら、アプリと接続を行うためのパスワードを取得します。
「トークンを一度表示」をクリックし、パスワードを確認しましょう。

ここで確認されるパスワードは1度しか表示されませんので、必ずメモを残しましょう。

ここまでが、Shopifyの画面で設定する内容となります。

テーマとローカル環境の紐付け

ここまでできたら、テーマとローカル環境の紐付け作業を行います。
先に概要をお伝えしますと、現在設定されているテーマを指定し、
そのテーマとローカル環境にあるコードエディタ（例えばVSCode）と紐付けします。

今回サンプルとして、現在設定されているテーマを「複製」したものと紐付けしましょう。

Shopifyの管理画面に入り、「Online Store」をクリックすると、現在設定されている
テーマを確認することができます。

その中の複製(Duplicate)をクリックすると、テーマが複製されます。

複製が完了したら、ターミナルを開き、下記のコードを実行します。

theme get –list -p=先ほど確認したパスワード -s=https://ストアの名前.myshopify.com

すると、存在するテーマが一覧で表示されます。
（↑ではテーマを複製していないので、Dawnというテーマのみ表示されています。）

ここでは、黄色の部分に記載されているID番号をメモしてください。
その番号が、今回コードエディタと紐づけるテーマのIDとなります。
もしテーマを複製されている場合は、複製されたテーマのID番号を控えてください。

次にテーマのダウンロードを行います。
ターミナルで、ダウンロードしたいフォルダに移動し、下記のコマンドを実行してください。

theme get -p=先ほど確認したパスワード -s=https://ストアの名前.myshopify.com -t=先ほどメモしたID番号

これで、紐付け作業は完了となります！

テーマを編集してみよう！

それでは、ダウンロードしたフォルダをコードエディタで読み込み、中身を確認してみましょう。

Dawnというテーマの中身が表示されるかと思います。

オリジナルテーマの作り方としては、この中身を参考にする、あるいはファイルを削除して
コードを組み込むとスムーズかと思います。

複製されたテーマであれば、自由に編集してみてOKです。

 

試しに、編集をしてみましょう。
まずはサイトを確認してみます。

タイトルが「Browse our latest products」となっていますね。
この文字を編集してみます。例えば「s」を抜いてみましょう。

 

冒頭でも説明した通り、Shopifyはローカル環境のコードを編集することで
自動的に変更を反映させる事ができます。

そのための準備として、コードエディタのディレクトリでターミナルを開き、

theme watch –allow-live

を実行します。
すると、データを保存するたびに、リアルタイムでサイト更新がされるようになります。

それでは、編集を行います。

「templates」フォルダの「index.json」の中に記載されている上記の文字を編集して保存します。

サイトを開き、更新してみましょう。

「s」がなくなっているのが確認できます。

まとめ

いかがでしたでしょうか。

やったことをまとめますと、
・Theme Kitをダウンロード
・Shopifyの設定
・紐付け
の3つで、ローカル環境の設定ができます。

サーバーやドメインを契約する必要がないので、簡単に試す事ができます。
ECサイトの受注前には、ぜひポートフォリオとしてオリジナルテーマを作ってみましょう！

NAKAJIMA