Shopifyの固定ページをローカル環境で制作し公開するまでの手順
Shopifyでは「会社概要」や「お問い合わせ」、商品紹介のLPなどといった固定ページを簡単に作成することができます。
さらに、templateと紐付けることで、Theme kitやslateを使用したローカル環境でエディターを使って開発することができます。
こちらの記事では、ローカル環境で制作した固定ページを確認用のステージングテーマ（テスト環境）に反映し、更に本番テーマで公開するまでの手順を解説します。
Theme kit または slateの導入がまだの場合は、以下の解説を参考に開発環境の準備をおすすめします。
※また前提として、本番テーマとステージングテーマの２つを用意していることとして進めていきます。
もし新たにステージングテーマを用意する場合は、本番テーマの「アクション」ボタンから「複製」を選択することで本番テーマを複製可能です。
「ローカル環境での開発は必要なく、管理画面から手軽にページを追加したいだけ」という場合は、本記事のセクション3を参考にページの詳細情報を設定いただけたらと思います。
1. 本番テーマにTemplateを追加
固定ページをローカル環境で開発するには、管理画面のエディター上でTemplateを用意する必要があります。
まずはじめに、管理画面 > テーマ > ライブテーマ（本番環境）の「アクション」ボタンより「コードを編集する」を選択します。
エディター画面に移動したら、サイドメニューのTemplatesタブ内から「新しいtemplateを追加する」を選択。
”目的”を「page」に設定し、”名前”には任意の名称を設定します。
追加されたファイルは以下のような名称になっているかと思います。
例）page.任意の名称.liquid
pageの名前は開発する固定ページの内容に合致した名称にすると、管理がしやすいかと思います。
2. テスト環境にも同じく、Templateを追加
- の手順と同じように、ステージングテーマでもエディター画面よりTemplateを追加します。
3. 固定ページを追加しTemplateと紐付ける
固定ページを追加し、詳細設定を行います。
管理画面 > ページ と移動し、「ページを追加」を選択します。
詳細画面に移動したら「ページの詳細」以下の情報を入力していきます。
- Title
ページのタイトルを入力します。 - コンテンツ
メインコンテンツを入力する場所です。
ボタン操作で書式設定や表・画像の挿入などが簡単に行えるため、HTMLに詳しくない方でも操作しやすくなっています。またHTML表示に切り替えることもできるため、直接HTMLを編集するか別の場所で書いたコードを貼り付けることも可能です。
※Templateを使用して開発を進める場合、こちらは空欄にします。 - 表示 / 非表示
ページの公開状態や、公開日の設定が可能です。
開発を進める際は「公開」を選択します。 - テンプレート
ここで固定ページとTemplateを紐付けることができます。
プルダウンメニューより、先程作成したTemplateを選択します。
さらに「ウェブサイトのSEOを編集する」より、検索エンジンでの検索結果に表示される情報を編集していきます。
- ページタイトル
titleタグの内容を入力します。
※空欄の場合、「Title」の情報が参照されます。 - 説明
descriptionタグの内容を入力します。
※空欄の場合、「コンテンツ」の情報が参照されます。 - URLとハンドル
ページのURLを入力します。
「Title」の情報が参照されますが、日本語の場合はエラーとなるので注意が必要です。
上記の項目を設定できたら「保存」を選択します。
管理画面で行う準備は以上となります。
4. ローカル環境でページ制作
管理画面での準備が完了したので、ここからはローカル環境での作業に移っていきます。
※本記事ではステージングテーマと繋いだTheme kitでの開発を例に解説します。slateを使用する場合も手順は同じになります。
1. templateフォルダにliquidファイルを追加する
Theme kitで既存テーマの環境を構築すると、フォルダ構成は管理画面上のエディターの内容と同じになっているはずです。
その中の「templates」フォルダ内に、今回制作する固定ページのファイルを作成します。
ファイル名は、管理画面で作成したものと同じにします。
例）page.任意の名称.liquid
2. ローカル環境でコーディング
ファイル追加ができたら、下記コマンドでTheme kitを立ち上げ、コーディングしていきます。
【Open コマンド】開発中のテーマを表示する
ブラウザ上に開発中のテーマが表示され、開発状況を確認できます。
theme open【Watch コマンド】開発中テーマを監視する
ローカル環境で行った変更内容をテーマにアップロードしてくれます。
theme watch5. 本番テーマに反映し公開する
theme watchコマンドを使用することで、管理画面上のステージングテーマにも変更が反映されますので、ページ下部の「Share preview」ボタンから確認用のURLをコピーし、開発した内容を確認します。
確認が完了したら、Shopify管理画面から本番テーマのエディター画面へ移動し、ステージングテーマでの開発内容を貼り付ければ完了です。
まとめ
Shopifyの固定ページの編集は、管理画面からもかなり簡単に行えるようになっています。
しかしTheme kitなどを使用し、ローカル環境でコーディングできれば、更にスムーズに開発を進めることができます。（特に普段からvisual studio codeなどのエディターでコーディングをされている方にとって）
また、Deploy Botなどのツールでデプロイ作業を簡略化することで、手動で反映するより漏れなく公開作業が行えるので、合わせて設定しておくこともおすすめです。
