ShopifyでTheme Kitを使って開発!使い方の流れを紹介

こんにちは。中川瞬(@shun01224)です。

中川
この記事では、Shopify Theme kitについて知りたい
という方のために、Shopify Theme kitでできることやShopify Theme kitを導入するメリットについて解説をします。

この記事を読むことで、

  1. Shopify Theme kit を使うと何ができるか分かる
  2. Shopify Theme kit を使うメリットが分かる
  3. Shopify Theme kit を使った開発の流れが分かる

この記事を書かせて頂いている私は、現在、輸出・輸入・国内の転売のノウハウをお伝えしています。

時間がない会社員の方や子育てをしている主婦の方に、指導や転売システムの提供をして、忙しくても副業で収入を得てもらっています。

それでは、Shopify Theme kitを使うと何ができるかについて解説をしていきます。

Shopifyでテーマ開発を行うときに、少しでも効率の良い方法を模索しているのであれば、ぜひ「Shopify Theme kit」を導入してみてください。

Shopifyのテーマ開発を行う人に向けて、Shopify Theme kitの使った開発の流れなどについて紹介していきますので参考にしてください。

Theme Kitとは?何ができる?

通常Shopifyでテーマを開発していく場合、Shopifyの管理画面上から行うことになりますが、Shopifyの管理画面上で作業するのは少々不便に感じている方もいるかもしれません。

そんなときこそ導入してもらいたいのが「Shopify Theme kit」なのですが、その最大の特徴は、ローカル開発を行えることです。

ローカル環境でもスムーズに開発可能なので、普段からShopifyのテーマ開発を行うのであれば、ぜひ導入してください。

また、Shopify Theme kitは複数の環境に対してテーマアップロードやダウンロードが可能です。

Shopifyでの開発をTheme Kitで行うメリットとは

Shopifyでのテーマ開発は管理画面上で行うこともできますが、Shopify Theme kitを導入することにより、さまざまなメリットがもたらされます。

ここでは先ほど紹介した「ローカル開発」が行えること以外のメリットをいくつか紹介していくので、Theme kitを導入しようか迷っている方は参考にしてください。

開発画面が見やすい

Shopifyの管理画面からコード編集をすると、どうしても視認性の問題で文字が見えづらくなってしまいます。

コード編集は細かい文字をずっと凝視するため、視認性が低いと作業効率が下がってしまいます。

しかし、Theme kitを利用してローカル環境で開発することができれば、視認性の低さを解決できます。

作業環境を向上させるという目的では、Theme kitは非常に重要な役割を果たすでしょう。

サクサク作業できる

Shopifyの管理画面からコード編集などを行うと、どうしてもShopifyのサーバーの問題なのかさまざまな動作がもっさりしてしまいます。

集中して作業を行いたいのに、操作のたびに反応が遅いと、ストレスがたまってしまい作業どころではなくなってしまうでしょう。

しかし、ローカル環境での開発ができるTheme kitであればそのような心配をする必要はありません。

今まで管理画面からの作業でストレスを感じていた方はぜひTheme kitを導入してみてください。

ShopifyでTheme Kitを活用した開発の流れ

ここからは実際にTheme Kitを導入するときの流れについて紹介していきます。

Shopifyのテーマ開発を少しでも効率的に行うためにTheme Kitを導入したいを考えているのであれば、ぜひ参考にしてください。

Theme Kitは効率の良い開発を行いたいと考えている方の助けになること間違いありません。

インストールの前に事前準備を行う

Theme Kitを導入する際は、現在使っているOSに沿ったファイルをダウンロードしてください。

パッケージ管理ソフト(Chocolatey)などをすでに使用しているのであれば、そちらからダウンロードしてもらえばOKです。

パッケージ管理ソフトをまだインストールしていないのであれば、まずはインストールを行い、そこからTheme kitのインストールを進めてください。

Chocolateyをインストールするためにはコマンドを利用するのですが、基本的にTheme kitの環境構築は全てコマンドで行う必要があります。

中にはコマンドが不慣れな方もいらっしゃるかもしれませんが、これを機会にコマンドに慣れましょう。

Theme Kitをインストール

Chocolateyを無事ダウンロードすることができたら、次はTheme kitをインストールしていきましょう。

インストールの流れはOSによって異なりますが、Chocolateyをダウンロードした場合、指定のコマンドを入力してインストールしていきます。

ChocolateyでTheme kitをダウンロードするには、「choco install themekit」とコマンドを入力して、Enterキーを押してください。

無事インストールされたことを確認するために、「theme help」とコマンド入力し、Enterキーを押しましょう。

すると、コマンド一覧表が表示されます。

これでTheme kitを使用する準備が整いました。

Theme Kitの紐付けを行う

Theme kitをお使いのパソコンへインストールが完了したら、今度はTheme kitの紐付けを行います。

この作業をしなければ、ローカル環境とShopifyストアの間でファイルをやりとりすることができません。

紐付けのためにはAPIキー、パスワード、テーマIDが必要になりますが、まずはAPIキーの設定から行います。

管理画面を表示させたら「アプリ管理」→「プライベートアプリを管理」→「新しいプライベートアプリを作成する」という順番に遷移して、画面の指示通りにAPIキーとパスワードを生成していきます。

テーマIDは「テーマ」→「アクション」→「コードを編集する」の順にクリックした後、URLの末尾に表示されている数字のことです。

Shopifyのテーマ開発はTheme Kitを使うと快適に

Shopifyでテーマ開発を行うことがある方は、作業環境にこだわってほしいものです。

Shopifyの管理画面からでもテーマ開発を行うことはできますが、管理画面での作業は効率的ではありません。

より効率的な作業環境を求めているのであれば、ぜひTheme Kitの導入を検討してみてはいかがでしょう。

簡単に導入することができるので、まだ使用経験のない方は、ぜひ一度Theme Kitでテーマ開発に挑戦してください。

物販を実践して結果を出されている方で、丁寧に教えてくれる方をご紹介していますので、下の記事ぜひ読んでください。