【Shopify／htmlの知識不要】フリーページを使って下層ページに設定する方法！

Shopifyではテーマを利用して、フリーページを作ることができます。そして作ったフリーページをECサイトの下層ページとして設定することで、Shopifyで下層ページを表示することができます。

今回のブログではShopifyでフリーのページを作成し下層ページとして表示させる方法を説明します。

大きく分けて4つの工程となります。
①フリーページを作成する
②テンプレートテーマを作成する
③作ったフリーページとテンプレートテーマを組み合わせる
④ECサイトの下層ページとして表示させる

Shopifyの管理画面でフリーページを作成する場所

フリーページや下層ページを追加する場合、Shopifyの管理画面から追加することができます。
まずはフリーページの作成方法。

管理画面→オンラインストア→ページ
を選択してください。
すると下記のような画面になります。こちらに表示されているページ「contact」はShopify上ですでに作成済みのページになります。新しく作ったページはこちらに同様に表示されていきます。

ページを追加する場所は、画面右上にある「ページを追加」というボタンになります。

画面が下記のように切り替わります。
ここでフリーのページを追加することで、下層ページとして、ECサイトのフロントの画面、ヘッダーやフッターに表示されるようになります。

まずは画面の説明と操作方法を説明します。

ページを追加の画面説明

この編集画面では下記の項目を編集することができます。

タイトル：ページのタイトル
コンテンツ：ここに作りたいページの内容を入れます
検索結果のプレビュー：編集ボタンをクリックすると下記編集可能になります
　└タイトル：検索結果のタイトルを編集可能
　└説明文：検索結果の説明文を入力を編集可能
　└URLとハンドル：URLハンドルを追加することができます
公開/非公開：公開と非公開の設定と公開日の設定もできます
テーマテンプレート：使用するテンプレートの選択

ここで１つ注意点！

テーマテンプレートを新しく作成しなければECサイトのデザインとして下層ページに表示されません。何も作っていない状態では「contact」しか表示されません。
テーマテンプレートに新しいページを追加する方法は後ほど説明します。

ページを追加の操作方法

タイトルにはこのページのタイトルを入力してください。そして、その下のコンテンツにこのページの内容を記載します。

ここからの説明は基本的な使い方になります。テンプレートを利用して、かっこよくデザインしたい人は一番最後にある「おまけ」で説明しています。
一旦、ここを飛ばして「Shopifyでテーマテンプレートを作成し、下層ページにフリーページを表示させる方法」に進んでください。

ページの中にタイトルを入力する方法

ページ内で見出しを作る場合は、コンテンツに入力したテキストで該当のテキスト（タイトルにしたいテキスト）を選択し、コンテンツメニューにある「A」のアイコンを選択してください。

このようにプルダウンが表示されます。

その中から「見出し1」を選択することで一番大きな見出しを設定することができます。
「見出し2」や「見出し3」に関しては「見出し1」の下に着くタイトルになります。
rizeのテンプレートの場合、このページの名前が「見出し1」としてすでに登録されているので「見出し2」から順に使うことをお勧めいたします。

＜見出しの使い方例＞
見出し１：商品にかける思い
　見出し２：私たちの強み
　　見出し３：完全無添加
　　見出し３：工場直送
　見出し２：私たちの歴史
　　見出し３：商品誕生秘話
　　見出し３：お客様の声を実現したきた

このようなイメージで見出しを作成し、その見出しの下にテキストや画像、表、リストなどが並ぶイメージになります。

ページの中のテキストに色を変えたり装飾する方法

色を変える方法は下記の画面の右側赤枠になります。こちらを選択するとカラーパレットが表示されるのでここを使って色を変更することができます。
変更する際は、変更したい文字を選択してから変更してください。

次に文字に装飾する方法です。上記の画像の左側の赤枠「B I U」と並んでいます。
ここを選択することで文字を装飾することができます。

Bは太文字です。文字を太くすることができます。
Iは斜体です。文字を斜めにすることができます。
Uは下線です。文字の下に下線を引くことができます。←こちらは打ち消し線ですが、本来はテキストの下に下線を引くことができます。

リストを作る方法

コンテンツメニュー内にある「番号つきリスト」を選択することで番号つきのリストを生成することができます。まずは「1. 」の１つ目が表示されます。そのままキーボードの改行を押すと「2. 」が表示されます。同様に「3. 」「4. 」と増やすことができます。

番号つきのリストを解除したいときはキーボードの改行を2回押すと、番号が表示されずに改行され、新しい入力ができるようになります。

画像を挿入する方法

コンテンツメニューの右側にある画像のアイコンを選択すると画像を挿入することができます。
選択すると下記のような画面が表示されます。

この画面から画像を追加したり、すでに追加している画像を選択し、コンテンツの中に画像を挿入することができます。

表をページの中に入れる方法

コンテンツメーニューの表のマークを選択すると下記の画面のようなプルダウンが表示されます。「表を挿入」というボタンを選択することで表が１つだけ表示されます。

このままでは表は１つだけしか表示されません。
追加した表を選択した状態でもう一度コンテンツメニューの「表」のアイコンを選択するとプルダウンの他のメニューも表示されます。これを選択することで複数の表を追加することができます。

「後ろに列を挿入」を選択すると2列の表

「下に行を挿入」を選択すると2行の表

「後ろに列を挿入」と「下に行を挿入」を選択すると2列2行の表を作ることができ、増やすことで複数の行と列を持った表を作成できます。

作っている内容が実際のECサイトでどう表示されているか見たい場合

テキストを入力したり画像を挿入したりしても、入力している画面が小さいので実際の画面でどう表示されているかわからないと思います。

実際のECサイトの画面でどのように見えるか見たい場合下記の画面右上にある「ページを表示」から見ることができます。

「ページを表示」を選択すると実際のECサイトの画面に切り替わります。

ここで実際の画面を見ながら自分が作りたいページを作成してみてください。

コンテンツの編集が終わったら必ず保存してください

編集は終わりましたか？編集が終わったら必ず保存してください。
できれば編集の途中途中で保存をかけるようにしてください。作業している途中で画面が固まる場合があります。
その場合保存されていないデータは全て消えます。

画面上部とコンテンツの画面を一番下までスクロールすると「保存」というボタンがあります。

ここから保存をしてください。

Shopifyでテーマテンプレートを作成し、下層ページにフリーページを表示させる方法

先ほどページコンテンツを作成していた場所から変わります。

管理画面のオンラインショップから「テーマ」をクリックし、画面右にある「…」を選択、そしてプルダウンで開いたメニュー内の「コードを編集」を選択してください。

するとテーマの編集ページへ遷移します。

左サイドバーにあるフォルダ「テンプレート」を選択すると、その中に「＋新しいテンプレートを作成する」というボタンが表示されます。そちらを選択してください。

選択すると、新しいテンプレートを追加するというタイトルと、その下にテンプレートタイプという項目が表示されている画面に切り替わります。

ここでテンプレートタイプを選択してください。すると下記のようなプルダウン一覧が表示されます。
＊プルダウン一覧はShopifyで利用できる下層ページの大元になるデータを選ぶことができます。

今回は通常の下層ページを作成するため、「page」という項目を選択してください。

すると下記の画面に切り替わります。

入力する内容は上記の画像と同じ内容で入力してください。
・JSONと・liquidは・JSONを選択。
ファイル名は他のファイル名と被らないようにするため今回は「concept」というファイル名を入力してください。「page.」と「.json」は自動で付与されます。その間に入る箇所に「concept」と入力してください。

作成するページが会社概要の場合はcompany、お店についてのページの場合はaboutなど、作りたいページに合わせた名称にしてください。

下記の画面のように左側に先ほど作ったテンプレートが表示されます。

画面の青色の枠は何も触らないでください。そのままでOKです。

これでテンプレートの作成が完了となります。

作ったコンテンツページにテンプレートを割り当てる方法

管理画面→オンラインストア→ページ
を選択してください。

そこに先ほど作ったコンセプトページが表示されています。

コンセプトページを選択し開いてください。

先ほどの編集が面が表示されますが、画面右側にあるテーマテンプレートを選択するとプルダウンで「concept」というテンプレートが増えていることがわかります。

「concept」を選択してください。
＊選択後からなず「保存」してください

これで、Shopifyでのフリーページの設定が完了となります。

この後、ECサイトの下層ページとして設定し、フリーページ作成、下層ページ設定は完了となります。

作ったフリーページを下層ページに設定する方法

Shopify管理画面、オンラインストア→メニューを選択してください。

下記の画面が表示されたら、画面中央にある「main menu」を選択して下さい。

選択後下記の画面に切り替わります。

上部画面の下部にある「＋メニュー項目を追加する」を選択して下さい。
すると下記の画面のように右側にサイドバーが表示されます。

そのサイドバーの名前という箇所にメニューで表示したいテキストを入力してください。
＊実際のECサイトのメニューで表示される名称になります。

入力後その下にある「検索またはリンクを貼り付ける」を選択してください。
下記のようにプルダウンメニューが表示されますので「ページ」を選択してください。

先ほど作ったコンセプトページが下記のように表示されると思います。

「コンセプト」を選んで「追加する」のボタンを選択してください。

保存後、「Main menu」の中に「Concept」というメニューが増えています。

その後、必ず「メニューを保存」してください。

これで作ったフリーページをECサイトのメニューに登録し下層ページで表示する方法が完了となります。

では、設定した画面が実際のECサイトでメニューに表示されているか確認してみましょう。

Shopify管理画面のサイドバーにあるオンラインストアにカーソルを合わせると目のアイコンが表示されます。

その目のアイコンを選択すると実際のECサイトの画面を表示させることができます。
＊表示されていない場合：すでに開いていたプレビュー画面の場合、更新されない場合があります。一度プレビュー画面を閉じてから開き直してください。

これで、「【Shopify／htmlの知識不要】フリーページを使って下層ページに設定する方法！」は全て完了となります。

おまけ：フリーページにテンプレートを使ってセクションを追加しデザインする方法

Shopifyの管理画面、オンラインストア→テーマの画面を開いてください。
画面右側にある「カスタマイズ」を選択してください。

テーマの編集画面に切り替わったら画面上部にある「ホームページ」を選択してください。
すると下記の画面のようなプルダウンメニューが表示されます。

プルダウンメニューの中段にあるページを選択してください。

すると先ほど作ったconceptというページが表示されます。
この画面の左サイドバーにある「テンプレート」→「＋セクションを追加」
これを利用しテンプレートに入っているレイアウトでさまざまなデザインを組み合わせることができます。

例えば商品の追加もできます。
単体の商品や複数商品が並ぶコレクションリスト、特集で集めたコレクションなど様々な形式で商品を並べることができます。

また、画像とテキストを組み合わせた2カラムのデザインなどもあります。

このように自分で好きなテンプレートを組み合わせてページを作ることも可能です。