#8 テーマ設定

前回に引き続き、テーマに関する設定方法を解説していきます。

今回解説するのは、テーマ全体に関わるデザインの設定方法です。

サイト全体のフォントや基本的な配色の設定などがあるので、おさえておきましょう。

ECサイトで大切な、カートページと決済ページのレイアウト設定についても解説しているので、適切に設定し買ってもらいやすいサイトを目指しましょう。

今回の記事は機能を知るというものになり、実際の構築は#9トップページの作成からになります。

---

テーマ設定

これから様々な項目の設定をおこないますが、まず設定画面の表示方法についてお伝えします。

まず管理画面の「オンラインストア」＞「テーマ」を表示し、現在のテーマの「カスタマイズ」をクリックします。

カスタマイズ画面が表示されるので、左上にある歯車のマーク「テーマ設定」をクリックします。

そうすると、テーマ設定で変更できる項目が表示されます。

カラー

 まずはカラーについて設定していきます。

「色」の欄をクリックすると、設定できる配色のスキームが表示されます。
※「スキーム」とは「パターン」と同じような意味です。

現在のShopifyでは、スキームごとに配色を設定できます。スキームで設定できる色は以下の項目です。

• 背景
• 背景のグラデーション
• テキスト
• ソリッドカラーのボタン背景
• ソリッドカラーのボタンのラベル
• アウトラインボタン
• 影

スキームはデフォルトは5つありますが、最大で21のスキームを作成することができます。

スキームを新しく追加するときは「配色を追加」をクリックしましょう。

ページのセクションごとに適用するカラースキームを選択できるようになっています。サイトのレイアウトに合わせてスキームを作成していきましょう。

スキームを変えることによって、以下の画像のようにイメージを変えることができます。

色の設定については、カラーピッカーから設定もできますが、カラーコードを直接入力することで、指定の色に設定できます。

たくさんのスキームを設定できるので、サイトのデザインに合わせて配色パターンを考えてみましょう。

フォント

 続いて、サイトのフォントを設定します。

Shopifyは海外発のプラットフォームであるため、日本語のフォントはあまりサポートされていません。

ですが、フォントを変えてみると雰囲気が変わるので、お伝えする方法で変更してみてください。

フォントの設定は「タイポグラフィー」の欄をクリックします。

「タイポグラフィー」では、「見出し」と「本文」のフォントの設定ができます。

変更する項目の「変更」ボタンをクリックします。

「フォントを選択する」画面に変わるので、変更したいフォントをクリックします。

すると、右下の「選択」ボタンがクリックできるようになるので、クリックし設定を確定させましょう。

フォントの種類だけでなく、サイズもこの編集画面で設定ができます。

「フォント・サイズ・スケール」の丸い部分を横にスライドさせるか、入力欄に直接入力することでサイズの変更ができます。

設定できるフォントの種類は「システムのフォント」と「他のフォント」があります。

「システムのフォント」ではできませんが、「他のフォント」は文字の太さを変更することもできます。

サイトのイメージによって文字の太さも使いわけることができます。

ですが「他のフォント」を設定すると、サイトのページを読み込むたびにフォントも取り込むため、ページ読み込みが遅くなってしまいます。

Shopifyの公式サイトでも、「システムのフォント」の使用が推奨されているので、できるだけ「システムのフォント」を設定しましょう。

レイアウト

 続いてレイアウトを設定します。ここでは、サイトに表示される最大幅の設定ができます。

「レイアウト」の欄をクリックすると、設定できる幅のスライダーが表示されます。このスライダーを動かすか、数字を直接入力して設定します。

「ページの幅」は表示される最大幅のことです。1,000～1,600pxの間で設定が可能です。

「セクション間のスペース」はセクションの間に余白を設定できます。0～100pxの間で設定可能です。

「グリッド」の設定では、グリッドのレイアウトがある場合の、垂直スペースと水平スペースの余白を設定できます。
※グリッドとは余白を意味します。

垂直方向と水平方向それぞれ最大40pxの余白が設定できます。

設定が全て完了したら、画面右上の「保存」ボタンをクリックします。

これでレイアウトの設定は完了です。

SNS

 「SNS」の欄では、ストアに表示させるSNSのリンクを設定できます。

設定したいSNSの欄にURLを入力しましょう。

ここで入力したSNSへのリンクはストアのフッター部分に表示されます。

設定できるSNSの種類は以下の9種類です。

• Facebook
• Instagram
• YouTube
• Tik Tok
• Twitter
• Snapchat
• Pinterest
• Tumblr
• Vimeo

SNSはストアにとって重要な「認知・集客」のツールなので、うまく連動させるようにしましょう。

ロゴ

ロゴでは、ストアのブランド名などの画像を設定できます。ロゴを設定することで、ブランドイメージをアピールでき、ストアに統一感が生まれます。

ロゴが実際のサイトで表示される場所は、画像で示した通りです。

画像の設定は、「ロゴ」のタブを選択し、「画像を追加」ボタンをクリックします。

それ以降の画像の追加方法は、これまでに紹介した手順と同じです。

ブランドイメージに合ったロゴを作成して、設定しておきましょう。

favicon

 「favicon(ファビコン)」とはブラウザのタブに表示されるアイコンのようなもののことです。

ファビコンは「ロゴ」の欄から設定ができます。

画像の追加はこれまでやってきた方法と同じように「画像を追加する」をクリックして追加します。

タブに表示されるロゴなので、画像サイズは正方形にしましょう。
※推奨サイズは180px x 180px となります。

カート

 続いて「カート」の欄では、「カートタイプ」のスタイルと、お客様のカートが空の場合、カートドロワーに任意のコレクションを表示するかどうかを設定できます。

カートタイプの設定

「カートタイプ」の設定はドロップダウンのメニューの

• ドロワー
• ページ
• ポップアップ通知

の3つから選択しクリックします。

「ドロワー」は、ヘッダーの買い物カゴアイコンをクリックすると右側にカートページがドロワーとして表示されます。

この場合は、カートの中身を見るときに今いるページから遷移せず表示されます。

「ページ」は、ヘッダーの買い物カゴアイコンをクリックすると、カートページが独立したページとして遷移して表示されます。

「ページ」との違いは、商品をカートに追加したときにカートページに遷移せず右上にポップアップで表示される点です。

基本的なカート機能だけを実装したい場合は、どの設定でも構いません。

しかし、次にお伝えするメモ機能をつけたい場合や、アプリを使う場合などはカートタイプを慎重に選ばないといけない場合もあります。

実装したい機能によって、どのタイプが最適かを試しながら検討しましょう。

その他の設定

続いて、カートタイプを選択する欄の下に、「販売元を表示」と「カートメモを有効にする」のチェックボックスがあります。

「販売元を表示」にチェックを入れると、カートページを表示したときに商品のタイトルの上に、登録してある販売者が表記されます。

「カートメモを有効にする」にチェックを入れると、カートページの下部分にお客様が注文時に伝えたいことを入力できるメモ欄が表示されます。

メモ欄の内容は「注文管理」の画面にて確認することができます。

このような機能を実装したい場合はチェックを入れるようにしましょう。

カートドロワーコレクションの設定

続いて、「カートドロワーコレクション」の設定です。

ここは、カートタイプを「ドロワー」に設定している場合のカートページを設定します。

お客様のカートが空の時に、買い物カゴマークをクリックした際ドロワー表示されたカートページに任意のコレクションページへのリンクを表示させることができます。

お客様の購入機会を増やすために、このような機能を使う方法もあります。この機能を使っておすすめの商品を表示してみましょう。

チェックアウト

 最後に「チェックアウト」の設定です。ここでは、チェックアウトページ（決済ページ）の見た目をカスタマイズできます。

左側の「チェックアウト」をクリックし、デモで表示されるページも「チェックアウトページ」を選択します。

各設定項目について解説していきます。

バナー

「バナー」はチェックアウト画面のバナー部分に画像を設定できます。

特定の画像でデザインしたい場合は設定しましょう。

設定をしたした場合、画像のように赤枠のエリアが反映されます。

ロゴ

こちらも画像の設定ができます。「ロゴ」の画像を設定すると、チェックアウト画面の左上に表示されます。

「位置」でロゴ画像が表示される位置を「左・中・右」から設定できます。

「ロゴのサイズ」は、表示させるロゴの大きさを「大・中・小」から設定できます。

メインエリア

メインエリアは、画像で示した範囲の設定です。

画像を設定すると背景を設定した画像が埋め尽くすように表示されます。

背景の色を設定すると、メインエリアの背景色を設定できます。

「入力フォーム」は、白と透明から選択でき、透明を選択すると背景が透過された入力欄になります。

注文内容

注文内容では、画像右側の欄の設定ができます。

「背景画像」を設定すると、注文内容のエリアを埋め尽くすように繰り返されます。

「背景の色」を設定すると、背景色をカスタマイズできます。

「フォント」は、「見出し」と「本文」のフォントを設定できます。

色

「色」では、「アクセント」「ボタン」「エラー」の配色を設定できます。

サイト全体の配色と統一した方が分かりやすいので、統一して設定をしましょう。

チェックアウト設定

チェックアウト画面のさらに詳しい設定をする場合は、「管理画面にアクセスしてください」をクリックし設定します。

以上でチェックアウト画面のカスタマイズができました。

まとめ

今回はテーマ設定について解説しました。

今回紹介した設定のほかにも、アニメーションやボタンの表示デザインなどもテーマ設定から変更ができます。

いろいろと変更して、どんな設定ができるのか試してみてください。

この設定はサイト全体の雰囲気をつくる重要な設定なので、ストアのブランドイメージを反映させられるようにしましょう。