Wix ストア：カテゴリーページをカスタマイズする
読了時間：10分
重要：
カテゴリーページは現在一部のユーザー様のみご利用いただけます。
カテゴリーページはショップのメインページです。ページに関わるすべての部分をデザインしたり、好みのレイアウトを選択したり、表示する情報を決定したりすることができます。
カテゴリーページの設定にアクセスする方法
をクリックします。
この記事では、下記の項目について説明します：
ヒント：
- カテゴリーページをカスタマイズする必要があるのは一度だけです。カスタマイズした内容は各カテゴリーに自動的に適用されます。
- 右上のカテゴリープレビューセレクタを使用してカテゴリーを選択し、プレビューを表示します。
カテゴリーページの設定を調整する
「設定」タブで、カテゴリーページに表示するパーツと、顧客が商品画像にマウスオーバーしたときの動作を選択します。また、訪問者がページの最後に到達したときにより多くの商品を閲覧するための方法も選択することができます（例： 「もっと見る」ボタンをクリックするなど）。
カテゴリーページの設定を選択する方法：
- 「設定」タブをクリックします。
- 次の設定をカスタマイズします：
- 表示したいパーツ横のチェックボックスを選択します。
- 訪問者が商品画像にマウスオーバーしたときの動作を選択します。
- 顧客がページの最後に到達したときに、他の商品をどのように表示するかを選択します：
- 「もっと見る」ボタン： 「もっと見る」ボタンを表示します。
- ページ送り：ページ番号を表示します。
- 無限スクロール：ページ間を移動することなくスクロールできます。
- 「カートに追加」ボタンを追加してカスタマイズします。
- 商品オプションを表示または非表示にします。
ヒント：
- 「もっと見る」ボタンまたはページ送りオプションを選択した場合は、「デザイン 」タブに移動してデザインをカスタマイズします。
- 各ページには個別の URL があり、商品ギャラリーの SEO を改善するのに役立ちます。例：
- 最初のページ URL：https://www.mystunningwebsite.com/shop
- 2ページ目の URL：https://www.mystunningwebsite.com/shop?page=2
カテゴリーページのレイアウトを選択する
ヘッダー（表示されている場合）と商品ギャラリーの両方で希望のレイアウトを選択します。
レイアウトオプションを選択する方法：
- 「レイアウト」タブをクリックします。
- 次のオプションを使用してヘッダーをカスタマイズします：
- ヘッダーの位置：「インライン」または「上部」を選択します。
ヒント：「上部」を選択した場合は、カテゴリーリストを非表示にすることをおすすめします。それ以外の場合、カテゴリーには選択したカテゴリーのサブカテゴリーが表示されます。 - カテゴリー情報の表示位置：カテゴリーの説明を画像の上または下に表示します。
- カテゴリー情報の配置：ヘッダーテキストを左、右、または中央に揃えます。
- カテゴリー画像の高さ：スライダーをドラッグしてカテゴリー画像の高さを設定します。
- タイトルと詳細欄の間隔：スライダーをドラッグして希望の間隔を設定します。
- ヘッダーの位置：「インライン」または「上部」を選択します。
- 次のオプションを使用してギャラリーをカスタマイズします：
- 商品の表示スタイル：ギャラリーでの商品の表示方法を選択します。
- 商品情報の配置：商品情報を左、右、または中央に揃えます。
- グリッドの調整：
注意：「固定」と「レスポンシブ」のどちらを選択するかによってカスタマイズの種類が異なります。- 固定：ギャラリーのすべての訪問者に同じ数の行と列が表示されます。
- レスポンシブ：訪問者の画面サイズに応じて、表示される商品の数が調整されます。
注意：レスポンシブ設定は、ギャラリーを全幅に拡大した場合にのみ使用できます。
- 次のオプションを使用して商品画像をカスタマイズします：
- 画像の配置：商品テキストの上または横に画像を配置します。
- サイズ調節：サイズ変更オプションを選択します：
- クロップ：すべての画像を同じサイズにクロップします。
- フィット：画像の縦横比を維持します。
- 画像の比率：縦横の比率を選択します。
- 画像の横の余白：画像の左右の余白を調整します。
- 画像の上下の余白：画像の上下の余白を調整します。
- 画像の角の丸み：画像の角を丸くするか、四角くします。
- 「リボンレイアウト」をクリックして配置をカスタマイズします：
- 商品情報：商品画像の下と詳細の横にリボンが表示されます。
- 画像上：商品画像の上にリボンが表示されます。「左右の余白」と「トップの余白」下のスライダーをドラッグして、リボンの周囲にスペースを追加します。
ヒント：
カテゴリーページを全幅に引き延ばすには、エディタでカテゴリーページをクリックし、「ストレッチ」アイコン
トグルをクリックして有効にします。
トグルをクリックして有効にします。カテゴリーページのテキストを編集する
「テキスト」タブで、デフォルトの内容を編集してお好みのテキストを表示します。ページ全体のボタンに表示されるテキスト（例：「カートに追加」、「予約購入」など）や、在庫切れの際に表示されるメッセージをカスタマイズすることができます。
ヒント：
パーツを非表示にした場合、そのパーツのテキストを編集するオプションは表示されません。
テキストを編集する方法：
- 「テキスト」タブをクリックします。
- 利用可能なテキストオプションを編集します。
カテゴリーページをデザインする
ブランド全体のデザインに合わせてカテゴリーページをカスタマイズしましょう。
カテゴリーページをデザインする方法：
- 「デザイン」タブをクリックします。
- 以下の手順に従って、カテゴリーページの各パーツをデザインします。
基本設定
ヘッダーセクション
サイドバー・並び替え
「もっと見る」/「前へ」ボタンまたはページ送り
商品カード
「カートに追加」ボタン
リボン
商品オプション・数量
商品名と価格の区切り線
クイックビューボタン
サイドバーをカスタマイズする
カテゴリーサイドバーには、カテゴリーリストとフィルターの 2つのコンポーネントがあります。一方または両方を表示したり、サイドバーを完全に非表示にすることができます。
重要：
カテゴリーリストはモバイルには表示されません。サイトメニューにカテゴリーを追加すると、顧客は簡単にカテゴリーにアクセスできます。
任意の有効なカテゴリーはカテゴリーリストに自動的に表示されますが、表示したくないカテゴリーは非表示に設定できます。表示するカテゴリーを並べ替えることもできます。
サイドバーをカスタマイズする方法：
- 「リスト」タブをクリックします。
- カスタマイズするものを選択します：
カテゴリーリスト
フィルター
をクリックして非表示に設定または編集します。
並び替えオプションをカスタマイズする
カテゴリーページには、顧客が関連する商品をより簡単に表示できるように、並び替えオプションが用意されています。オプションを無効にするか、並び替えを完全に非表示にすることができます。
商品の並び替えをカスタマイズする方法：
- 「並び替え」タブをクリックします。
- 以下の設定をカスタマイズします：
- 「商品の並び替えオプションを表示する」トグルをクリックして有効 / 無効を切り替えます。無効にした場合、顧客は商品を並べ替えることができなくなります。
- 並び替えラベルを編集します（例： 「並べ替え」など）。
- デフォルトで表示される並び替えオプションを選択します。
- 非表示にしたい並び替えオプション横のチェックボックスの選択を解除します。
クイックビューをカスタマイズする
クイックビューオプションを使用すると、顧客はカテゴリーページから移動することなく、ポップアップで商品の詳細を確認することができます。
ヒント：
「クイックビュー」ボタンをカスタマイズするには、「デザイン」タブに移動します。
クイックビューをカスタマイズする方法：
- 「クイックビュー」タブをクリックします。
- 「クイックビューを表示する」のトグルをクリックして有効化します。
- 次に、カスタマイズする内容を選択します：
- 背景色：クイックビューウィンドウの背景色を選択します。
- 枠線の不透明度・色： 枠線の色を選択し、不透明度を調整します。
- テキストのフォント・色： クイックビューウィンドウに表示される各テキストのフォントと色を選択します。
- 「カートに追加」ボタン： ボタンのテキスト、スタイル、フォントなどを編集します。
お役に立ちましたか？
|