Wix ストア：Studio Two のカテゴリーページをカスタマイズする

1. 「データ設定」アイコン をクリックします。
2. 「1 ページあたりの商品数」スライダーをドラッグするか、数値を入力して、ページに表示する商品数を選択します。
3. （オプション）「データを管理」をクリックして、ダッシュボードで商品とカテゴリーを追加・管理します。

ヒント：商品とカテゴリーの管理についての詳細はこちら

1. 「パディングと動作」アイコン をクリックします。
2. ページに設定したいパディングを入力します。

1. 「すべてのデザインオプション」アイコン をクリックします。

2. 要素設定パネルでデザインオプションを設定します。

1. ページ上の要素を右クリックします。

2. 「データに接続」をクリックします。

3. 要素をデータソースに接続します。

1. ページ上のパンくずリストを選択します。
2. 要素設定パネルの「設定」タブをクリックします。
3. 「アクセシビリティ」を開き、「アクセシブル名」フィールドにスクリーンリーダー用の説明を入力します。
4. （オプション）「デザイン」タブをクリックし、「デザインする対象を選択」で「カテゴリーのパンくずリスト」または「パンくずリスト」を選択して、要素全体またはパンくずリストの項目だけをデザインします。

1. ページ上のカテゴリー名を選択します。
2. 要素設定パネルの「デザイン」タブをクリックし、「タイポグラフィ」セクションでフォントやサイズなどのテキストをカスタマイズします。
3. （オプション）「設定」タブをクリックして、テキストが接続されているデータを確認します。

1. ページ上のカテゴリーメニューを選択します。
2. 要素設定パネルの「設定」タブをクリックします。
3. メニューの動作を選択します：
   • サブカテゴリーがない場合：「同じ階層のカテゴリーを表示」または「カテゴリーメニューを非表示」を選択します。
   • 「すべての商品を見る」ボタンを表示：トグルを有効にすると、すべての商品を表示するボタンが表示されます。
   • オーバーフロー時の動作：カテゴリーがメニューに収まらない場合の動作（例：「スクロール」）を選択します。
4. （オプション）「デザイン」タブをクリックし、「デザインする対象を選択」で「カテゴリーメニュー」または「メニュー項目」を選択し、「通常時」「ホバー」「選択時」のいずれかを選択して、その状態をデザインします。
5. （オプション）アクションバーの「レイアウトを変更」をクリックし、「向き」ドロップダウンから「横」または「縦」を選択します。

1. ページ上のフィルターボタンを選択します。
2. 要素設定パネルの「設定」タブをクリックします。
3. フィルターパネルをカスタマイズします：
   • パネルのタイトル：フィルターパネルの上部に表示されるタイトルを入力します。
   • パネルを開く位置：フィルターパネルが開く位置（例：「左」）を選択します。

1. ページ上の商品カウンターを選択します。
2. 要素設定パネルの「デザイン」タブをクリックし、「タイポグラフィ」セクションでフォントやサイズなどのテキストをカスタマイズします。
3. （オプション）「設定」タブをクリックし、「アクセシビリティ」を開いて、「アクセシブル名」フィールドにスクリーンリーダー用の説明を入力します。

「適用中のフィルター」には、カスタマーが選択したフィルターと「すべてクリア」ボタンが表示されます。

1. ページ上の適用中のフィルターを選択します。
2. 要素設定パネルの「デザイン」タブをクリックします。
3. 「デザインする対象を選択」で「適用中のフィルター」「フィルタータグ」「すべてクリア」のいずれかを選択して、その部分をデザインします。
4. （オプション）「設定」タブをクリックし、「アクセシビリティ」を開いて、「アクセシブル名」フィールドにスクリーンリーダー用の説明を入力します。

1. ページ上の並び替えのドロップダウンを選択します。

2. アクションバーの「アイコンをカスタマイズ」をクリックします。

3. 「静止」または「アニメーション」を選択して、アイコンの種類を選びます。

4. （オプション）「変更」をクリックして、別のアイコンを選択します。

5. （オプション）要素設定パネルの「設定」タブをクリックし、「アクセシビリティ」を開いて、「アクセシブル名」フィールドにスクリーンリーダー用の説明を入力します。

商品リストには、選択したカテゴリーの商品が表示されます。

1. ページ上の商品リストを選択します。
2. アクションバーの「レイアウトを変更」をクリックします。
3. 商品の表示方法を選択します：
   • レイアウトを選択：「カード」「リスト」「スライダー」「高度なグリッド」から選択します。
   • 1 行あたりのアイテム数を設定：トグルを有効にして、1 行に表示したい商品数を入力します。
4. （オプション）リスト上部のモードのドロップダウンをクリックし、「通常モード」または「アイテムなし」を選択して、商品がある場合とない場合のリストの見た目をデザインします。

商品画像は、その商品のページにリンクしています。

1. ページ上の商品画像を選択します。

2. 要素設定パネルの「設定」タブをクリックします。

3. 画像の動作を選択します：

   • 画像：商品のメインメディアが表示されます。

   • 代替テキスト：画像の代替テキストとして使用される商品データが表示されます。

   • 表示モード：「フィル」「フィット」「画像の比率を維持」から選択します。

   • リンク：商品ページへのリンクが表示されます。

4. （オプション）アクションバーの「画像を変更」または「マスク」をクリックして、画像またはその形状を変更します。

1. 商品のリボンを選択します。
2. 要素設定パネルの「デザイン」タブをクリックします。
3. 「デザインする対象を選択」で、デザインしたい部分（「リボン」「メインリボン」「追加リボン」）を選択します。

1. ページ上の商品名を選択します。
2. 要素設定パネルの「デザイン」タブをクリックし、「タイポグラフィ」セクションでフォントやサイズなどのテキストをカスタマイズします。

1. 商品の価格を選択します。
2. 要素設定パネルの「設定」タブをクリックします。
3. 「プロパティ」セクションで、価格の表示方法を選択します：
   • セール前の価格を先に表示：トグルを有効にすると、セール前の価格が先に表示されます。
   • 「から」ラベル：商品の価格が変動する場合に、価格の前に表示されるテキストを入力します。
4. （オプション）要素上部のモードのドロップダウンをクリックし、「通常モード」「セール中」「価格帯」「通常価格」のいずれかを選択して、その価格の表示をデザインします。

1. 商品リストの一番下までスクロールし、「もっと見る」ボタンを選択します。
2. 要素設定パネルの「設定」タブをクリックします。
3. 「プロパティ」セクションでボタンをカスタマイズします：
   • テキスト：ボタンに表示するテキストを入力します。
   • リンク先：「リンクを選択」をクリックして、ボタンのリンク先を設定します。
   • 無効にする：トグルを有効にすると、ボタンが無効になります。
4. （オプション）「デザイン」タブをクリックし、「デザインする対象を選択」で「ボタン」または「テキスト」を選択して、その部分をデザインします。