テーマエディターでのカテゴリページのデザイン（OS 3.0 テーマ）

カテゴリページは、顧客がストア内の特定のカテゴリの商品を閲覧する場所です。OS 3.0テーマのテーマエディターでは、このページのヘッダー、商品リスト、その他のページ固有の設定をSHOPLINE管理画面から直接カスタマイズできます。コーディングは不要です。

このガイドでは、テーマエディターでのカテゴリページへのアクセス方法、ヘッダーの設定、モバイルでの商品表示の制御、クイックビュー、ホバー効果、プロモーションカードなどのインタラクティブな機能の設定方法について説明します。

テーマエディターでのカテゴリページへの移動

テーマエディターでカテゴリページを開くには：

1. SHOPLINE管理画面から、オンラインストア > デザイン > マイテーマに移動し、編集したいOS 3.0テーマのデザインボタンをクリックします。
   
2. テーマエディターの上部にあるページセレクターをクリックし、ページタイプのリストからカテゴリを選択します。
3. カテゴリ（>矢印のある行）をクリックしてテンプレートリストを開き、標準のカテゴリページレイアウトを編集するにはデフォルトを選択、特定のカテゴリに割り当てるカスタムレイアウトを作成するには+ テンプレートを作成をクリックします。
   
4. 左のサイドバーのカテゴリドロップダウンリストを使って、変更を加えながらプレビューするカテゴリを選択します。
   

カテゴリヘッダーパーツの設定

カテゴリページの上部には、顧客がストア内の現在地を示すパンくずリストとヘッダーバナー画像が表示されます。このセクションでは、ヘッダーバナー画像の設定方法とパンくずリストの「ホーム」ノードを非表示にする方法について説明します。これらはどちらもカテゴリヘッダーパーツのカテゴリ画像ブロック内にある、最近更新された2つの設定です。タイトルおよびカテゴリ説明ブロックは、テーマエディターで共通して使用される標準設定を使用しています。パーツとその設定の完全なリストについては、「テーマエディターのパーツを使ったストアページのデザイン（OS 3.0 テーマ）」をご覧ください。

ヘッダーバナー画像のアップロード

ヘッダーバナー画像をアップロードまたは更新するには：

1. テーマエディターでカテゴリページに移動し、テンプレートの下にあるカテゴリヘッダーをクリックします。
2. 設定パネルを開くためにカテゴリ画像をクリックします。
3. ヘッダーバナー用の画像をアップロードします。同じパネル内で、モバイルバナー画像フィールドを設定し、モバイルデバイスの訪問者に表示される画像を制御します。
4. 変更を適用するために保存をクリックします。

カテゴリページのパンくずリストで「ホーム」ノードを非表示にする

レガシーカテゴリページには削除できないハードコードされた「ホーム」ノードがパンくずリストに含まれていますが、非表示にすることは可能です。非表示にするには：

1. テーマエディターでカテゴリページに移動し、テンプレートの下にあるカテゴリヘッダーをクリックします。
2. 設定パネルを開くためにカテゴリ画像をクリックします。
3. パンくずリストを非表示をオンにします。
   
4. 変更を適用するために保存をクリックします。

商品リストパーツの設定

カテゴリページの商品グリッドは、顧客の閲覧方法に合わせて適応します。モバイルでは1行に1つまたは2つの商品を表示し、購入者がページを離れずに商品をプレビューできるようにし、商品間のプロモーションに注目を集め、顧客が表示内容をフィルターおよび並べ替えできるようにし、カテゴリが大きくなりすぎて効率的にフィルターできなくなった場合はフィルターを自動的に非表示にします。

このセクションでは、すべて商品リストパーツ内にある設定について説明します。商品タイトル、商品価格、セールバッジ、およびショップボタンなどの他のパーツは、テーマエディター全体で共有されている同じ標準設定を使用しています。パーツとその設定の完全なリストについては、"テーマエディターのパーツを使ったストアページのデザイン（OS 3.0 テーマ）"をご覧ください。

モバイルでの1行あたりの商品表示数の選択

モバイルでカテゴリページを閲覧する際に、顧客が1行に1商品または2商品を切り替えられるようにするには：

1. SHOPLINE管理画面で、オンラインストア > デザイン > マイテーマに移動します。OS 3.0 テーマを選択し、デザインをクリックしてテーマエディターに入ります。
2. カテゴリページに移動し、ドロップダウンリストからカテゴリを選択します。テンプレートの下で、商品リストをクリックして設定パネルを開きます。

3. モバイル表示用のマルチカラム切り替えをオンにします。
   

   ヒント：設定中にモバイルでの見え方をプレビューするには、テーマエディター上部のデバイストグルをクリックしてモバイルビューに切り替えてください。

4. モバイルのデフォルト列数と切り替え可能な代替列数をドロップダウンから設定し、保存をクリックします。
   

商品カードでのクイックビューとフローティングホバー層の有効化

トップレイヤー画像オーバーレイパーツは商品画像の上に配置され、クイックビューボタンやその他のコンテンツを含めることができます。また、顧客が商品にホバーした際にそのコンテンツが表示されるフローティングホバー層の効果も制御します。設定方法は以下の通りです：

1. テーマエディターで、カテゴリページに移動します。カテゴリの下で、下向き矢印アイコンをクリックしてプレビューするカテゴリを選択します。
2. 商品リストの下で、商品カード > 商品画像に進み、トップレイヤー画像オーバーレイにカーソルを合わせ、+ パーツを追加をクリックし、クイックビュー ボタンを選択します（このオーバーレイには他のパーツも追加できます）。
   
3. クイックビューボタンのテキスト、色、書式を設定でカスタマイズします。デフォルトでは、ボタンはもっと見ると表示されます。
   
4. トップレイヤー画像オーバーレイ自体をクリックして、フローティングホバー レイヤー効果を設定し、オーバーレイコンテンツの表示方法を制御するために、持続オーバーレイ、フェードインオーバーレイ、またはフェードアウトオーバーレイを選択します。
   
5. 変更を適用するには、保存をクリックします。

カテゴリページにプロモーションカードを追加する

プロモーションカードは、商品グリッド内でプロモーションを強調表示するために、商品リストの下で商品カードと並べて追加できるパーツです。追加および設定するには：

1. テーマエディターで、カテゴリページに移動します。商品リストの下で、+ パーツを追加をクリックし、プロモーションカードを選択します。
2. プロモーションカードをクリックして、その設定パネルを開きます。
3. 画像の下で、+ 画像を追加をクリックしてプロモーション画像をアップロードします。別途、モバイルの画像をアップロードしたり、画像表示エリア（例：中央）を設定することもできます。
   
4. タイトルテキストを設定し、そのタイトルのタイポグラフィ（例：見出し5）を選択します。
5. リッチテキストエディターを使って説明を追加します。
6. 変更を適用するには、保存をクリックします。

カテゴリページでフィルターをオンにする

顧客は、カテゴリページの商品を価格やバリエーションオプションなどでフィルターできます。これは、商品リストの下にあるフィルターを有効にするをオンにすると可能になります。顧客がテーマのネイティブフィルターを見るか、フィルタリングアプリのフィルターを見るかは、インストールしているアプリによって異なります。オンにするには：

1. テーマエディターで、カテゴリページに移動します。テンプレートの下で、商品リストをクリックして設定パネルを開きます。
2. 並べ替えとフィルターの下で、フィルターを有効にするをオンにします。
   
3. 変更を適用するには、保存をクリックします。

カテゴリおよび検索ページでのフィルター表示制限の理解

最適なパフォーマンスを確保するために、フィルタは商品数がサポートされている範囲内の場合にのみ表示されます：

• カテゴリページ：最大5,000アイテムまで。
• 検索結果ページ：最大1,000アイテムまで。