- ストア構築の準備をしよう
- 商品を登録しよう
- コレクションを登録しよう
- ブログ記事を作成しよう
- サイトのデザインを選ぼう
- テーマを編集しよう（セクション編）
- テーマを編集しよう（テーマ設定編）
- トップページ以外を編集しよう
- サイトのフォントを編集しよう
- アカウントページを作成しよう
- コンタクトフォーム を作成しよう
- About ページを作成しよう（← 今回はここ）
- 規約を入力しよう
- メニューの編集をしよう
- 送料を設定しよう
- 一般設定を編集しよう
- 各種設定を編集しよう
- 決済テストを行おう
- ストアの所有権を移行しよう
前回は、コンタクトフォームを作成しました。
前回の記事はこちら
今回は、liquid ファイルを編集して About ページを作成します。HTML や CSS の知識がかなり必要になります。liquid ファイルの構造の説明も行います。ノーコードで構築する部分以外もある程度できたほうが、構築の幅が広がりますので、頑張ってついてきてきてください。
では、いきましょう！
今回の記事は以下の記事を参考にしています。
【Shopify マスターへの道】#12 About ページを作成しよう
今回の目標
- liquid ファイルについて理解する
- liquid ファイルを編集して About ページを作成する
- セクションを作成して、About ページに反映させる
デモサイトを構築する際に使用する商品画像や CSV ファイルのダウンロードをしてない方はこちらからダウロードしてください。
【Shopify マスターへの道】商品画像・CSV ファイルのダウンロード
About ページを作成する際におすすめのアプリ
まず最初に、About ページを作成する際におすすめのアプリをご紹介します。
ノーコードで「会社概要」を追加することができる「About ページらくらく作成 | リテリア About Us」というアプリです。
About ページらくらく作成 | リテリア About Us
こちらのアプリを使用すると、ノーコードで簡単に About ページに「会社概要」として使用できる表を挿入することができます。
以下の解説記事に使い方が詳しく載っているので、アプリを導入する際は是非参考にして下さい。
Shopify ストアの About ページに表を埋め込むことができるアプリ「リテリア About Us」を解説
目標のページを確認する
liquid ファイルを編集することで About ページを作成します。About ページには、ブランドの理念などを書きます。特にブランドイメージを大切にする企業なら、力を入れて作成するべきページです。
Shopify のデフォルトのページだと、リッチなレイアウトのページを作成することができません。そこで、新たなページテンプレートを作成し、既存のセクションのコードを書き換えることで About ページを作成します。
次の画像のような About ページを目指します。
今回は少し難しい内容になっています。ただ、コードを編集してページを作れるようになると、ストア構築の幅が広がります。その意味も込めて、既存のセクションを用いたページテンプレートの作成は知っておいて損はないと思います。ぜひ、最後まで頑張ってページを作り上げていただきたいです。
コードの編集は難しいという方には、ページビルダーアプリをおすすめします。「Shogun Landing Page Builder」や「PageFly‑ Advanced Page Builder」が有名どころです。これらのアプリでは、ノーコードでページを簡単に作成することができます。コードを全く書いたことがない方は、こちらをおすすめします。
liquid のファイル構造と見た目の関係
これから本格的に liquid ファイルを編集していくわけですが、まずは liquid ファイルの構造と見た目の関係について少し解説しておきたいと思います。
liquid ファイルの全体像
liquid ファイルの全体像については、以下の記事にお任せします。株式会社 UnReact が Qiita で発信している技術記事です。詳しく liquid ファイルの構造について書いてありますので、ぜひ読んでみてください。
読んでいただけると、今回の話についてもしっかりと理解してついて来れると思います。
liquid ファイルの親子関係
liquid ファイルの親子関係についても少し触れておきます。
liquid ファイルには、親子関係が存在します。親子関係は「Layout > Templates > Sections > Snippets」となっています。
「Layout」が一番親のファイルで、私たちが Shopify で作られたページにアクセスした際、目にしているのは「Layout」ファイルがレンダリングされたものです。
「Templates」は、「Layout」の中で呼び出されます。私たちが目にしているのは常に「Layout」ファイルですが、URL により見た目が変化するのは「Layout」の中で呼び出される「Templates」が変わるからです。
「Sections」は、「Templates」の中で呼び出されます。「Templates」でどのような編集ができるかは、どのような「Sections」が呼び出されているかに依存します。
「Snippets」は、「Sections」の中で呼び出されます。「Snippets」は再利用するために作られた最小部品です。さまざまな「Sections」で呼び出すことでコードを省略することができます。
イメージはこんな感じです。
ここまでを理解した上で、About ページは以下の手順で作ります。
- page.about-us.json というテンプレートを作成する
- テキスト付き画像のセクションをもとに、About ページ用のセクションを作成する
- CSS を追記してレイアウトを整える
では、実際に新しいページを作成していきましょう！
About ページを作成する前の準備
Shopify ストアの管理画面へログインします。コードを編集するので、テーマをコピーしておきます。「オンラインストア > テーマ > 3 点リーダー > 複製する」でテーマをコピーします。
複製したテーマの名前を変更しましょう。「3 点リーダー > 名前を変更」から名前を変更します。「Dawn-Custom-Code-AddAboutPage」としておきます。
複製したテーマを公開します。「メインテーマとして設定」をクリックしてテーマを公開してください。
現在のテーマが、「Dawn-Custom-Code-AddAboutPage」になっていれば OK です。
次にコードを編集する画面とテーマのカスタマイズ画面を別タブで開いておきます。これは、何度も画面を行き来するためです。
「カスタマイズ」と「3 点リーダー > コードを編集する」を別タブで開きます。別タブで開くには「command + クリック（Windows の場合は control + クリック）」します。
この段階で、「管理画面」「テーマのカスタマイズ画面」「コードの編集画面」が開いているようにします。
以上で準備は完了です。実際にコードを編集していきます。
新しいページテンプレートを作成する
では、新しいページテンプレートである「page.about-us.json」ファイルを作成します。
コードの編集画面へいきましょう。「templates」フォルダの中に「新しいテンプレートを追加する」とあるので、クリックします。
モーダルが開き、追加するテンプレートの「ファイル拡張子」と「ファイル名」を入力するように求められます。「ファイル拡張子」は json を選び、「ファイル名」には「about-us」と入力してください。入力したら右下の「完了」をクリックしましょう。
「page.about-us.json」というファイルが作成されれば OK です。ファイル名は「[テンプレートファイル].[ファイル名].「選択した拡張子」」という命名規則に準じて自動的につけられます。名前の変更はできないので気をつけましょう。
管理画面でページを作成する
ここまでできたら、一度管理画面のタブへ移動します。「オンラインストア > ページ > ページを追加」から新規ページを作成します。前回、ページを追加する際の設定方法については一通り説明しているので、細かい部分は割愛します。
ページを追加したら「Title」を入力します。「Title」には「About Us」と入力しましょう。「コンテンツ」は何も入力しなくて大丈夫です。
次が大事なところです。「テンプレート」を先ほど作成した「page.about-us」にします。この設定をすることで、新しく作成した About ページは「page.about-us.json」に記述されたレイアウト表示になります。
「公開/非公開」の設定が「公開」になっていることを確認して、「保存」します。（検索結果のプレビューについての設定は割愛します。）
ページが作成されていることを確認します。テーマのカスタマイズ画面へ移動し、「About Us」ページのカスタマイズ画面を開きます。「About Us」が表示されない場合は、ページを一度リロードしてみてください。それでも表示されなければ、管理画面で正常にページが作成されているか確認しましょう。
このように、About ページが作成されてれば OK です。
新しいセクションを作成する
それでは、About ページにセクションを追加していきます。コードの編集画面を開きます。既存のテキスト付き画像のセクションのコードを元に作成します。
新しいセクションのファイルを追加する
「sections」フォルダを開くと出てくる「新しいセクションを追加する」をクリックします。
追加するセクションのファイル名を決めるモーダルが表示されるので、ファイル名を入力します。テキスト付き画像のセクション名は、「image-with-text.liquid」なので、「image-with-text-for-about-us」と入力しましょう。入力したら「セクションを作成」をクリックし、セクションを追加します。
このように「image-with-text-for-about-us」ファイルが作成されれば OK です。
コードを貼り付ける
参考にする「image-with-text.liquid」に記述してあるコードをコピーします。
「sections」フォルダの中にある「image-with-text.liquid」を開きます。全てのコードをコピーしてください。
コピーしたら「image-with-text-about-us.liquid」ファイルのコードを全て削除し、貼り付けます。
貼り付けたら、112 行目の name を「Image with text about us」に変更してください。最後に、右上の「保存」をクリックしましょう。
「About」ページで、「セクションを追加」をクリックし、一番下のセクション「テキスト付き画像」を選択してください。
スキーマの名前が「Image with text about us」になっているのを確認したら、「保存する」をクリックして設定を保存してください。
画像とテキストを入れる
実際に画像とテキストを入れてみましょう。セクションの設定項目はコピー元の「テキスト付き画像（image-with-text.liquid）」と全く同じです。
「Image with text about us」をクリックし、「画像」を設定します。
画像は「About_Us_A.jpg」を入れましょう。
次に、「Image with text」をクリックして、見出しに「美しい女性に贈る」を設定してください。見出しのサイズは、「小」を選択してください。
「ボタン」を削除しておきましょう。削除ボタンをクリックしてください。削除したら、保存をしてください。
プレビューが以下のようになっていれば OK です。
追加したセクションを編集する
セクションを完成形に近づけていきます。完成形をみてみましょう。
変更点は以下の三つです。
- 画像とテキストの幅の割合を 65%と 35%にする
- セクション間に余白を入れる
それぞれ編集していきます。
画像とテキストの幅を調整する
新たに作成したテキスト付き画像セクションの画像とテキストの幅の割合を 65%と 35%になるように編集していきます。
「image-with-text-about-us.liquid」を開いてください。このファイルには、「テキスト付き画像」の HTML などが記載されています。
「assets」フォルダ内の「component-image-with-text.css」を開いてください。このファイルには、「image-with-text.liquid」の CSS が記載されています。
まず、「image-with-text-about-us.liquid」で、画像を表示させているコードを探します。コードを読むと 31 – 61 行目で画像部分の表示が記述されています。
31 行目の div タグのクラスに image-for-about-us というクラスを追加してください。
また、「component-image-with-text.css」に、以下の css を記載してください。
.image-for-about-us {
width: 100%;
@media (min-width:768px) {
width: 65%;
}
}
記載したら右上の「保存」をクリックしてください。
現時点でのプレビューは以下のようになっています。
次に、「image-with-text-about-us.liquid」で、テキストを表示させているコードを探します。コードを読むと 62 – 104 行目でテキスト部分の表示が記述されています。
62 行目の div タグのクラスに text-for-about-us というクラスを追加してください。
また、「component-image-with-text.css」に、以下の css を記載してください。
.text-for-about-us {
width: 100%;
@media (min-width:768px) {
width: 35%;
}
}
プレビューで確認すると、以下のようになります。
作成したセクションを追加する
次に作成したセクションを追加します。
「セクションを追加」をクリックします。
スクロールして、一番下の「テキスト付き画像」を選択してください。
次に、「デスクトップ画像の配置」の「右」を選択してください。
また、同じセクションをもう一つ追加してください。
追加したテキスト付き画像をカスタマイズする
新たに About ページに追加したセクションに画像とテキストを追加します。セクションのカスタマイズの仕方はもう大丈夫ですよね？
見本を見ながら自分の力でやってみましょう！
画像は「About_Us_B.jpg」と「About_Us_C.jpg」を使用してください。
以上で About ページは完成です！！
まとめ
今回は、liquid ファイルを編集して新しいページを作成しました。コードを編集することでページを追加できるようになると、サイト構築の自由度が格段に上がるので、ぜひマスターしましょう！
liquid についてわからないところがあれば、公式ドキュメントで調べてみましょう。公式ドキュメントは英語で書かれていますが、Google 翻訳や DeepL を使えば読めると思います。便利な時代ですよね。
今回の記事は以下の記事を参考にしています。
【Shopify マスターへの道】#12 About ページを作成しよう
今回の振り返り
- liquid ファイルについて理解できた
- liquid ファイルを編集して About ページを作成できた
- セクションを作成して、About ページに反映させることができた
今回は、長い記事になってしまいました。お疲れ様でした。
次回は、規約を入力していきます。
次回の記事はこちら
また、以下のようなアプリを使うことでコーディングなしで簡単にページをアレンジすることができます。
- シンプルスライドショー｜お手軽画像スライダー
「シンプルスライドショー｜お手軽画像スライダー」は、ストアにノーコードでスライドショーを表示できるアプリです。
Shopify にスライドショーを追加して画像をスライダー表示できるアプリについて徹底解説｜ご利用ガイド
- シンプル流れるロゴ｜流れるロゴリスト挿入アプリ
「シンプル流れるロゴ｜流れるロゴリスト挿入アプリ」は、ストアにノーコードで流れるロゴリストを挿入できるアプリです。
Shopify に流れるロゴリストを設置して画像のスライドショーを表示できるアプリについて徹底解説｜ご利用ガイド
- シンプル余白調整｜お手軽レイアウト
「シンプル余白調整｜お手軽レイアウト」は、ストアにノーコードで余白を挿入できるアプリです。
Shopify に余白（マージン）を挿入してページデザインの調整ができるアプリについて徹底解説｜ご利用ガイド
- シンプル画像バナー｜お手軽広告バナーアプリ
「シンプル画像バナー｜お手軽広告バナーアプリ」は、ストアにノーコードで画像バナーを挿入できるアプリです。
Shopify に画像バナーを追加できるアプリについて徹底解説｜ご利用ガイド
- シンプル流れる告知｜流れるお知らせ挿入アプリ
「シンプル流れる告知｜流れるお知らせ挿入アプリ」は、ストアにノーコードで流れる告知を挿入できるアプリです。
.png&w=1920&q=75)
.png&w=1920&q=75)
.png&w=1920&q=75)
.png&w=1920&q=75)
