【Shopify マスターへの道】#12 About ページを作成しよう

1. ストア構築の準備をしよう
2. 商品を登録しよう
3. コレクションを登録しよう
4. ブログ記事を作成しよう
5. サイトのデザインを選ぼう
6. テーマを編集しよう（セクション編）
7. テーマを編集しよう（テーマ設定編）
8. トップページ以外を編集しよう
9. サイトのフォントを編集しよう
10. アカウントページを作成しよう
11. コンタクトフォーム を作成しよう
12. About ページを作成しよう（← 今回はここ）
13. 規約を入力しよう
14. メニューの編集をしよう
15. 送料を設定しよう
16. 一般設定を編集しよう
17. 各種設定を編集しよう
18. 決済テストを行おう
19. ストアの所有権を移行しよう

今回は、liquid ファイルを編集して About ページを作成します。HTML や CSS の知識がかなり必要になります。liquid ファイルの構造の説明も行います。ノーコードで構築する部分以外もある程度できたほうが、構築の幅が広がりますので、頑張ってついてきてきてください。

では、いきましょう！

今回の目標

• 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 ファイルの構造について書いてありますので、ぜひ読んでみてください。

Shopify の Liquid ファイルの構造の話 ①

Shopify の 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.liquid というテンプレートを作成する
• テキスト付き画像のセクションをもとに、About ページ用のセクションを作成する
• 作成した About ページ用のセクションを page.about-us.liquid で呼び出す
• CSS を追記してレイアウトを整える

では、実際に新しいページを作成していきましょう！

About ページを作成する前の準備

Shopify ストアの管理画面へログインします。コードを編集するので、テーマをコピーしておきます。「オンラインストア > テーマ > 現在のテーマ > アクション > 複製する」でテーマをコピーします。

テーマの名前を変更しましょう。「テーマライブラリ > アクション > 名前の変更」から名前を変更します。「Brooklyn-Custom-Code-AddAboutPage」としておきます。

複製したテーマを公開します。「テーマライブラリー > アクション > 公開する」でテーマを公開してください。モーダルが出てくるので、「公開する」をクリックしましょう。

現在のテーマが、「Brooklyn-Custom-Code-AddAboutPage」になっていれば OK です。

次にコードを編集する画面とテーマのカスタマイズ画面を別タブで開いておきます。これは、何度も画面を行き来するためです。
「現在のテーマ > カスタマイズ」と「現在のテーマ > アクション > コードを編集する」を別タブで開きます。別タブで開くには「command + クリック（Windows の場合は control + クリック）」します。

この段階で、「管理画面」「テーマのカスタマイズ画面」「コードの編集画面」が開いているようにします。

以上で準備は完了です。実際にコードを編集していきます。

新しいページテンプレートを作成する

では、新しいページテンプレートである「page.about-us.liquid」ファイルを作成します。

コードの編集画面へいきましょう。「Templates」フォルダの中に「新しい template を追加する」とあるので、クリックします。

モーダルが開き、追加するテンプレートの「目的」と「名前」を入力するように求められます。「目的」はドロップダウンメニューの中から「page」を選び、「名前」には「about-us」と入力してください。入力したら「テンプレートを作成する」をクリックしましょう。

「page.about-us.liquid」というファイルが作成されれば OK です。ファイル名は「[目的].[名前].liquid」という命名規則に準じて自動的につけられます。名前の変更はできないので気をつけましょう。

管理画面でページを作成する

ここまでできたら、一度管理画面のタブへ移動します。「オンラインストア > ページ > ページを追加」から新規ページを作成します。前回、ページを追加する際の設定方法については一通り説明しているので、細かい部分は割愛します。

ページを追加したら「Title」を入力します。「Title」には「About Us」と入力しましょう。「コンテンツ」は何にも入力しなくて大丈夫です。

次が大事なところです。「テンプレート」を先ほど作成した「page.about-us」にします。この設定をすることで、新しく作成した About ページは「page.about-us.liquid」に記述されたレイアウト表示になります。

「公開/非公開」の設定が「公開」になっていることを確認して、「保存」します。（検索結果のプレビューについての設定は割愛します。）

ページが作成されていることを確認します。テーマのカスタマイズ画面へ移動し、「About Us」ページのカスタマイズ画面を開きます。「About Us」が表示されない場合は、ページを一度リロードしてみてください。それでも表示されなければ、管理画面で正常にページが作成されているか確認しましょう。

このように、About ページが作成されてれば OK です。

新しいセクションを作成する

それでは、About ページにセクションを追加していきます。コードの編集画面を開きます。既存のテキスト付き画像のセクションのコードを元に作成します。

新しいセクションのファイルを追加する

「Sections」フォルダを開くと出てくる「新しい section を追加する」をクリックします。

追加するセクションのファイル名を決めるモーダルが表示されるので、ファイル名を入力します。テキスト付き画像のセクション名は、「featured-row.liquid」なので、「featured-row-for-about-us」と入力しましょう。入力したら「セクションを作成」をクリックし、セクションを追加します。

このように「featured-row-for-about-us.liquid」ファイルが作成されれば OK です。

コードを貼り付ける

参考にする「featured-row.liquid」に記述してあるコードをコピーします。

「Sections」フォルダの中にある「featured-row.liquid」を開きます。全てのコードをコピーしてください。

コピーしたら「featured-row-for-about-us.liquid」ファイルのコードを全て削除し、貼り付けます。

貼り付けたら一度保存しましょう。

テンプレートファイルでセクションを呼び出す

では、作成した「featured-row-for-about-us.liquid」ファイルを「page.about-us.liquid」ファイルで呼び出します。

「page.about-us.liquid」ファイルを開いてください。

まず、ページのコンテンツの部分を表示させているコードを削除します。10 – 16 行目のコードを削除します。

削除した部分のコードを軽く説明しておきます。削除したコードは、ページを作成した際に入力した「コンテンツ」を表示させるコードです。今回は、コンテンツには何も入力せず、ページにも表示させる予定はないので、コードを削除しています。

コードを削除した 10 行目に以下のコードを貼り付けてください。liquid のテンプレートファイルでは「{% section ‘セクションのファイル名’ %}」とすることで、任意のセクションを呼び出すことができます。

{% section 'featured-row-for-about-us' %}

コードを貼り付けたら、ファイルを保存しカスタマイズ画面で確認します。カスタマイズ画面をリロードします。

このようにテキスト付き画像のセクションが追加され、ページにも表示されていれば OK です。

画像とテキストを入れる

実際に画像とテキストを入れてみましょう。セクションの設定項目はコピー元の「テキスト付き画像（featured-row.liquid）」と全く同じです。

「テキスト付き画像」をクリックし、「画像」と「見出し」と「テキスト」を設定します。
画像は「About_Us_A.jpg」、「見出し」は「美しい女性に贈る」を入れましょう。テキストはお好きに設定してください。

画像を設定できたら一度保存しておきましょう。

追加したセクションを編集する

セクションを完成形に近づけていきます。完成形をみてみましょう。

変更点は以下の三つです。

• カラムの幅をヘッダーと同じ幅まで広げる
• 画像とテキストの幅の割合を 65%と 35%にする
• セクション間に余白を入れる

それぞれ編集していきます。

カラム幅を広げる

もともと、page テンプレートはカラム幅が狭くなっています。そのため、コンテンツ部分が入っている

{% unless request.page_type == "index" %}
  <div class="wrapper">
{% endunless %}

{% unless request.page_type == "index" or template == "page.about-us" %}



  {% endunless %}

{% if section.settings.layout == 'left' %}
  {{ media_layout }}
{% endif %}

<div class=”image-about-us”>
  {{ media_layout }}
</div>

<style>
</style>

.image-about-us {
 width: 65%;
}

@media (max-width:769px) {
 .image-about-us {
   width: 100%;

  }
}

style="margin-bottom:30px;"

"presets": [
  {
  "name": {
    "ja": "テキスト付き画像"
  },
    "category": {
    "ja": "画像"
  }
}
]

{% section 'featured-row-for-about-us-2' %}
{% section 'featured-row-for-about-us-3' %}