本記事ではBASEの商品一覧の作成方法とトップページ以外に作成する方法について解説をします。

トップページに商品一覧を設定する方法や個別ページ上で商品一覧を設定する無料Appsを使用した方法もあわせて解説します。

ぜひ続きを読み進めてみてください。

当メディア(物販ラボ)では1000名以上の方に転売・物販の指導実績があり、こちらの記事はネット販売の経験が8年の経験と知見による内容になっています。

記事の最後では「ネット販売スタートマニュアル」を配布しています。ぜひ最後まで読んでいただき、活用してください！

BASEでトップページに商品一覧を設定する方法

トップページへ設定するためには、デザインパーツを利用して仕様を変更する方法があります。設定方法をPC・スマートフォンで解説していきましょう。

また、オプション設定のグリッド型やリスト型についても紹介していきます。

PC・スマートフォンでの設定方法

デザインパーツを使ってトップページに設定する方法について紹介します。まず、デザインパーツとは、ショップページのデザインを変更するにあたって自由に追加することのできる部品です。

パーツメニューから使用したいものを選び、追加することができます。ただし、パーツによっては追加ができない場所もあるため、注意が必要です。各手順を見ていきましょう。

PCの場合

1.  「パーツ」をクリックして開きます。
2.  パーツの選択をして、ドラック＆ドロップをしてページ上に追加します。
3.  パーツを選択状態のままにすると、パーツのカスタマイズを細かく行うことが可能です。

このように、テンプレートを利用しながら簡単に編集することができます。

スマートフォンの場合

1.  「＋」をタップすると「ここにパーツを追加」が表示されます。
   それをタップして「パーツ」メニューを開きます。
2.  追加したいパーツを選択すると、選んだパーツがページ上に追加されます。
3.  追加されたパーツを選ぶと、パーツのカスタマイズを細かく行うことが可能です。

また、「↑」「↓」でパーツの移動、「ゴミ箱アイコン」でパーツの削除ができます。PC・スマートフォンの違いによって、やり方の差はありますが、完成する内容に違いはありません。

オプションの設定

デザインパーツを使用することによって、商品一覧のデザインを選ぶことが可能です。グリッド型・リスト型があり、1ページにどちらか1パーツを追加することができます。

なお、商品一覧のパーツはトップページにのみ表示が可能です。グリッド型・リスト型の違いについては、以下の表で解説します。

	グリッド型	リスト型
PCの商品レイアウト	商品一覧パーツの全体デザイン、商品枠のレイアウト選択をします	商品枠のレイアウト選択をします
スマートフォンの商品レイアウト	商品一覧パーツの全体デザイン選択をします	商品枠のレイアウト選択をします
タイトル	タイトルテキストの表示をすることができます	タイトルテキストの表示をすることができます
商品の追加読み込み	商品数が多い場合は追加読み込み方法を選択することができます	商品数が多い場合は追加読み込みの方法を選択することができます
フレーム	商品枠にフレームを表示するか選択できます	－
フレームの透過	フレームを透過表示にするか選択できます	－

グリッド型とは

グリッド型とは、ページを格子状に分断して組み合わせ、ブロック内の要素や大きさをデザインしていく方法です。

多くの情報を一度に見せることができ、クリックもしやすいことが魅力となります。

グリッド型の場合は、レイアウト段階で商品枠のレイアウトだけでなく、商品一覧パーツ全体のレイアウトも選択することが必要です。

また、フレームに関しても選択できる部分があります。フレームの透過もできるため、自分のショップコンセプトと合わせて編集しましょう。

リスト型とは

グリッド型とは違い、リスト形式で見せるデザイン手法です。レイアウトが商品枠を選択するのみで、フレーム選択もないことが、グリッド型との相違点となります。

トップページに商品一覧があることによって魅力的なショップになりますが、デザインや数によっては逆に見にくくなる場合もあります。

自分が運営するショップのコンセプトや雰囲気を意識しながら、ユーザーが利用しやすいオプション設定を行っていくことが求められるでしょう。

BASEにおいてトップページとは別に商品一覧ページを作る方法

様々なショップを参考にしていると、トップページ以外の個別ページでも設定しているサイトを多く見かけます。

そういったサイトは検索がしやすく、ユーザーからの評価が高いという特徴があります。

BASEのショップデザインは基本的にテンプレートを編集しながら進めていきますが、トップページと別に商品一覧を作りたい場合、既存のテーマでは作成ができません。

そのため、無料Appsをダウンロードして作成します。ここからはその作成手順を解説していきましょう。

Apps「HTML編集」「カテゴリ管理」をインストール

個別ページで作成するためには、無料のApps「HTML編集」をインストールすることで編集が可能です。BASEのテーマには無料版・有料版と価格の違いがありますが、無料テーマで編集できます。

ただし、「HTML編集」が使えるのは、HOME（トップページ）、ABOUT（会社概要ページ）、商品詳細ページの3つのみです。

「カテゴリ管理」で個別ページを生成

無料Apps「カテゴリ管理」を利用することで、全商品のカテゴリを作成し、個別ページを作ることが可能です。ただし、カテゴリ管理で作成した個別ページはトップページの商品一覧とリンクしているため、

利用にあたって2点の注意事項があります。

• トップページの一覧を削除・非表示すると、

個別ページも削除・非表示となる

• 個別ページの一覧の下に、トップページにある

商品一覧以外の部分が表示されてしまう

（ブログ記事一覧やカテゴリのリストなど）

なお、個別ページを作成するにあたっては、2021年5月にリリースされた「ページ追加App」を利用する方法もあります。

これはオリジナルページを自由にデザインできたり、「ショッピングガイド」「よくある質問」「アクセス」「ストーリー」の4種類をレイアウトに追加できたりする新機能です。

ただし、「ページ追加App」は「HTML編集」で作成したテーマには対応しておらず、今回は利用ができないため注意しましょう。

各カテゴリを作成

次に、商品一覧を作るためのカテゴリを作成します。カテゴリの追加、商品登録、URL確認の順で解説していきましょう。

カテゴリを追加する

カテゴリはまず「+大カテゴリ追加」から追加していきます。その後は、任意で必要なカテゴリを作成しておきましょう。

カテゴリごとに商品登録する

カテゴリ管理をインストールしたまま商品登録を行うと、カテゴリ選択ができるようになっています。

大カテゴリと任意カテゴリの両方をチェックすると2つのページで商品を表示することが可能です。

出来上がったページを確認

カテゴリ管理をインストールしたままの状態でトップページに移動すると、個別カテゴリの一覧が表示されます。実際にカテゴリページに遷移し、URLをコピーしておきましょう。

グローバルナビに商品一覧へのリンクを追加

商品一覧ページのリンクをグローバルナビに追加させましょう。

• HTML編集で「<nav」を検索（Ctrl + F）します。
• 1箇所ヒットするため、該当部分にコピーしておいたURLのリンクを貼り付けます。

商品一覧ページ下部に表示されるトップページの内容を非表示にする

先述した注意事項にあるように、トップページの内容が個別ページにも表示されてしまうため、これを非表示にすることが必要です。

• HTML編集で「{block:IndexPage}」と検索（Ctrl + F）します。
• トップページにのみ表示させたい内容を、「<div id=”top_page” >」～「</div>」で括りましょう。

トップページに表示する内容は、「 {block:IndexPage}」～「{/block:IndexPage}」内に記述されているため、検索するとヒットします。

「<div id=”top_page” <」～「</div<」は「カテゴリの個別ページでは非表示にする」という意味のため、括ることでトップページのみで表示されます。

なお、HTML編集を使用する時には必ずバックアップを取っておきましょう。

なお、BASEのネットショップ、ショップ検索方法に関する詳細は以下の記事をご参照下さい。

・（関連）BASEのショップを検索する方法！自分の店が検索で出てこない原因と対処法も解説

BASEで商品一覧を作ってクオリティの高いショップにしよう

今回は、BASEで商品一覧を作成する方法について紹介しました。

BASEを利用してネットショッピングをするユーザーは様々なサイトを見ているため、ショップを開いた際のデザインや使いやすさは非常に重要なポイントです。

その上で、商品一覧はクオリティを上げる鍵になります。

トップページに商品一覧を作成する方法はPCとスマートフォンで違いがあり、グリッド型・リスト型でレイアウトを選択することが可能です。

また、トップページの編集は既存のツールで行うことができますが、個別ページは無料Apps「HTML編集」「カテゴリ管理」をインストールすることが必要となります。

個別ページでの作成には何段階かの手順を踏むため、確認しながら行うことが大切です。

また、無料Appsは複数あり、新しくリリースされた新機能「ページ追加App」など便利なものがあります。

ただし、組み合わせによっては利用できない場合もあるため注意が必要です。

商品一覧を作成してショップのクオリティを上げることで、売れるショップにしていきましょう。

物販ラボでは「無在庫販売スタートマニュアル」も無料配布しています。

これから無在庫販売を始めるのに必須のノウハウをまとめています！興味のある方はぜひ下記からプレゼントを受け取ってください。