スタンダードページ:商品一覧ページのレイアウト

4. EC + SC (EN).png

*Note: "標準ページ" 機能は現在、Ultra Chic テーマテンプレートのみをサポートしています。システム的なレイアウトの懸念に関して、この機能は、レイアウトエンジンを使用し、HTMLエディタに "products.liquid" ファイルが含まれているビジネスオーナーには利用できません。

SHOP Builderを使用した高度なページは "標準ページ" をサポートしており、すべての高度なページのレイアウトを細部にわたって調整できます。"商品一覧ページレイアウト" 機能内では、パーツのレイアウトを配置し、形式や配置を調整できます。さらに、SEO効果を高めるために関連テキストを挿入することもできます。

目次:

 

1. 「商品一覧ページレイアウト」エディタに移動

SHOPLINE管理画面で、[オンラインストアデザイン] > [ページ] > [標準ページ]に移動し、「商品一覧レイアウト」の右側にある編集をクリックします。
pastedGraphic_1.png


商品一覧ページレイアウトのエディタに入ります。pastedGraphic_2.png


プレビューウィンドウの上にあるドロップダウンリストをクリックして、表示したい商品一覧ページを切り替えます(これらのページは、管理画面 > [商品 & カテゴリ] > [カテゴリ]で設定したカテゴリです)。pastedGraphic_3.png

*注意:

  • 商品一覧ページレイアウトエディタは、左サイドバーのSEO設定をサポートしていません。
  • オンラインストアデザインのためにレイアウトエンジンを有効にしている場合、標準ページを使用することはできません。標準ページでレイアウトを編集するには、"products.liquid" ファイルを削除する必要があります。 
    截圖 2023-09-05 上午10.49.06.png

 

2. 商品一覧ページレイアウトを調整

商品一覧ページエディタでは、「お知らせバナー」、「ヘッダー」、「フッター」およびその他のパーツを編集できます。お知らせバナー、ヘッダー、および フッターは、SHOP Builderと同じ設定手順と効果を共有しています。このセクションでは、他のパーツの設定について紹介します。

商品一覧ページレイアウトでは、パーツは固定パーツと可動パーツ(灰色の背景のもの)に分けられます。固定パーツは再配置できませんが、可動パーツは調整、追加、または削除できます。
pastedGraphic_5.png

 

i. 固定パーツ

固定パーツは再配置、追加、または削除できません。コンテンツのみを調整できます。

A. パンくずリスト

*Note: この機能はデスクトップ版のみをサポートし、モバイル版はサポートしていません。

商品一覧ページのパンくずナビゲーションを設定できます。「パンくずリストを有効にする」トグルをオンにすると、顧客は商品カテゴリを閲覧する際に上部に自分の足跡を見ることができます。パンくずリストは左/中央/右に配置できます。
pastedGraphic_6.png

 

  • パンくずリストの例:
    pastedGraphic_7.png

     

B. バナー

バナーを設定するには、管理画面 > [商品 & カテゴリ] > [カテゴリ] に移動し、編集したいカテゴリを選択します。すぐに設定に進むには設定に移動をクリックします。バナーの設定の詳細については、商品カテゴリの設定を参照してください。

pastedGraphic_8.png

 

C. サイドメニュー

  • カテゴリメニュー

*Note: この機能はデスクトップ版のみをサポートし、モバイル版はサポートしていません。モバイルサイドメニューを調整するには、「ストア設定」に移動してさらに設定してください。

「カテゴリメニュー」ドロップダウンリストを開くと、「カテゴリメニューを有効にする」トグルが表示されます。トグルをオンにすると、カテゴリメニューがストアフロントに表示されます。トグルをオフにすると、カテゴリメニューは表示されません。
pastedGraphic_9.png

 

  • オンラインショップフィルタリング

オンラインショップフィルタリングを設定するには、管理画面 > [商品 & カテゴリ] > [カテゴリ] に移動し、オンラインショップフィルターをクリックします。すぐに設定に進むには設定に移動をクリックします。オンラインショップフィルタリングの詳細については、ショップカテゴリの高度なフィルタリングを参照してください。
pastedGraphic_10.png

 

D. タイトル

「タイトルを有効にする」トグルをオンにすると、商品カテゴリのタイトルが表示されます。トグルをオフにすると、タイトルは表示されません。また、タイトルテキストを左寄せ/中央寄せ/右寄せに設定することもできます。pastedGraphic_11.png


E. 並べ替え

商品並べ替えオプションの言語とスタイルを調整できます。pastedGraphic_12.png


スタイルは、テキスト、アイコン、またはアイコン&テキストのいずれかを選択できます。pastedGraphic_13.png

 

ii. 移動可能なウィジェット

移動可能なウィジェットは、垂直に再配置できます。ウィジェットの内容を調整し、新しいものを追加/削除できます。その中で、「説明」と「商品リスト」ウィジェットは再配置と調整のみ可能で、追加/削除はできません。

A. 説明

マーケティングとSEO最適化のために、商品リストページにカスタム説明を挿入できます。
pastedGraphic_14.png

  1. カテゴリページに説明を追加: 
    管理者に進み、[商品&カテゴリ] > [カテゴリ]を選択し、設定したいカテゴリの右側にある編集をクリックしてください。
  2. 「すべてのショップ」ページに説明を追加: 
    管理者に進み、[オンラインストアデザイン] > [ページ]を選択し、「すべてのショップ」ページの右側にある編集をクリックしてください。

「カテゴリ説明」ボックスにカスタムコンテンツを入力し、更新をクリックして説明の追加を完了します。pastedGraphic_15.png

 

  • 説明の例blobid16.png

 

B. 商品リスト

商品リストのテキスト言語、画像の比率、列ごとの商品数(左右)を調整できます。

  • 言語:サポートされている言語を選択できます。
  • 商品画像の比率:長方形(3:4)または正方形(1:1)を選択できます。
  • 列ごとの商品数(PC):1列あたり1〜5商品の中から選択できます。
  • 列ごとの商品数(モバイル):1列あたり1または2商品を選択できます。
    pastedGraphic_17.png

 

C. その他の移動可能なウィジェット

追加および削除可能なその他の移動可能なウィジェットは、SHOPビルダーのものと同様です。以下の通りです:

*Note:ウィジェットについて詳しく知りたい場合は、上記のリンクをクリックしてよくある質問をお読みください。

 

3. 公開

商品リストページのレイアウトを調整した後、設定が有効になるようにレイアウトを公開する必要があります。右上の公開をクリックしてください。
pastedGraphic_18.png

 

これが初めて商品リストページのレイアウトを編集する場合、システムはレイアウトが「すべての商品(すべてのショップ)」ページ、「カテゴリ」ページ、および「検索結果」ページに適用されることを通知します。レイアウトを適用すると、商品リストページの元の設定は新しく調整された設定に置き換えられることに注意してください。レイアウトを公開するにはOKをクリックしてください。
pastedGraphic_19.png

 

さらに読む

 

 

 

 

 

この記事はAIを使用して翻訳されており、不正確な部分が含まれている可能性があります。最も正確な情報については、元の英語版を参照してください。

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

コメント