Shopifyテーマカスタマイズの始め方。world株式会社つくろう、ともに。ServiceWorksAboutCSRBlogEventsRecruitShopContactENGLISHTOPブログテクノロジーShopify開発Shopifyテーマカスタマイズの始め方。2019.12.24Shopify開発Shopifyテーマカスタマイズの始め方。エンジニアこんにちは、エンジニアの川島です。技術記事ではお久しぶりですね:)私たちの会社では、現在、Shopifyを活用したECサイトのコンサルティング&開発案件を多く進めています。いう方は、弊社代表の高崎と、デザイナー佐藤による、Shopify解説記事もぜひ合わせてご覧くださいませ。マーケター&エンジニア視点から見たShopify導入のメリットデザイナー視点でみる「Shopify」:デザインのカスタマイズでできることと留意点Shopifyは世界175カ国80万店舗以上に利用されているECプラットフォーム(※2019年2月時点)ですが、日本法人立ち上げから2年経っていないこともあり、開発者向けの日本語情報はまだまだ少ないです。Kitを利用した環境構築&テーマ開発をご紹介したいと思います。※本記事では下記を前提とします。Kitは、Shopifyテーマ開発を支援するコマンドラインツールです。Kitを利用してローカルに開発環境を構築する方が便利です。Kitを利用することで、ローカル環境で編集したテーマファイルをShopifyストアに反映したり、Shopifyストア管理画面上で行われた変更をローカル環境に反映させたり、といった工程がスムーズに行えるようになります:)注:Slateについて同じくShopifyテーマ開発用のコマンドラインツールとしてSlateが存在します。Kitの利用が推奨されているようです。kitのインストールを行います。されるパスワードを手元に控えます。Kit公式ドキュメントに手順動画が掲載されているので、参考にしてください:)https://shopify.github.io/themekit/#get-api-access開発用にテーマを複製する開発ストアを利用しない場合、本番運用されているテーマを複製して、開発用テーマとします。「オンラインストア>テーマ>ライブテーマ>アクション>複製する」工程で、複製が可能です。テーマIDを取得するターミナル上でShopify開発用ディレクトリに移動し、以下コマンドを打ち込みます。[your-password]は先ほど控えたAPI接続パスワードに、[you-store.myshopify.com]はshopifyストアのURLに置き換えてください。-s=[you-store.myshopify.com]本コマンドを打ち込むと、以下のように、Shopifyストア上で利用可能なテーマおよびID(10桁の数列)の一覧が取得できます。カスタマイズ[live]と付いているのが、現在、Shopifyストアでアクティブになっている本番テーマです。ここでは、開発用に複製したテーマのID[410xxxxxxxx]を手元に控えます。以下コマンドを、控えておいたAPIパスワードと開発用テーマIDに置き換えた上で打ち込みます。-t=[your-theme-id]これで、Shopifyストア上にあるテーマファイルがローカルに取得され、Shopifyストアとローカルの接続も確立されます。既存テーマのカスタマイズではなく、オリジナルテーマを0から作る場合は、下記コマンドで新規テーマが作成できます。テーマIDは不要です。本コマンドで、shopifyテーマに必要なファイルがローカルに構築され、shopifyストアとの接続も確立されるため、新規テーマ作成時はまずこのコマンドから始めるのが良さそうです。取得されたテーマファイルの中には、config.ymlという設定ファイルが含まれています。開発テーマ・本番テーマ双方に編集を反映したい......という場合には、config.ymlに複数テーマ分の環境設定を記述しましょう。後述する、テーマ自動反映の対象外ファイルもconfig.ymlで設定できます。config.ymlの記述サンプルは、公式ドキュメントを参照してください。Kitを利用したテーマ開発についてご紹介してゆきます。WordPressなどの開発とは異なり、Shopifyはローカルサーバーで動かすことができません。Kitで編集内容を反映しながら、開発を進めてゆくのが基本的な流れとなります。下記コマンドで、テーマのプレビューを開きます。追加することで、それぞれの環境のプレビューにアクセスできます。Kitには存在しません><コンパイルツールPreprosを用いたライブリロード方法が開発ブログにて言及されていますが、軽く試した限りでは、ちょっと不安定な印象でした......。下記コマンドを打ち込むと、control+cで終了するまでの間、編集・保存されたファイルを自動でShopifyサーバーにアップロードしてくれます。watch例によって、複数環境が設定されている場合は、末尾に–env=[環境の名前]を付ければ反映先を変更できます。本番テーマを「production」としてconfig.yml上に設定している場合は、下記コマンドで本番テーマに反映されます。クライアントが運用しているShopifyストアの開発に関わる場合、管理画面上で行われた変更を、ローカル環境の変更で上書きしてしまう可能性があります。下記コマンドで、Shopifyサーバー上のテーマファイルを一括ダウンロードできるので、作業開始前に本番環境との同期を取っておくと安全です。--env=productionデプロイローカル環境のファイルをShopifyサーバーにまとめて反映するには、下記コマンドを利用します。deploy何もオプションをつけなかった場合は、ローカル環境の全ファイルでShopifyサーバー上のテーマファイルが置き換わります。※ローカルに存在しないShopifyサーバー上のファイルは削除されます特定のファイルだけをデプロイしたい場合は、下記コマンドで。assets/custom.cssおわりにテーマやプラグイン(アプリ)など、Shopify開発はWordPress開発との共通点が多いですが、ローカルサーバーが立てられなかったり、子テーマの概念が無かったりと、独自の点も多く存在します。Kitを導入すれば開発がぐっと楽になるので、ぜひ試してみてください:)Shopifyテーマの基本構成や、Liquidファイル、カスタムCSS&JSの導入方法なども、また別の記事でご紹介できればと思います。追記:Shopifyテーマの構造に関する解説記事を公開しました。送信フォーム記事についてのご意見やご感想、ご質問をお気軽にお寄せください。※なお、ご質問については回答できない場合と、当ブログの記事にて個人情報を伏せたうえで回答させていただく場合がございます。私たちは、D2Cブランドを中心に採用が広がるECプラットフォーム「Shopify」で作るネットショップのコンサルティングと構築を行っています。デザイン思考に基づくワークショップ(デザインスプリント)でスタッフが「自分ごと」と思えるサービスを作ります。詳しくはこちらをご覧ください。私たちは、毎週火曜日にオフィスの入っているカフェ兼シェアオフィスのメンバーで北欧式おやつの時間「フィーカ」を設けており、どなたでもお気軽に参加いただけます!詳しくはこちらをご覧ください。さやかフロントエンドエンジニア。1990年、千葉県生まれ。立教大学文学部(文芸・思想専修)卒業後、Web業界での勤務を経て、2017年7月よりメンバーに加わる。小説を書くエンジニア。前の記事Shopify開発マーケター&エンジニア視点から見たShopify導入のメリット次の記事Shopify開発Shopifyテーマの構造解説。policyContact。