テーマのカスタマイズ画面を使って、ファーストビューの画像やテキストを設定していきましょう。サイト全体の設定を行う“テーマ設定”の見方や、フォントの変更方法も解説します。
ホームページ上部の設定
サイトの顔とも言える、トップページの上部を設定してきましょう。 テーマのカスタマイズ画面から、画像や文字を差し替えていきます。
リンクを設定するため、赤い線で囲った“江戸屋とは”のページも合わせて作成します。
1.「江戸屋とは」ページを作成する
ECショップ“江戸屋”を紹介するためのページを作ります。 よくある「About us」や「わたしたちの思い」などと同系統のページです。
Shopifyのストアダッシュボードから、オンラインストア > ページを開きます。 ページを追加ボタンで、新しいページを作成してください。
ページのタイトルを「江戸屋とは」にします。 今回は架空のストアですので、入力内容は適当でOKです。
ページを公開設定にして、保存してください。
2.画像バナー（ファーストビュー）を設定
ホームページに大きく表示される画像、セクション名“画像バナー”となっている箇所を設定します。ECサイトの顔、と言える部分ですね。
画像バナーセクションでは、セクション全体で画像とコンテンツ位置の設定、ブロックで画像上に表示されているテキストの設定が行なえます。
2-1.カバー画像を設定
全体に表示される画像を設定してみましょう。
画像バナーセクションを選択。 最初の画像の下にあるプルダウンから「画像を選択」を選びます。
サイドバーが画像に切り替わります。 お手持ちの画像がある方は、ライブラリータブの「アップロードする」から画像のアップロードが可能です。無料の画像タブでShopifyが用意している画像も使えます。
どちらを使っても良いので、画像を入れてみてください。 以下はアップロードした場合の画面表示です。
画像を選択すると、リアルタイムでプレビューに反映されます。 OKなら、右下の選択するボタンで確定しましょう。
今回は他の設定は必要ないので、保存するボタンで確定。
デスクトップのコンテンツ位置などもセクション設定で変更できます。 試してみたい方は、サイトバーの各項目を調節してみてください。
2-2.テキスト部分を設定
次に、画像バナーの中にある3つのブロック。 見本では、テキスト部分のみを変更しました。
画像上はショップ名もしくはキャッチコピーのみ、のようなシンプルな構成でも良いですね。このあたりは、デザインやお好み合わせて調整してください。
3.画像バナー下、リッチテキストを入力
見出しにTalk about your brandと書かれている、リッチテキストのセクション。
こちらも、まずは見出しとテキストを入力しましょう。 見本通りではなくても構いませんので、文字を打ち替えてみてください。
ブロックを追加 からボタンを選択します。
最初のボタンのラベルを「詳しく見る」に打ち替え。 リンクを設定し、アウトラインボタンのスタイルを使用します。
セクションの設定で、余白などを調整してください。
保存したら、ホームページ上部の設定は完了です。
テーマ全体の設定
テーマのカスタマイズ画面の右側にある、刷毛のようなアイコン“テーマ設定”からは、テーマ全体のフォントや配色などを行うことが出来ます。
テーマ設定を変更してみよう
テーマ設定の一番上“色”の項目では、テーマ全体の配色を変更できます。 テーマの配色とは、セクションなどの「配色」で使われている色です。
円形に色が表示されている部分をクリックすると、色の変更が出来ます。 どこか色を変更してみましょう。
そのほかに、下記のような設定もテーマ設定から行えます。
- レイアウト：サイトのコンテンツ幅、セクション間のスペース
- ボタン＆バリエーションのピル型ボタン：罫線の太さ、角の半径
- 入力：フォームなどお客様入力箇所の表示設定
項目名からイメージできるものが多いですね。 開発ストア・お試し用のテーマなどで触ってみると良いでしょう。
日本語フォントは？
テーマ設定の上から２番目“タイポグラフィー”。 こちらでは、見出しと本文テキスト、それぞれの大きさとフォント（書体）が設定できるようになっています。
フォントの「変更」ボタンをクリックすると、利用できるフォントがたくさん表示されます。
数クリックで簡単にフォント変更が可能。 ……なのですが、Shopifyデフォルトでは日本語フォントはありません。
日本語メインのECだと、日本語部分はゴシック体系か明朝体系かの切り替えのみ、英数字にだけ指定フォントが適用される、と残念な表示になってしまいます。
【例】
Shopifyテーマで日本語でフォントを指定するには、以下3つの方法があります。
- 1. 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;
}
GoogleFontsの使い方は、下記ブログをご確認ください。
Skillhubブログ
テーマ設定のカートとチェックアウト
テーマ設定の下の方には“カート”と“チェックアウト”という項目があります。 カートはショッピングカート、チェックアウトは決済ページです。
チェックアウトの設定は、テンプレートをチェックアウトにすると分かりやすいです。
テーマ設定 > カートの項目は、商品をカートに追加したときの表示方法が中心。 商品ページから「カートに追加する」を実行すると、設定による違いが分かりやすいかと思います。
カートやチェックアウトは、のちのレッスンで行う「テスト購入」で使います。 一度購入者目線で使用してからカスタマイズすると良いでしょう。