Square オンラインビジネスでカテゴリページをカスタマイズする

オンラインストアに商品とカテゴリを追加すると、独自のページが自動的に生成されます。これらのページはサイトエディタでカスタマイズでき、商品の順序を並べ替えたり、その他の詳細を変更したりできます。

サイトエディタの画面左上にある [ページ] リストをクリックし、カテゴリページまでスクロールします。ここには [すべての商品] のほか、追加したカテゴリがすべて表示されます。「すべての商品」ページには、ストアで販売されているすべての商品が表示されます。[すべての商品] またはその他のいずれかのカテゴリをクリックして、ページを編集します。

ポイント：[カテゴリの追加] リンクを使用すると、サイトエディタを終了せずに新しいカテゴリをかんたんに追加できます。

カテゴリページセクション

商品リストセクションには、カテゴリ内のすべての商品が表示されます。ここに他のセクションやコンテンツを追加することはできませんが、商品を並べ替えたり、商品リストのほぼすべての部分のデザインを変更したりすることができます。これらのオプションを表示して編集するには、[商品リスト] セクションをクリックします。

ご注意：カテゴリページのヘッダーおよびフッターには、サイト上の他のページと同じ内容のものが使用されます。そのためここで加えた変更は、ウェブサイト全体に適用されます。

商品を追加・整理する

画面左上の [商品を整理して追加] をクリックすると、カテゴリに含まれる商品一覧が表示されます。たとえば「すべての商品」ページを編集している場合は、すべての商品が表示されます。商品は、ページに表示される順序で表示されます。配列メニューをクリックして、以下のオプションから並べ替え方法を選択します。

• 人気順：購入数に基づいて商品を自動的に並べ替えます。

• 新着順：商品を新しいものから古いものへと自動的に並べ替えます。新しく追加した商品を「すべての商品」ページや他のカテゴリページの上部に常に表示させたい場合は、このオプションを使用します。

• 価格順：商品を価格順に自動的に並べ替えます。価格が高い順または安い順に並べ替えることができます。

• アルファベット順：商品を自動的にアルファベット順に並べ替えます。A～Z順またはZ～A順に並べ替えることができます。

• カスタム：このオプションを選択すると、商品を自由に並べ替えることができます。リスト内で商品を上下にドラッグすると、表示順が変更されます。

カテゴリページごとに独自の並び順を設定できるため、カテゴリによって商品を別の順に並べ替えることができます。たとえば、「セール中」カテゴリページでは価格の安い順に並べ替え、「新着商品」カテゴリページでは新着順に並べ替えることができます。

サイトエディタを終了せずに、新しい商品を作成してカテゴリを編集することもできます。「すべての商品」ページを編集する際、[商品を追加] をクリックして商品作成ウィンドウを開きます。新しい商品の情報を入力し、[保存] をクリックします。標準的なカテゴリページを編集する場合は、[カテゴリを編集] をクリックすると、カテゴリに商品を追加・削除したり、その他の詳細を変更したりできます。

完了したら、画面左上の < 矢印をクリックして、メインの商品リストに戻ります。

カテゴリ設定を編集する

ご注意：商品リストの設定を編集すると、すべてのカテゴリページに適用されます。たとえば、「すべての商品」ページで背景色を変更すると、他のすべてのカテゴリページにも同じ背景色が適用されます。

リストの商品にマウスポインタを重ねると、ページ上の対応箇所が画面右側に強調表示されます。商品をクリックすると編集オプションが開きます。

ここでは、以下の設定を変更可能です。

カテゴリリンク - ナビゲーションリンクを追加したり、カテゴリナビゲーションリンクのオン/オフを切り替えたり、フォント設定、色、フォーマットを変更したりします。ボタンをクリックすると、リンクの順序の並べ替え、カテゴリ詳細の編集、新規カテゴリやサブカテゴリの追加を行えます。

タイトル - メインタイトルのフォント設定、色、フォーマットを変更します。タイトルをオフにして、非表示にすることもできます。

並べ替え - 商品の並べ替えメニューのオン/オフを切り替えます。このメニューを使用すると、お客さまがウェブサイトを閲覧するときに商品の並べ替え方法を変更できるようになります。

商品画像 - 画像のアスペクト比を変更したり、各画像の周囲に境界線を追加または削除したり、[クイックショップ] ボタンのオン/オフを切り替えたりします。商品画像のホバーエフェクトを選択することもできます。画像の上にマウスポインタを合わせるとエフェクトが現れます。[詳細] リンクをクリックすると、サンプル画像での各エフェクトの動作を実際に確認できます。

商品タイトル - 商品タイトルのフォント設定、色、フォーマットを変更します。切り替えスイッチで商品タイトルを非表示にすることも可能です。

商品価格 - 商品価格のフォント設定、色、フォーマットを変更します。切り替えスイッチで商品価格を非表示にすることも可能です。

ページ割り - この設定は、カテゴリに60点以上の商品がある場合に適用されます。数字のページ割り表示スタイルか、サイト訪問者がページを下にスクロールしたときに追加の商品が自動的に読み込まれる形式から選択できます。

セクションスタイル - この設定を使用して、列の数や列の間隔を変更します。選択している列の数が少ないほど、商品画像は大きなサイズで表示されるため、ニーズに合わせて設定を調整してください。ここで背景色や画像を変更することも可能です。

ご注意：列の表示設定は、デスクトップまたはノートパソコンからカテゴリページを表示する場合にのみ適用されます。モバイル端末では、商品は自動的に小さい画面サイズに合うように配置されます。