【新・Shopify マスターへの道】#6 テーマを編集しよう（セクション編）【2024 年最新版】

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

前回は、サイトのデザインを編集しました。

前回の記事はこちら

今回は、テーマをカスタマイズしていきます。前回配置したセクションの詳細を編集します。

今回は、ガンガンサイトのデザインを作り上げていきます。頑張っていきましょう！

今回の記事は、以下の記事を参考にしています。

【Shopify マスターへの道】#6 テーマを編集しよう（セクション編）

今回の目標

• テーマのカスタマイズ画面からセクションの詳細設定ができるようになる
• セクションの大まかな使い方を理解する

デモサイトを構築する際に使用する商品画像や CSV ファイルのダウンロードをしてない方はこちらからダウロードしてください。

【Shopify マスターへの道】商品画像・CSV ファイルのダウンロード

セクションの詳細設定

今回は、さっそくテーマのカスタマイズをしていきます。

ストアの管理画面にログインし、「オンラインストア > テーマ」へ進みます。
「現在のテーマ」の「カスタマイズ」をクリックし、カスタマイズ画面へ行きましょう。

これからカスタマイズをしていきますが、あくまでこのロードマップでは「Dawn」を使う際のカスタマイズになります。他のテーマだとセクションの構成や項目が違います。機能としては似たものが多いので、参考になると思います。

ではいきましょう！

ヘッダー

まずは、ヘッダーを編集していきます。ヘッダーの設定は、基本的に全てのページで同じ設定が適用されます。
「ヘッダー」をクリックし、ヘッダーの詳細設定を表示してください。

ロゴの設定

ロゴを設定します。ロゴは「テーマ設定」で設定することができます。
左側の「歯車アイコン」からロゴの設定を行っても良いのですが、そのセクションに関連するテーマ設定の項目は、セクションごとに自動で表示されます。
右側のサイドバーをスクロールすると、「テーマ設定」と言うアコーディオンがあるので、クリックして設定項目を表示します。

「ロゴ」という設定項目があるので、お好きな画像をロゴとして設定してください。セクション内の画像は、新規で画像をアップロードするか既にストアにアップロードされている画像の中から選ぶことができます。

画像を設定すると、ヘッダーに設定した画像が表示されます。

「デスクトップ用ロゴの幅」を調整して、ロゴの大きさを調整します。設定した画像に合わせてサイズを調整してください。

「デスクトップのロゴ位置」でロゴの位置を設定します。この設定はテーマ設定の設定項目ではなく、セクションの設定項目なので、右側サイドバーの上の方までスクロールします。今回はロゴの位置は「中央部左側」で問題ないので、変更する必要はありませんが、ほとんどのテーマでロゴの位置を調整できる機能があります。

また、スマホの場合のロゴの位置は「モバイルロゴの位置」で設定できます。今回は設定を変更する必要はなく、「中央」のままで OK です。

設定したら、一度設定を保存しておきます。右上の「保存する」ボタンをクリックしてください。

今後は保存の指示はしないので、キリのいいところで保存するようにしてください。

メニューの設定

メニューの設定は、#14 の「メニューを設定しよう」で解説予定です。

色の設定

「配色」「メニューの配色」で色を設定します。Dawn は、あらかじめ何パターンかの配色スキームが準備されています。それとは別に、カスタマイズしてスキームを作成することも可能です。

今回は、ヘッダーの「配色」に「スキーム：2」を使用します。ヘッダーの色が変われば OK です。

「メニューの配色」は「スキーム：1」のまま使用します。「メニューの配色」を変更すると、モバイル時のドロワーの背景色などが変わります。

国/地域セレクターの設定

「国/地域セレクター」では、海外向けにも販売を行う場合に通貨のセレクターを表示するかどうかを選択できます。今回は、日本のみの販売を想定しているので、この設定は関係ありません。

ヘッダーに複数の通貨を表示する場合は、別途「マーケット設定」で設定を行う必要があります。

言語セレクターの設定

「言語セレクター」では、多言語対応している場合に言語のセレクターを表示するかどうかを選択できます。今回は、日本のみの販売を想定しているので、この設定は関係ありません。

ヘッダーに複数の言語を表示する場合は、別途「言語設定」で設定を行う必要があります。

余白の設定

「間隔」と「セクションの余白」の項目で、ヘッダーの余白を設定することができます。

「間隔」

「間隔」では、ヘッダーの下に配置されるセクションとのマージンを設定できます。今回は、余白は必要ないので、「0px」のままで問題ありません。

「セクションの余白」

「セクションの余白」では、ヘッダー領域の上下のパディングを設定できます。今回は、ヘッダーを少しコンパクトにしたいので、上部・下部ともに「8px」に変更します。

以上でヘッダーの設定は完了です。

スライドショー

次に「スライドショー」のセクションを編集していきましょう。

スライドショーのセクションでは、画像を複数枚選択することで、スライドショーを作成することができます。

今回は 2 枚の画像を自動でスライドするスライドショーにします。

各スライドの設定

まずは、各スライドの画像やテキストを設定していきます。

「Image slide」と表示されているブロックを選択します。

画像

「画像」の項目では、スライドショーに表示させたい画像を設定することができます。いつものように、画像を選択しましょう。
今回は、「Top_A_2400x1920.jpg」を使用します。

見出し

「見出し」を編集します。今回は、「UnReact Accessories」とします。（好きな見出しにしても大丈夫ですが、フォントを変更する時に変化が分かりやすいように英語を推奨します。）

「見出しのサイズ」で、見出しのテキストの大きさを設定できます。今回は「中」のままで OK です。

「小見出し」で、スライドショーの説明文を設定できます。今回は、不要なので削除します。

ボタン

ほとんどのテーマでは、スライド上にボタンを作ることができます。（このスライドでは、ボタンは最終的に削除しますが、設定方法を学ぶために一度設定します。）
「ボタンのラベル」には、ボタンに表示するテキストを入力します。テキストはなんでも OK です。

「ボタンのリンク」を設定します。「ボタンのリンク」の入力欄をクリックすると、ストアの内部リンクが表示されるので、適当に選んでください。（最終的にボタンは削除するので、どのリンクでもいいです。）

「アウトラインボタンのスタイルを使用する」にチェックをつけると、ボタンの見た目を変更することができます。

今回はスライド内にボタンは設置しないので、「ボタンのラベル」の入力欄を空にして、ボタンが表示されないようにしておきます。

レイアウト

「デスクトップのコンテンツ位置」で、コンテンツの位置を変更できます。上下中央で画面左側に置きたいので「中央部左側」を設定します。

「デスクトップ上にコンテナを表示」で、文字を表示しているコンテナ（白い背景のボックス）を表示するかどうかを設定できます。今回は必要ないので、チェックを外します。

「デスクトップのコンテンツ配置」で、コンテナ内のコンテンツの位置を変更できます。左側に揃えたいので、「左」を選択します。

色

まず、オーバーレイの設定をします。オーバーレイとは、何かを重ねて表示することを表しています。今回の場合だと、画像の上に色を重ねて表示します。
今回は、スライド画像の上に黒のオーバーレイを表示したいので、「画像のオーバーレイ不透明率」で「40%」に設定します。

「配色」で文字を白くします。配色を「スキーム：3」にします。

モバイルのレイアウト

「モバイルのコンテンツ配置」で、スマホ時の文字の位置を設定できます。今回は「左」に設定します。

PC の見た目のようにテキストを画像の上にオーバーレイさせる設定は後ほど行います。

以上で、一通りスライドショーの画像の設定は完了です。
2 枚目のスライドも同じように設定してください。次の見本を見ながらやってみましょう！画像は「Top_B_2400x1920.jpg」を使用します。

スライドショー共通の設定

次に、スライドショーで共通の設定を行います。

レイアウト

「レイアウト」では、スライドショーの横幅を設定できます。今回は「全幅」を選択して、横いっぱいにスライドショーを広げます。

「スライドの高さ」で、スライドショーの高さを設定できます。今回は「大」を選択します。

ページネーション

「ページネーションのスタイル」でスライドショーの下部に表示されるページネーション表示のデザインを選択できます。今回は「ドット」を選択します。

「スライドショーの自動切り替え」で、スライドショーを自動でスライドするかどうかを設定できます。今回は自動でスライドさせたいので、チェックをつけます。

「スライドを変更する間隔」で、自動スライドで次のスライドを表示するまでの時間を設定できます。今回は「7 秒」に設定します。

アニメーション

「画像の挙動」でスライドのアニメーション設定を行います。今回は「なし」を選択します。（正直この設定の「周囲の挙動」は、なんなのかいまいちわかっていません）

モバイルのレイアウト

「モバイルで画像の下にコンテンツを表示する」のチェックボックスでは、スライドショーのテキストを表示する位置を設定できます。今回はスマホ時でもスライドの上にテキストを表示したいので、チェックを外してください。

アクセシビリティ

「スライドショーの説明」で、アクセシビリティ向上用の説明テキストを設定します。「ブランドについてのスライドショー」と入力してください。このテキストは、スクリーンリーダーを使用した場合などに読み上げられるテキストで、通常の表示では見えません。

!アクセシビリティ向上用の説明テキストを設定

以上でスライドショーの設定はすべて完了です。

リッチテキスト

「リッチテキスト」のセクションでは、ページに見出しと文章を挿入することができます。今回は、「About Us」を作っていきます。

見出しの設定

まず、見出しのテキストを入力します。

デフォルトで配置されている見出しのブロックを編集していきます。「Talk about your brand」と表示されているブロックを選択してください。

「見出し」で、見出しのテキストを設定できます。今回は「About Us」と入力してください。

「見出しのサイズ」で、見出しテキストの大きさを設定できます。今回は「中」で OK です。

テキストの設定

説明テキストを入力します。

デフォルトで配置されているテキストのブロックを編集していきます。「Share information about your ...」と表示されているブロックを選択してください。

「説明」で説明テキストを設定できます。文章はお好きな文章を入れてください。

ボタンの設定

リッチテキストと一緒にボタンを設定できます。

今回はボタンは不要なので、ブロックを削除します。「ボタン」ブロックをホバーすると表示される削除アイコンをクリックします。

ブロックの削除は確認なしで完了するので、もし間違ってブロックを削除してしまったときは、右上の操作を元に戻すアイコンボタンから操作前の状態に戻すことができます。

リッチテキスト共通の設定

「リッチテキスト」セクションで、レイアウトなどの共通設定ができます。

「デスクトップのコンテンツ位置」で、コンテンツ全体の位置を設定できます。今回は「中央」に設定します。

「コンテンツアライメント」で、コンテンツの文字揃えを設定できます。今回は「中央」に設定します。

「配色」で、リッチテキストセクションの配色を設定できます。今回は「スキーム：1」を使用します。

「セクションを全幅にする」で、セクションを画面いっぱいに広げるかどうかを設定できます。今回は、すべて中央配置で文章の改行も気にする必要がないので、チェックをつけたままで OK です。

「セクションの余白」で、上下の余白を設定できます。上下ともに「60px」に設定します。

テキスト付き画像

「テキスト付き画像」のセクションでは、画像とテキストをセットで表示させることができます。

画像部分とテキスト部分をそれぞれ設定します。まずは「テキスト付き画像」のセクションの設定項目で画像を設定します。

画像の設定

「画像」の項目で表示させたい画像を選択します。今回は、「Top_About_Us_A.jpg」を選択しましょう。

「画像の高さ」で、画像の高さを設定できます。「小」「中」「大」に設定すると、画像が切り取られて表示されます。今回は、「画像のに合わせる」に設定して、正方形のまま表示させます。

レイアウトの設定

「デスクトップ画像の幅」で、PC で見た時の画像の横幅を設定できます。今回は「中」で画像とテキストが半々の幅になるようにします。

「デスクトップ画像の配置」で画像を左右のどちらに配置するかを設定します。今回のセクションの画像は左側に配置したいので、「左」を選択します。（おそらくテーマの不具合で、実際の設定と設定の翻訳が逆になっています。Dawn のバージョンによっては解消されているかもしれません。）

「デスクトップのコンテンツ位置」で、テキスト部分の上下位置を設定できます。今回は「中位」を選択して、テキストが上下中央に来るようにします。

「デスクトップのコンテンツアライメント」で、テキスト部分の左右位置を設定できます。今回は「左」を選択しましょう。

「コンテンツのレイアウト」で、テキストを画像に重ねるかどうかを設定できます。今回は「オーバーラップなし」を選択して、テキストを重ねないようにします。

配色の設定

「配色」で、セクションの背景色を設定できます。今回は「スキーム：1」を設定します。

「コンテナの配色」で、画像とテキストが入っているコンテナの配色を設定できます。今回は「スキーム：1」を設定します。

アニメーションの設定

「画像の挙動」で、画像の動きを設定できます。今回は「なし」を選択して、アニメーションを無効にします。

モバイルのレイアウト

「モバイルのコンテンツアライメント」で、スマホ時の文字揃えを設定できます。

余白の設定

「セクションの余白」で、セクションの上下の余白をそれぞれ設定できます。今回は上下それぞれ「40px」に設定します。

見出しの設定

見出しブロックで、見出しのテキストを設定できます。「Image with text」と表示されているブロックを選択します。

「見出し」の項目で、テキスト部分の見出しを設定します。
今回は、「あなたに真心をこめて」と入力します。自分で好きな文章を入れてもらっても構いません。

「見出しのサイズ」で、見出しテキストの文字の大きさを設定できます。今回は「小」を選択してください。

説明テキストの設定

テキストブロックで、説明テキストを設定できます。「Pair text with an image to focus...」と表示されているブロックを選択します。

「コンテンツ」で、説明テキストを設定します。ダミーテキストなど適当に文章を入力してください。

「テキストのスタイル」で、説明テキストのスタイルを選択できます。今回は「本文」を選択してください。

ボタンの設定

ボタンブロックでボタンの設定ができます。「ボタン」と表示されているブロックを選択します。
ボタンの設定方法は、基本的にはスライドショーのボタンと同様です。

「ボタンのラベル」で、ボタンに表示される文字を設定することができます。今回は、「More」と入力しましょう。

「ボタンのリンク」で、移動先のページを選択します。しかし、About ページはまだ作成していないので選択することができません。なので、一旦適当なページを選択しといてください。

「アウトラインボタンのスタイルを使用する」で、ボタンのスタイルを変更できます。今回はアウトラインボタンにしたいので、チェックをつけてください。

以上で、テキスト付き画像の設定は終了です。

同じ要領で、次のテキスト付き画像の設定をしてみましょう！次の画像が完成の見本です。

特集コレクション

「特集コレクション」のセクションでは、選択したコレクションの商品を一覧表示させることができます。作成した Sale コレクションの商品を一覧表示させましょう。

見出しの設定

「見出し」で、特集コレクションセクションの見出しを設定できます。今回は「Sale」と入力します。

「見出しのサイズ」で、見出しのテキストサイズを設定できます。今回は「中」を選択します。

説明の設定

「説明」の項目で、セクションに説明を表示できます。今回は、説明は不要なので空のままにします。

「管理画面からコレクションの説明を表示する」のチェックをつけると、管理画面で設定した説明をできます。今回は説明は不要なので、チェックは外したままにしてください。

「説明のスタイル」で、説明テキストのスタイルを設定できます。今回は説明がないので、この設定は関係ありません。

コレクションの設定

「コレクション」で、表示したいコレクションを選択できます。デフォルトで「all」コレクションが選択されているはずなので、「変更」をクリックして、「Sale」コレクションを選択してください。

コレクションのレイアウト・スタイル設定

「表示する最大の商品」で、このセクションで表示する商品数を設定できます。今回の Sale 商品は 3 つしかありませんので、この設定は変更しなくていいです。

「デスクトップの列数」で、PC で見た時に何列で表示するかを選択できます。今回は列数を「3」に設定してください。

「商品を全幅にする」のチェックボックスで、セクションを画面の横幅いっぱいに広げるかどうかを選択できます。今回はチェックを外したままで OK です。

「コレクションに表示されているよりも多くの商品がある場合、「すべてを表示」を有効にします」のチェックボックスで、「すべてを表示」ボタンを表示するかどうかを設定できます。今回はすべての商品が表示されているので、この設定は関係ありません。

同様に「「すべてを表示」のスタイル」の設定も、今回は関係ありません。

「デスクトップでカルーセルを有効にする」のチェックボックスで、商品が列数より多い場合にスクロール表示するかどうかを選択できます。今回は、列数と表示数が同じなので、この設定は関係ありません。

「配色」で、セクションの配色を選択できます。今回は「スキーム：2」を選択します。

商品カードの設定

「画像比」で、表示されている商品画像の縦横比を設定できます。今回は「画像に合わせる」のままで OK です。縦横比がバラバラな画像が商品画像に設定されていると見た目があまり美しくなくなるので、そのような場合は「ポートレート」や「正方形」を選択して画像の縦横比が揃うようにしてあげると良いです。

「画像の形状」で、商品画像の形を設定できます。今回は「デフォルト」を選択します。（「塊」とかはオシャレですね。）

「マウスオーバー時に 2 番目の画像を表示する」のチェックボックスで、マウスオーバー時の挙動を変更できます。今回はすべての商品に 2 枚以上の画像を設定しているわけではないので、チェックを外して挙動が統一されるようにします。

「販売元を表示する」のチェックボックスで、商品に設定されている販売元を設定するかどうかを選択できます。今回は特に販売元を表示しなくても良いので、チェックを外したままにします。

「商品の評価を表示」のチェックボックスで、商品のレビューを表示するかどうかを選択できます。しかし、この設定はアプリとの連携が必要なため、今回はこの設定には触れません。

「「クイック追加」ボタンを有効にする」のチェックボックスで、ページ遷移せずにカートに追加するボタンを表示するかどうかを選択できます。今回はデザイン上、チェックを外しておきます。

モバイルのレイアウト

「モバイルでの列数」で、スマホで見た時に何列で表示するかを選択できます。今回は「1 列」を選択します。

「モバイルでスワイプを有効にする」のチェックボックスで、商品が列数より多い場合にスワイプ表示するかどうかを選択できます。今回はチェックをつけてスワイプできるようにします。

セクションの余白の設定

「セクションの余白」で、セクション上下の余白を設定できます。今回はどちらも「60px」に設定します。

以上で特集コレクションのセクションのカスタマイズは終了です。

コレクションリスト

「コレクションリスト」のセクションでは、作成しているコレクションの一覧を表示することができます。
今回は、「Earrings」「Necklaces」「Bracelets」コレクションを一覧表示します。

各コレクションの設定

まずは、各コレクションを設定していきます。

「コレクション」と表示されているブロックを選択します。

「コレクション」で、表示したいコレクションを選択できます。まずは、「 Earrings」コレクションを設定してみましょう。

同様に「Necklaces」「Bracelets」コレクションも同じように登録してみましょう！

見出しの設定

次に、コレクションリストセクションの設定項目を設定していきます。

「見出し」で、見出しのテキストを設定できます。今回は、「Collections」とします。

「見出しのサイズ」で見出しテキストのサイズを設定できます。今回は「中」に設定します。

コレクションリストのレイアウト・スタイルの設定

「画像比」で、表示されている商品画像の縦横比を設定できます。今回は「画像に合わせる」を選択します。（「正方形」でも OK です。画像がもともと正方形なので見た目は同じになります。）

「デスクトップの列数」で、PC で見た時に何列で表示するかを選択できます。今回は列数を「3」に設定してください。

「配色」で、コレクションリストセクションの配色を設定できます。今回は「スキーム：1」を設定します。

「リストに表示されているよりも多くのコレクションが含まれている場合、「すべてを表示」ボタンを有効にします」のチェックボックスで、すべて表示ボタンを表示するかどうかを選択できます。今回は表示する必要がないので、チェックを外します。

モバイルのレイアウトの設定

「モバイルでの列数」で、スマホで見た時に何列で表示するかを選択できます。今回は「1 列」を選択します。

「モバイルでスワイプを有効にする」のチェックボックスで、商品が列数より多い場合にスワイプ表示するかどうかを選択できます。今回はチェックをつけてスワイプできるようにします。

「セクションの余白」で、セクション上下の余白を設定できます。今回はどちらも「60px」に設定します。

以上で、コレクションリストの設定は終わりです。

特集商品

「特集商品」のセクションでは、任意の商品を選択して表示することができます。
ユーザーはここから、カートに追加や今すぐ購入をすることができます。

見出しの設定

特集コレクションに見出しの項目はないので、リッチテキストセクションを見出しの代わりに使用します。

About Us のリッチテキストと同じセクションなので、復習も兼ねて以下のように設定してください。

商品の設定

まず、特集コレクションセクションの設定項目を編集していきます。

「商品」で、特集商品として表示したい商品を選択できます。今回は「イヤリング A」を選択しましょう。

「配色」で、セクションの配色を設定できます。今回は「スキーム：1」を選択します。

「サブ背景を表示する」で、セクションの背景デザインを変更できます。今回はチェックを外した状態で OK です。

メディアの設定

「デスクトップメディアの幅」で、商品画像（動画の場合もあるのでメディアという表現がされています）の幅を設定できます。今回は「中」を選択します。

「メディアを画面の高さに制限する」のチェックボックスで、商品画像の高さの設定をできます。今回はチェックをつけてください。

「適合したメディア」の設定をしますが、これは正直何の項目かわかりませんでした。「オリジナル」でも「塗りつぶし」でも見た目は変わらなかったので「オリジナル」を選択しておきます。

「デスクトップのメディア位置」で、商品画像の位置を設定できます。今回は「左」を選択します。

「画像ズーム」で、商品画像のズーム設定ができます。今回は「Lightbox を開く」を選択します。「Lightbox」というのは、画像をプレビューするライブラリ名です。Dawn ではこの Lightbox というライブラリが使われているようです。

「バリエーションを選択した後、他のバリエーションのメディアを非表示にする」のチェックボックスで、バリエーション選択時の画像の表示設定をできます。今回は、バリエーションの選択の有無に関わらずすべての画像を表示したいので、チェックを外しておきます。

「ビデオループを有効にする」で、商品のメディアに動画を設定している時の挙動を設定できます。今回は動画を設定していないので、この設定は関係ありません。

セクションの余白の設定

「セクションの余白」で、セクション上下の余白を設定できます。今回は上部が「32px」、下部が「60px」に設定します。

販売元の設定

「テキスト」ブロックを選択します。このテキストブロックでは、販売元を表示するように設置されています。これは「ダイナミックソース（動的ソース）」という機能で、管理画面で設定している値をテキスト入力欄に表示するための機能です。

今回は販売元は表示しなくていいので、ブロックを削除してしまいます。

タイトルの設定

「タイトル」のブロックで、商品タイトルを設定できます。

「見出しのサイズ」で、商品タイトルのテキストサイズを設定できます。今回は「小」を選択してください。

価格の設定

「価格」のブロックで、商品価格に関する設定を変更できます。
とはいえ、このブロックには設定項目はありませんので、編集できるとしたら他のブロックとの並び替えのみです。今回は何も変更しません。

バリエーションピッカーの設定

「バリエーションピッカー」のブロックで、バリエーションを選択する UI に関する設定ができます。

「スタイル」で、バリエーションピッカーのスタイルを設定できます。今回は「ピル型ボタン」を選択します。

「見本（英語だと Swatch）」で、色見本などの形を設定できます。この設定に関してはこちらの公式サイトの説明を参考にしてください。

今回はこちらの設定は関係ないのでスルーします。

数量セレクターの設定

「数量セレクター」のブロックで、商品の個数を選択する UI に関する設定を変更できます。
こちらも価格のブロックと同様に、ブロックには設定項目はありませんので、編集できるとしたら他のブロックとの並び替えのみです。今回は何も変更しません。

購入ボタンの設定

「購入ボタン」のブロックで、カートに追加ボタンや今すぐ購入ボタンの設定を変更できます。

「動的チェックアウトボタンを表示」のチェックボックスで、今すぐ購入ボタンを表示するかどうかを設定できます。今回はボタンを表示したいので、チェックをつけます。「動的チェックアウトボタン」は、顧客の端末によって Apple Pay や Google Pay などの決済手段をサジェストしてくれる機能です。

「ギフトカードの受取人情報フォームを表示する」のチェックボックスで、商品がギフトカードの場合の情報入力フォームを表示するかどうかを設定できます。
今回はギフトカード商品は扱わないので、この設定は関係ありません。

共有の設定

「共有」ブロックで、商品 URL を共有するための UI に関する設定を変更できます。

「テキスト」で表示されるテキストを設定できます。今回は「Share」のままで OK です。

以上で、特集商品の設定は完了です。

ブログ記事

「ブログ記事」のセクションでは、任意のブログにカテゴライズされているブログ記事一覧を表示することができます。（Shopify では、「ブログ」と「ブログ記事」は別のものとして認識することを思い出してください。）

見出しの設定

「見出し」で、ブログ記事セクションの見出しを設定できます。今回は「Blog」と入力します。

「見出しのサイズ」で見出しテキストのサイズを設定できます。今回は「中」に設定します。

ブログの設定

「ブログ」で、表示したいブログを選択できます。今回は「Blog」ブログを選択してください。

「表示するブログ記事数」で、表示するブログ記事の数を設定できます。今回は「3」と設定します。

「デスクトップの列数」で、PC で見た時に何列で表示するかを選択できます。今回は列数を「3」に設定してください。

「配色」で、セクションの配色を設定できます。今回は「スキーム：2」を選択します。

「記事のサムネイルを表示する」のチェックボックスで、サムネイル画像を表示するかどうかを選択できます。今回はサムネイル画像を表示したいので、チェックをつけます。また、サムネイル画像はアスペクト比が 3:2 にトリミングされて表示されます。

「日付を表示する」のチェックボックスで、公開日の日付を表示するかどうかを選択できます。今回は日付表示したいので、チェックをつけます。

「執筆者を表示する」のチェックボックスで、ブログ記事の執筆者を表示するかどうかを選択できます。今回は表示したくないので、チェックを外します。

「ブログに表示されているよりも多くのブログ記事が含まれている場合、「すべてを表示」ボタンを有効にします」のチェックボックスで、すべてを表示ボタンを表示するかどうかを選択できます。今回は表示されることはありませんが、基本的にチェックをつけておくほうが無難です。

セクションの余白の設定

「セクションの余白」で、セクション上下の余白を設定できます。今回はどちらも「60px」に設定します。

以上でブログ記事セクションの設定は完了です。

フッター

「フッター」セクションでは、フッターの編集をすることができます。フッターはヘッダーと同様に、基本的に全てのページで同じ設定が適用されます。

また、フッターの領域にセクションを追加することができ、追加したセクションはフッターと同様に全ページで同じ表示が適用されます。

配色の設定

「配色」で、セクションの配色を設定できます。今回は「スキーム：1」を選択します。

メール登録の設定

「メール登録」のチェックボックスで、マーケティングメールを受け取るためのメールアドレス入力欄を表示するかどうかを選択できます。今回は必要ないので、チェックを外します。

Shop でフォローの設定

「Shop でフォロー」のチェックボックスで、Shop アプリでストアをフォローできるようにするかどうかを選択できます。Shop アプリとは Shopify のモバイルアプリです。今回はアプリからのフォローを想定していないので、チェックを外します。

SNS の設定

「SNS のアイコンを表示する」のチェックボックスで、設定されている SNS のアイコンを表示するかどうかを設定できます。今回は、SNS の設定をしてみるのでチェックをつけてください。

このタイミングでテーマ設定にある SNS の設定を行います。

フッターのセクションにある「テーマ設定」のアコーディオンを開きます。

好きな SNS のリンクを追加してみましょう。リンクを設定すると「画像」や「ヘッドライン」の入力欄が出てきますが一旦無視していいです。

国/地域セレクターの設定

「国/地域セレクターを有効にする」のチェックボックスで、海外向けにも販売を行う場合に通貨のセレクターを表示するかどうかを選択できます。今回は、日本のみの販売を想定しているので、この設定は関係ありません。チェックは一応外しておきます。

フッターに複数の通貨を表示する場合は、別途「マーケット設定」で設定を行う必要があります。

言語セレクターの設定

「言語セレクターを有効にする」のチェックボックスで、多言語対応している場合に言語のセレクターを表示するかどうかを選択できます。今回は、日本のみの販売を想定しているので、この設定は関係ありません。チェックは一応外しておきます。

フッターに複数の言語を表示する場合は、別途「言語設定」で設定を行う必要があります。

決済方法の設定

「決済アイコンを表示する」のチェックボックスで、ストアで有効化されている決済方法のアイコンを表示するかどうかを選択できます。今回は表示したいので、チェックをつけておきます。（決済方法を設定していないので、この段階では表示に変更はありません。）

ポリシーリンクの設定

「ポリシーリンクを表示」のチェックボックスで、ストアに設定しているポリシーのリンクを表示するかどうかを設定できます。ここは後ほど解説予定なので、今回の記事では省略します。

メニューの設定

「メニュー」のブロックを追加することで、フッターにリンクを設置することができます。#14 の「メニューを設定しよう」で解説予定ですので、今回の記事では省略します。

以上で、フッターの設定は終了です。

これで、今回実装するセクションの設定は全て終了です。

まとめ

今回は、セクションの設定について解説してきました。セクションについては、今回解説したもの以外にもあるので、自分で触ってどんな機能が実装できるのか確認してみてください。

また、セクションはテーマによって異なるので、実装したい機能を把握した上で、その機能を実装できるセクションを含んだテーマを選ぶことが重要になります。たくさんのテーマに触れて、Shopify に慣れていきましょう！

今回の記事は、以下の記事を参考にしています。

【Shopify マスターへの道】#6 テーマを編集しよう（セクション編）

今回の振り返り

• セクションの詳細設定ができた

次回は、テーマのカスタマイズの続きを行っていきます。

次回はこちら

今回はここまでです。長い記事になりました。お疲れ様でした。

また、デモサイトの構築の際に使えるアプリです。

• シンプルスライドショー｜お手軽画像スライダー
  「シンプルスライドショー｜お手軽画像スライダー」は、ストアにノーコードでスライドショーを表示できるアプリです。

Shopify にスライドショーを追加して画像をスライダー表示できるアプリについて徹底解説｜ご利用ガイド

• シンプルランキング表示｜お手軽ベストセラー
  「シンプルランキング表示｜お手軽ベストセラー」は、ノーコードであらかじめ作成したコレクションにランキングラベルを表示することができます。

Shopify にランキングバッジを導入するアプリについて徹底解説｜ご利用ガイド

• シンプル Wishlist ｜お手軽お気に入り
  「シンプル Wishlist ｜お手軽お気に入り」は、Shopify ストアに簡単にお気に入り機能を導入することができるアプリです。

Shopify にお気に入り（wishlist）を簡単に導入できるアプリについて徹底解説｜ご利用ガイド