今回は、ストアのボタンやフォント、ヘッダーフッターの設置などのカスタマイズをしていきます。
■このページの目標
- ボタンやフォントの設定方法を理解する
- ヘッダーフッターの設置ができるようになる
ストアの見た目や機能に関わる部分なので、お客様が買いやすいストアにできるようマスターしていきましょう。
1.ヘッダーの設置
まずは、ストアのいちばん上の部分であるヘッダーを設置していきます。
管理画面の「オンラインストア」＞「テーマ」から、「カスタマイズ」をクリックして、カスタマイズ画面を開きましょう。
・メニューの選択
カスタマイズ画面が表示できたら、「ヘッダー」セクションの「ヘッダー」をクリックします。
クリックすると、ヘッダー部分に表示させるメニューの選択ができるので、表示させたいメニューを選択します。
今回は、「ヘッダーメニュー」というタイトルのメニューを設定します。
ヘッダーセクションではメニューを選択する以外に、メニュータイプの設定や配色の設定、配置の設定などができます。
・メニュータイプの選択
メニューを選択する欄の下にメニュータイプを選択するプルダウンがあります。
- ドロップダウン
- メガメニュー
- ドロワー
以上の3種類から設定ができます。
今回は「ドロップダウン」を選択しますが、各種類の表示を試したあと、お好みで設定してみましょう。
・常時表示の設定
「常時表示のヘッダー」の欄では、ヘッダーが表示される時の設定ができます。
- なし
- スクロールアップ時
- 常時
- 常にロゴのサイズを小さくする
以上の4つから設定ができます。
トップページから下にスクロールした際に、ヘッダーメニューをクリックできるようにしておいた方がスムーズにページの移動ができて便利なので、できるだけ表示できるようにしておきましょう。
今回は「スクロールアップ時」を選択します。
・色の設定
続いて「色」の欄では、ヘッダー部分の配色を設定できます。設定には「配色」と「メニューの配色」の二種類があります。
「配色」は、ヘッダー部分の色の変更ができます。
「メニューの配色」はプルダウンのメニューがある場合に、表示されるメニュー部分の配色が変更できます。
ストアのデザインに合わせて配色を変更しましょう。
今回は変更せずに、どちらとも「スキーム：1」を設定しておきます。
・モバイルのレイアウト設定
「モバイルのレイアウト」では、モバイル表示の際のロゴの位置を設定できます。
ロゴの位置は「中央」か「左」のどちらかを選択できます。
モバイルの表示を確認するときは、右上のモバイルのアイコンをクリックして切り替えましょう。
基本的な設定は以上で完了です。
これで、ヘッダーの設置ができました。
2.フッターの設置
続いてフッターの設置をしていきます。
ヘッダーと同じように「フッター」セクションをクリックすると、フッターの設定画面が開きます。
・メニューの選択
フッターに表示させるメニューの選択は、「Information」のブロックをクリックすると表示されます。
フッターに表示される見出しのタイトルもここで変更ができるので、適宜変更してください。
今回は、「Information」で設定しています。
・フッターの表示設定
フッターでは以下の項目の表示について設定ができます。
- メール登録
- Shopでフォロー
- SNSアイコン
- 言語セレクター
- 決済アイコン
- ポリシーリンク
今回は「決済アイコン」の表示をオンにする設定をします。
「決済方法」の欄にある「決済アイコンを表示する」のチェックボックスにチェックを入れることで、表示されます。
これで、フッターの設定は完了です。
3.フォントの設定
次はフォントの設定です。
今回のサイトは、各見出しの文字を太文字に設定します。こちらの設定方法について解説していきます。
フォントの設定は、カスタマイズ画面の左にある、歯車のマークの「テーマ設定」をクリックします。
「テーマ設定」を表示させたら、「タイポグラフィー」を選択するとフォントの設定画面が表示されます。
今回は見出しのフォントを設定するので「見出し」の欄のフォントの「変更」ボタンをクリックします。
今回設定するフォントは、「システムのフォント」ではなく他のフォントである「Inter Semi Bold」です。
「Inter」のフォントクリックして設定したあと、フォント名の下にある文字をクリックして「Semi Bold」を選択します。
これを選択することで、太文字の設定が反映されます。
選択ができたら、右上の「保存」ボタンを忘れずにクリックしましょう。
以上でフォントの設定は完了です。
4.ボタンの設定
最後にボタンの設定について解説します。
ボタンの設定も先ほどのフォントと同じように「テーマ設定」から行います。
今回は、「ボタン」で表示の設定をするとともに、「カラー」設定を変更して色の変更も行います。
まず「テーマ設定」から「ボタン」をクリックすると、設定項目が表示されます。
ここでは、ボタンの以下の項目が設定できます。
- 罫線：太さ、不透過率、角の半径
- 影：不透過率、水平オフセット、垂直オフセット、ぼかし
これらの設定を変更していくことで、ボタンのデザインをカスタマイズできるので、それぞれの項目を変更しながら最適なデザインを見つけましょう。
今回設定するデモサイトのボタンの項目については、画像を参考にしてください。
画像のような設定をすることで、デモサイトのようなボタンの表示ができます。
項目の変更ができたら、右上の「保存」ボタンを忘れずにクリックして反映させましょう。
続いて、色の変更も行います。テーマ設定の「カラー」をクリックし「スキーム1」の色を変更します。
変更する色については、画像を参考にしてください。
以上でボタンの設定も完了しました。
5.アニメーションの設定
「テーマ設定」のなかにある「アニメーション」では、サイトに表示されているクリックする場所の動きを編集することができます。
今回は、以下のように設定しています。
- 「スクロールでセクションを表示する」にチェックを入れる。
- 「ホバー効果」の欄は「垂直リフト」を選択する。
「ホバー効果」を変更することで、表示されている商品画像やボタンに、マウスカーソルが乗ると、少し上に動くようになります。
設定が完了したら、忘れずに画面右上の「保存する」ボタンをクリックして変更を保存するようにしましょう。
6.チェックアウト画面の設定
続いてチェックアウト画面の設定もおこなっていきます。
カスタマイズ画面の上部にある「ホームページ」と表示されているところをクリックし、「チェックアウト」を選択します。
そして、「テーマ設定」の「チェックアウト」を選択すると、チェックアウト画面の設定ができます。
今回は、こちらの欄でロゴ画像の設定を行いましょう。
ロゴ画像を設定すると、チェックアウト画面の左上に表示されます。
表示の位置と、ロゴ画像の大きさを設定できるので、適宜変更するようにしましょう。
以上で設定は完了したので、右上の「保存する」ボタンをクリックして終了です。
まとめ
今回は、トップページに表示させるヘッダーフッターメニューの設定と、フォントとボタンの設定方法について解説しました。
メニューやボタンの設定は、サイトのデザインだけでなく、お客様が使いやすいと感じられるかどうかという部分にも関わってきます。
使いやすいサイトにカスタマイズして、お客様が離脱してしまわないように工夫していきましょう。