今回解説するのは、実際にトップページの作成方法です。
ブロックを配置したり、テキストや画像を追加して、トップページを作成してみましょう。
- 「カスタマイズ」画面にて自由に項目が追加できるようになる
- トップページが作成できる
トップページはお客様が一番初めに見る画面なので、ブランドの想いを伝えられるように作成していきましょう。
全体像の確認
今回作成するトップページはこちらになります。
今回はこれをお手本に作成を勧めていきましょう。
メインビジュアルの設定
画像バナー
お手本は画像1枚が大きく表示されているので、そのように作成していきます。
まず、既に表示されている「画像バナー」をクリックします。
すると画像を選択する項目が出てきますので、クリックして画像を選択します。
画像の設定が完了したら、少し下にある「画像のオーバーレイ不透明率」を設定します。
こちらを0%にすることで、少し黒みかかっているものを解消することができます。
その後、最初の画面に戻り、画像の上に乗っているテキストとボタンを削除します。
削除方法はそれぞれのボタンを押したあと、「ブロックを削除する」を押すことで削除が可能です。
ストアの説明箇所の作成
テキスト付き画像
続いて、ストアの説明箇所（ABOUT）を作成します。
「セクションを追加」を押します。
いくつか項目が表示されますので、その中の「テキスト付き画像」を選択します。
一番下に表示されてしまうため、「テキスト付き画像」のテキストの横に出てくる「6つの点」のボタンを掴んで、1つ上に移動します。
これで場所が変更されました。
「テキスト付き画像」をクリックします
画像を挿入する箇所が出てくるので、画像を選択します。
画像が設定できたら「戻るボタン（＜）」を押します。
続いて、タイトル・説明文を変更していきます。
また、ボタンの箇所ではリンクの設定が可能です。
今回は、まだABOUTページの設定ができていないため「#12 ABOUTページの作成」終了後に設定していきましょう。
オススメ商品の作成
特集コレクション
続いて、オススメの商品を表示するセクションを作成しました。
「特集コレクション」が既に用意されているため、こちらを編集していきます。
文字サイズを「中」に変更します。
こちらでは表示したいコレクションを選択可能です。
今回は最初から設定されていた「all」を選択します。
また、お手本を見ると表示数が4つになっているので、「表示する最大の商品」を「4」にします。
カテゴリの作成
コレクションリスト
続いて、好きなコレクションを表示していきます。
「セクションを追加」をクリックします。
今回は「コレクションリスト」を選択します。
セクションが追加されたら、「コレクションリスト」をクリックします。
今回のセクションは背景色を変更してみます。
「配色」の「スキーム：2」を設定すると背景がグレーに変わります。
続いて「コレクション」をクリックします。
「コレクションを選択」をクリックします。
コレクションの一覧が表示されますので、表示させたいコレクションを設定します。
選択したら、忘れずに「保存」を押しましょう。
他のコレクションも同様に設定したら、設定完了です。
商品一覧の作成
特集コレクション
続いて、商品の一覧を表示していきます。
「セクションを追加」をクリックします。
「特集コレクション」をクリックします。
真ん中辺りに「コレクションを選択」のボタンがありますので、そちらをクリックします。
「オススメ商品の作成」と同じように「allコレクション」を選択しようと思いましたが、表示されないので、新たに作成しようと思います。
「コレクションを作成」をクリックします。
コレクション作成画面が表示されますので、こちらですべての商品を含むコレクションを作成します。
すべての商品を作成するには下記のように設定する必要があります。
- コレクションの種類にて
「価格」「が右より大きい」「0」と設定。
このように設定すると「0円」以上の商品、つまり全ての商品が対象となります。
これにより全ての商品を含むコレクションを作成できます。
設定が完了したらカスタマイズ画面に戻ります。
先程の画面に戻ると「all」という先ほど作成したコレクションが出てきますので、選択してください。
また、商品表示数を8つにしたいので「表示する最大の商品」を「8」にします
ブログ記事の表示
ブログ記事
最後に、ブログ記事を表示します。
「セクションを追加」をクリックします。
「ブログ記事」を選択します。
タイトルを設定したら「ブログを選択」をクリックします。
表示したいブログを選択します。
選択するとブログ記事が表示されますので、忘れずに保存をします。
まとめ
今回はトップページの作成について解説しました。
今回紹介した設定のほかにも、色んな要素をトップページに載せることができますので、いろんなセクションを追加してみてください。