Shopifyでのヘッダー＆フッター設定方法 - 基本ノーコードでOK【ECサイト制作ビギナー】
Shopifyテーマカスタマイズで外せない、ヘッダーとフッターの設定を行ってみましょう。
メニューの作り方、特定商取引法に基づく表記などの作り方、テーマ設定の方法など「必ず使う」「よく使う」部分に絞って紹介します。ノーコードで出来ますよ！
制作ストアに関して
以下の操作は、架空の和菓子屋『江戸屋』の為にカスタマイズしたテーマを使用しています。
ですが、今回の操作はShopifyのデフォルト機能、初期テーマ“Dawn”にある機能のみで操作しています。本ブログと一緒にカスタマイズを進めていない方も、参考にしていただける内容となっております。
ヘッダーとファーストビュー設定
サイト全体で使うヘッダーメニューと、ホームページのファーストビューを設定します。
完成イメージは以下のとおりです。
リンク先のページがないと、リンクは作れません。
ですので、必要なページを作成し、リンクを作っていく流れで進めます。
作成するページは、上図、赤い線で囲った２つです。
1.江戸屋とは、のページを作る
ECショップ“江戸屋”を紹介するためのページを作ります。
一般的なサイトでいう「About us」や「わたしたちの思い」などと同系統のページです。
Shopifyのストアダッシュボードから、オンラインストア > ページを開きます。
ページを追加ボタンで、ページの作成画面を開きます。
今回は架空のストアですので、入力内容は適当でOKです。
ページを公開設定にして、保存してください。
これで、１つめのページはできました。
2.カテゴリーの一覧ページを作る
【ページ完成イメージ】
2-1.カテゴリーの一覧ページとは
カテゴリーの一覧ページ＝ピックアップした特定のコレクション（カテゴリー用として作ったコレクション）を一覧表示するページです。
Shopifyでカテゴリー別、のような表示を作りたい場合は、コレクション機能を使って商品をグルーピングする必要があります。そのグループを一覧表示するイメージです。
コレクション機能でのカテゴリー作成方法は、下記記事を御覧ください。
Skillhubブログ
2-2.カテゴリー一覧専用のテンプレートを作る
作りたい“カテゴリー一覧”ページは、コレクションを表示させられるよう、デフォルトとは別のページテンプレートを作成して対応します。
テーマのカスタマイズ画面から、ページのテンプレートを追加しましょう。
コード編集画面から操作しても構いません。
画面上部のプルダウンで、ページを選択。
テンプレートを作成するを選択。
作成するテンプレートの名前、元になるテンプレートを選びます。
名前をcategory、その下はデフォルトの状態で、テンプレートを作成します。
新しく作成したテンプレートのカスタマイズ画面に切り替わります。
セクションを追加から、コレクションリストを選んでください。
ブロック（コレクション）ごとに、表示させたいコレクションを追加していきます。
ブロック数が足りない場合は、コレクションを追加で増やしてください。
コレクションリスト全体の設定を行います。
列数などはお好みに合わせて調整してください。
今回の場合、見出しは空にしておくとページタイトルとぶつかりにくいです。
右上の保存ボタンで、ページテンプレートの設定を保存します。
2-3.カテゴリー一覧ページを作る
ストアダッシュボードに戻ります。
「ページを追加」で、新規ページを作成してください。
タイトルはカテゴリー一覧、種類から探す、など分かりやすいものを入力。
コンテンツは空っぽでも、簡単にページの説明を入れても構いません。
テーマテンプレートをcategoryに設定し、公開設定で保存します。
保存できたら、右上にある「ページを表示」で確認してみましょう。
カスタマイズ画面で設定した、コレクションの一覧表示ができていれば完成です。
ページが狭いのを直したい！
作成したカテゴリーの一覧ページで、ページ機能から入力したタイトルやテキストが右にずれている事が気になった方もいらっしゃるのではないでしょうか。
先に作った「江戸屋とは」も同様に、ヘッダーなどと左端の位置がズレています。
これは、ページのエディター設定部分を囲むdivタグに付けられている「page-width--narrow」クラスが原因です。クラス名の通り、通常のコンテンツ幅よりも狭い（narrow）幅が設定されています。
コンテンツ幅の位置を揃えたい時は、コード編集で「page-width--narrow」クラスを取り除くと良いでしょう。該当ファイルはセクション ディレクトリ内の“main-page.liquid”です。
デフォルトのテンプレートは狭い幅で、カテゴリー表示ページは通常のコンテンツ幅で…と使い分けたい場合は、セクションファイルを複数に分けると良いでしょう。
方法は、下記記事で行っている、ブログ記事テンプレート作成とほぼ同じです。
Skillhubブログ
3.ヘッダーメニューを変更する
ページが出来たら、ヘッダーメニューを設定していきましょう。
メニューの設定は、オンラインストア > メニュー で行います。
メインメニューを開いてください。
必要ないホームとコレクションの項目を削除します。
カタログの編集をクリック。
名前を「商品一覧」に打ち替えて、変更を適用してください。
メニュー項目を追加する、から新しく項目を加えていきます。
まずはカテゴリーを追加してみましょう。
「ストーリー」「おしらせ」も追加してください。
リンクはブログ > それぞれのブログ で設定できます。
左に表示されているのところでドラッグすると、メニューの順番を変更できます。
順番を整えたら、メニューを保存してください。
オンラインストアを表示して、反映されているか確認してみましょう。
メニュー設定完了です。
ヘッダーメニューの表示設定
メニューに表示する項目（リンク）の設定は、メニュー設定から行います。
それ以外、例えば上下余白や背景色の変更、ロゴの表示、などはテーマのカスタマイズ画面の方で設定します。ヘッダーに表示するメニューも、カスタマイズ画面から変更可能です。
4.画像バナー（ファーストビュー）を設定
ホームページに大きく表示される画像、セクション名“画像バナー”となっている箇所を設定します。ECサイトの顔、と言える部分ですね。
画像バナーセクションでは、セクション全体で画像とコンテンツ位置の設定、ブロックで画像上に表示されているテキストの設定が行なえます。
4-1.カバー画像を設定
全体に表示される画像を設定してみましょう。
カバー画像の変更 > 画像を選択 を選択します。
サイドバーが画像に切り替わります。
お手持ちの画像がある方は、ライブラリータブの「アップロードする」から画像のアップロードが可能です。アップロードしてみましょう。
画像を探すのが面倒な方は、無料の画像タブでShopifyが用意している画像も使えます。
アップロードした画像を選択すると、リアルタイムでプレビューに反映されます。
OKなら、右下の選択するボタンで確定しましょう。
今回は他の設定は必要ないので、保存するボタンで確定しました。
デスクトップのコンテンツ位置などもセクション設定で変更できます。
試してみたい方は、サイトバーの各項目を調節してみてください。
4-2.テキスト部分を設定
次に、画像バナーの中にある3つのブロック。
見本では、文字の打ち替えのみ行いました。
画像上はショップ名もしくはキャッチコピーのみ、のようなシンプルな構成でも良いですね。このあたりは、デザインやお好み合わせて調整してください。
5.画像バナー下、リッチテキストを入力
見出しにTalk about your brandと書かれている、リッチテキストのセクション。
こちらも、まずは見出しとテキストをそれぞれ打ち替えましょう。
見本通りではなくても構いませんので、文字を打ち替えてみてください。
ブロックを追加 からボタンを選択します。
最初のボタンのラベルを「詳しく見る」に打ち替え。
リンクを設定し、アウトラインボタンのスタイルを使用します。
セクション間の余白が少し狭いですね。
セクションの設定で、見やすいように余白を変更してみました。
保存したら、ホームページ上部の設定は完了です。
テーマ全体の設定
テーマのカスタマイズ画面の右側にある、刷毛のようなアイコン“テーマ設定”からは、テーマ全体のフォントや配色などを行うことが出来ます。
テーマ設定を変更してみよう
テーマ設定の一番上“色”の項目では、テーマ全体の配色を変更できます。
テーマの配色とは、セクションなどの「配色」で使われている色です。
円形に色が表示されている部分をクリックすると、色の変更が出来ます。
どこか色を変更してみましょう。
そのほかに、下記のような設定もテーマ設定で行っています。
- レイアウト：サイトのコンテンツ幅、セクション間のスペース
- ボタン＆バリエーションのピル型ボタン：罫線の太さ、角の半径
- 入力：フォームなどお客様入力箇所の表示設定
項目名からイメージできるものが多いですね。
開発ストア・お試し用のテーマなどで触ってみると良いでしょう。
日本語フォントは？
テーマ設定の上から２番目“タイポグラフィー”。
こちらでは、見出しと本文テキスト、それぞれの大きさとフォント（書体）が設定できるようになっています。
フォントの「変更」ボタンをクリックすると、利用できるフォントがたくさん表示されます。
数クリックで簡単にフォント変更が可能……なのですが、Shopifyデフォルトでは日本語フォントはありません。
日本語メインのECだと、日本語部分はゴシック体系か明朝体系かの切り替えのみ、英数字にだけ指定フォントが適用される、と残念な表示になってしまいます。
【例】
日本語でフォントを指定したい場合は、以下3つの方法が使えます。
- CSSでシステムフォント+総称フォントを指定する
- Google FontsなどのWebフォントを使う
- Shopifyアプリを導入する（Fontify、リテリア Font Pickerなど）
コード編集ができる場合、1か2の方法で対応可能です。
本シリーズであれば、作成したedoya.cssに font-familyの指定追加で出来ます。
GoolgeFonts(Zen Old Mincho)使用例 - edoya.css
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;700&display=swap');
*, h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4, .h5 {
font-family: 'Zen Old Mincho', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝','Yu Mincho', '游明朝体', 'YuMincho','ＭＳ Ｐ明朝', 'MS PMincho', serif;
}
Shopifyテーマへの自作CSS追加、GoogleFontsの使い方は、下記の記事で紹介しています。
テーマ設定のカートとチェックアウト
テーマ設定の下の方には“カート”と“チェックアウト”という項目があります。
カートはショッピングカート、チェックアウトは決済ページです。
チェックアウトの設定は、テンプレートをチェックアウトにすると分かりやすいです。
テーマ設定 > カートの項目は、商品をカートに追加したときの表示方法が中心。
商品ページから「カートに追加する」を実行すると、設定による違いが分かりやすいかと思います。
法的情報入力・フッター設定
フッターには利用規約や、特定商取引法に基づく表記など、ECサイトの利用・売買に関わる情報へのリンクを掲載することが多いです。
Shopifyこうしたページを作る方法、フッターへの追加方法を紹介します。
法務関連の設定を行う
ECサイトに必要な表記を作成します。
最低でも特定商取引法に基づく表記と利用規約のページは作っておきましょう。
- 特定商取引法に基づく表記
- 利用規約
- プライバシーポリシー
- 返金ポリシー
- 配送ポリシー
これらはShopifyのストア設定から一気に作成が可能です。
管理画面右下の設定を開いて、サイドメニューからポリシーを選んでください。
ポリシーの設定画面が開きます。
それぞれの項目ごとに、入力箇所が用意されています。
運用予定のストアを作成される場合は、ストアに合わせて登録を進めてください。
テーマのテスト制作で、架空のストアという場合は、テンプレートを使わせていただきましょう。下記のnoteではShopify向けのテンプレートが公開されています。
ポリシーを登録できたら、保存してください。
メニューからポリシーへのリンクを作る
ストア管理画面、オンラインストア > メニュー を開きます。
メニューを追加する、で新しいメニューを作成してください。
タイトルとハンドルに、わかりやすい名称を入力します。
メニュー項目を追加する をクリック。
名前に「特定商取引法に基づく表記」と入力します。
リンクは表示される選択肢から、Policiesを選んでください。
Legal Noticeを選択。
追加するボタンで、メニュー項目に追加します。
同様の流れで、設定 > ポリシーで作成したポリシー類を全てメニューに加えます。
選択肢は日本語化されていませんが、以下のようになっています。
| Legal Notice | 特定商取引法に基づく表記 |
| Privacy Policy | プライバシーポリシー |
| Refund Policy | 返金ポリシー |
| Shipping Policy | 配送ポリシー |
| Terms of Service | 利用規約 |
メニュー項目の追加・表示したい順での並び替えが終わったら保存してください。
カスタマイズ画面でフッターを設定
作成したメニューを、フッターに追加します。
オンラインストア > テーマ から、テーマのカスタマイズ画面を開きます。
フッターを選択して、ブロックのリストを表示させてください。
デフォルトでは3カラム（3ブロック）横並びですが、今回のデザインは２つでOK。
一番上のQuick Linksを非表示にして、2番めのInfoを選択してください。
メニューを変更します。
先ほど作成した、ポリシー類へのリンクをまとめたメニューを選択してください。
見出しの文言は打ち替えても、空にしても構いません。
保存して、設定を反映させてください。
そのほかフッターの調整
メニューではない方のブロック
デフォルトで“Our mission"となっているテキストブロックを、上に移動させます。
見出し・サブテキストはお好きに打ち替えてください。
サブテキストの一部分のみリンクテキストにしたい場合は、リンク箇所を選択した状態で“リンクを挿入”を使います。
背景色・メールアドレス登録
フッターの背景色と、メ―ルアドレス登録を促す「Subscribe to our emails」は、フッターセクションの設定から変更できます。
ここは選択する、打ち替えるくらいの操作ですね。
選択可能な色は、テーマ設定 > 色 から設定してください。
SNSアイコン
最後に、ストアのSNSを見てもらうためのリンク部分。
SNSアイコンの項目にはデフォルトでチェックが入っていますが、フッターのどこにもSNSのアイコンは表示されていません。
これは注釈にあるように、テーマ設定からSNSの登録が必要なためです。
登録しているSNSがあれば、そのアイコンが自動的に表示される仕様です。
残念ながら、ピックアップしたSNSのアイコンだけ表示したい、など細かい設定までは出来ません。同様にヘッダーにFacebookとinstaだけアイコンでリンクを…などもデフォルトのカスタマイズ機能ではできません。
コード編集でのカスタマイズができると、こうした痒いところにも手が届くようになるのが魅力かなと思います。
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
11月24日まで