Wix ストア:カテゴリーページをカスタマイズする
読了時間:10分
重要:
カテゴリーページは現在一部のユーザー様のみご利用いただけます。
カテゴリーページはショップのメインページです。ページに関わるすべての部分をデザインしたり、好みのレイアウトを選択したり、表示する情報を決定したりすることができます。
カテゴリーページの設定にアクセスする方法

ヒント:
- カテゴリーページをカスタマイズする必要があるのは一度だけです。カスタマイズした内容は各カテゴリーに自動的に適用されます。
- 右上のカテゴリープレビューセレクタを使用してカテゴリーを選択し、プレビューを表示します。
表示するパーツを選択する
「表示設定」タブでは、カテゴリーページのパーツを選択または選択解除して、各パーツを表示または非表示にすることができます。
カテゴリーページのパーツを表示または非表示にする方法:
- 「表示設定」タブをクリックします。
- 表示したいパーツ横のチェックボックスを選択します。
ヒント:
また、下記の操作も可能です:
- 「リスト」タブに移動して、サイドバーからカテゴリーリストを非表示にする。
- 「フィルター」タブに移動して、サイドバーからフィルターを非表示にする。
- 「並び替え」タブに移動して、ページから並び替えのオプションを非表示にする。
カテゴリーページの設定を調整する
「設定」タブでは、訪問者がページを最後までスクロールした際に、さらに商品を表示する方法(例:「もっと見る」ボタンを表示するなど)を選択したり、商品画像にマウスオーバーした際の画像のエフェクトを選択したりすることができます。
カテゴリーページの設定を選択する方法:
- 「設定」タブをクリックします。
- 下記をカスタマイズします:
- スクロール動作:
- 顧客がページを最下部までスクロールした際の動作を選択します。詳細はこちら
- スクロール中にフィルターを表示したままにするには、「スティッキーサイドバー」トグルを有効にします。有効にすると、サイドバーの最上部からの距離をカスタマイズします。
- 画像ホバーエフェクト:顧客が商品にマウスオーバーした際の動作を選択します。
- 「カートに追加する」ボタン:「表示設定」タブでボタンを有効にした場合は、ボタンをクリックしたときの動作をカスタマイズします:
- 完了のポップアップを表示:ポップアップ通知が表示されます。
- サイドカートを開く:画面の横でサイドカート(ミニカート)が開きます。
- カートページを開く:顧客は直接カートページに移動します。
- カテゴリーページにとどまる:顧客は現在のページにとどまります。このボタンには、商品がカートに追加されたことを表すチェックマークが表示されます。
- スクロール動作:
ヒント:
- 「もっと見る」ボタン、またはページ送りのオプションを選択した場合は、「デザイン」タブに移動して、それらのデザインをカスタマイズすることができます。
- 各ページには個別の URL があり、商品ギャラリーの SEO を改善するのに役立ちます。例:
- 最初のページ URL:https://www.mystunningwebsite.com/shop
- 2ページ目の URL:https://www.mystunningwebsite.com/shop?page=2
カテゴリーページのレイアウトを選択する
ヘッダー(表示されている場合)と商品表示の両方に希望のレイアウトを選択します。
レイアウトオプションを選択する方法:
- 「レイアウト」タブをクリックします。
- 下記をカスタマイズします:
- パンくず:パンくずの配置を、左、中央、右から選択します。
- ヘッダーセクション:
- ヘッダーの位置:「インライン」または「上部」を選択します。
ヒント:「上部」を選択した場合は、カテゴリーリストを非表示にして、サイトメニューにカテゴリーを表示することをおすすめします。 - カテゴリー情報の表示位置:カテゴリーの説明文の配置を、ヘッダー画像の上、中、下から選択します。
- カテゴリー情報の配置:ヘッダーテキストを左、右、または中央に揃えます。
- カテゴリー画像の高さ:スライダーをドラッグしてカテゴリー画像の高さを設定します。
- タイトルと詳細欄の間隔:スライダーをドラッグして希望の間隔を設定します。
- 説明テキストの表示設定:カテゴリーの説明文が長い場合は、テキストを折りたたんで表示するかすべて表示するかを選択します。
- ヘッダーの位置:「インライン」または「上部」を選択します。
- 商品グリッド:
- グリッドの調整:
注意:「固定」と「レスポンシブ」のどちらを選択するかによってカスタマイズの種類が異なります。- 固定:ギャラリーのすべての訪問者に同じ数の行と列が表示されます。
- レスポンシブ:訪問者の画面サイズに応じて、表示される商品の数が調整されます。
注意:レスポンシブ設定は、ギャラリーを全幅に拡大した場合にのみ使用できます。
- グリッドの調整:
- 商品画像:
- 画像の配置:商品テキストの上または横に画像を配置します。
- サイズ調節:サイズ変更オプションを選択します:
- クロップ:すべての画像を同じサイズにクロップします。
- フィット:画像の縦横比を維持します。
- 画像の比率:縦横の比率を選択します。
- 画像の横の余白:画像の左右の余白を調整します。
- 画像の上下の余白:画像の上下の余白を調整します。
- 「カートに追加する」ボタン:ボタンを配置する場所を選択します。
注意:ボタンを商品画像の上に配置すると、「クイックビュー」ボタンは表示されなくなります。 - 商品情報:商品カードのレイアウトオプションを選択し、カスタマイズします。
- 商品オプション:トグルを有効にして、色見本のオプションのみを表示したり、表示する色見本の数を制限します。
- リボン:リボンを表示する場所を選択し、余白をカスタマイズします。
ヒント:
カテゴリーページを全幅に引き延ばすには、エディタでカテゴリーページをクリックし、「ストレッチ」アイコン
トグルをクリックして有効にします。



カテゴリーページをデザインする
ブランド全体のデザインに合わせてカテゴリーページをカスタマイズしましょう。
カテゴリーページをデザインする方法:
- 「デザイン」タブをクリックします。
- 以下の手順に従って、カテゴリーページの各パーツをデザインします。
基本設定
ヘッダーセクション
カテゴリー一覧・フィルター
商品カード
商品情報
商品オプション・数量
リボン
商品名と価格の区切り線
「カートに追加する」ボタン
「もっと見る」/「前へ」ボタンまたはページ送り
クイックビューボタン
カテゴリーページのテキストを編集する
「テキスト」タブで、デフォルトの内容を編集してお好みのテキストを表示します。ページ全体のボタンに表示されるテキスト(例:「カートに追加」、「予約購入」など)や、在庫切れの際に表示されるメッセージをカスタマイズすることができます。
ヒント:
パーツを非表示にした場合、そのパーツのテキストを編集するオプションは表示されません。
テキストを編集する方法:
- 「テキスト」タブをクリックします。
- 利用可能なテキストオプションを編集します。
サイドバーをカスタマイズする
カテゴリーサイドバーには、カテゴリーリストとフィルターの 2つのコンポーネントがあります。一方または両方を表示したり、サイドバーを完全に非表示にすることができます。
重要:
カテゴリーリストはモバイルには表示されません。サイトメニューにカテゴリーを追加すると、顧客は簡単にカテゴリーにアクセスできます。
任意の有効なカテゴリーはカテゴリーリストに自動的に表示されますが、表示したくないカテゴリーは非表示に設定できます。表示するカテゴリーを並べ替えることもできます。

これらのフィルターを使用して、顧客は必要な商品を見つけることができます。サイトのフィルターは、サイト訪問者が閲覧しているカテゴリーに応じて自動的に調整されます。
ヒント:
カテゴリーフィルターを使用すると、顧客がサブカテゴリーを選択できるようになります。たとえば、婦人服のカテゴリーを表示する場合、顧客は他のカテゴリーの商品と婦人服を含むフィルターを選択できるようになります。
サイドバーをカスタマイズする方法:
- 「リスト」タブをクリックします。
- 以下のリストオプションをカスタマイズします:
- カテゴリーリストを表示:「カテゴリーリストを表示」トグルをクリックして、表示または非表示にします。
- カテゴリーリストのタイトルを表示: チェックボックスの選択を解除して、タイトルを非表示にします。選択すると、タイトルテキストを編集できます。
- リストを管理する方法
- すべてのカテゴリーを自動で同期:有効なすべてのカテゴリーが、追加された順に自動的に表示されます。
- 手動でリストをカスタマイズ・並び替え:特定のカテゴリーを非表示にして、リストを並べ替えるオプションを提供します。
- 非表示にしたいカテゴリー横のチェックボックスの選択を解除します。
- ドラッグアンドドロップでカテゴリーを並べ替えます。
- 「フィルター」タブをクリックします。
- 以下のフィルターオプションをカスタマイズします:
- フィルターを表示:トグルをクリックして、すべてのフィルターを表示または非表示にします。
- フィルタータイトルを表示:チェックボックスの選択を解除して、「フィルター」のタイトルを非表示にします。
- フィルター名:名称を表示させている場合は、タイトルテキストを編集することができます。
- フィルターのオプション:フィルターにマウスオーバーし、「その他のアクション」アイコン
をクリックして非表示に設定または編集します。
- カテゴリー:カテゴリーフィルターを非表示にするか、「編集」をクリックして表示するカテゴリーを選択します。
- 価格:価格フィルターを非表示にするか、「編集」をクリックしてフィルターのタイトルを編集します。
- 商品オプション:商品オプションフィルターを非表示にします。
ヒント:商品オプションを表示すると、各ページに関連するオプションが表示されます。 - 割引:このオプションは非表示に設定または削除することができます。このオプションを表示すると、売上を適用するカテゴリーを選択することができます。

並び替えオプションをカスタマイズする
カテゴリーページには、顧客が関連する商品をより簡単に表示できるように、並び替えオプションが用意されています。オプションを無効にするか、並び替えを完全に非表示にすることができます。

商品の並び替えをカスタマイズする方法:
- 「並び替え」タブをクリックします。
- 「注文商品の表示順」ドロップダウンから、商品を表示する順序を選択します。顧客が商品を並べ替えられるようにしている場合は、顧客は希望の順序に変更することができます。
注意:デフォルトでは、カテゴリー内の商品は、ダッシュボードで設定した順序で表示されます。 - 以下の設定をカスタマイズします:
- 「「並び替え」オプションを表示」トグルをクリックして有効または無効にします。
- 「並び替え」ラベルを編集します。
- 非表示にしたい並び替えオプション横のチェックボックスの選択を解除します。
クイックビューをカスタマイズする
クイックビューオプションを使用すると、顧客はカテゴリーページから移動することなく、ポップアップで商品の詳細を確認することができます。
重要:
「カートに追加する」ボタンを有効にして商品画像の上に配置している場合、「クイックビュー」ボタンは表示されません。
