商品リストパーツ｜SHOP Builder

ページに商品リストのパーツを追加して、主要な商品を表示し、顧客の注意を引くことができます。

⚠️ 始める前に：

• ショップビルダーは現在、ウルトラシック、キングスマン、ヴァーム、フィリアのテーマテンプレートのみをサポートしています。
• ショップビルダーを使用してページを作成した後、他のテーマテンプレートに切り替えてもページは表示されますが、編集できず、レイアウトが崩れる可能性があります。ページを公開する前にこの点に注意してください。

1. 商品リストのパーツを追加する

ステップ 1

SHOPLINE管理画面に進み、> [オンラインストアデザイン] > [ページ]をクリックし、[高度なページ/編集]ボタンをクリックして高度なページ設定を開きます。

ステップ 2

ウィジェットボタンをクリックします。

ステップ 3

商品リストのパーツをクリックします。

ステップ 4

+ 商品をクリックしてカスタム商品リストを作成するか、+ カテゴリをクリックして既存の商品リストを選択します。

*Note: ページごとに最大10個の「+ カテゴリ」を追加できます。ページに商品リストまたは 商品スライダー ウィジェットが含まれている場合、合計の「+ カテゴリ」は10を超えることはできません。

1. カスタム商品リストを作成する

+ 商品をクリックして商品を選択します。カスタム商品リストには最大25個の商品を選択できます。選択後、次へをクリックして続行します。

選択した商品をドラッグ＆ドロップして順序を再配置します。確認をクリックして続行します。

左側のバーの下部にある保存をクリックして商品リストをプレビューします。鉛筆アイコンをクリックして商品選択ウィンドウを再度開きます。鉛筆アイコンの隣にあるゴミアイコンをクリックして、選択したすべての商品を削除します。上部の赤いゴミ箱をクリックして「+ 商品」パーツを削除し、再度+ 商品または+ カテゴリを選択します。

*Note:

• カスタム商品リストには「もっと見る」ボタンは利用できません。
• モバイル版のレイアウトは、列ごとに2商品までしかサポートしていません。

2. 既存の商品カテゴリを選択する

+ カテゴリを追加をクリックして商品カテゴリを選択します。確認をクリックして続行します。

左側のバーの下部にある保存をクリックして商品リストをプレビューします。鉛筆アイコンをクリックして商品選択ウィンドウを再度開きます。鉛筆アイコンの隣にあるゴミアイコンをクリックして、選択したすべての商品を削除します。上部の赤いゴミ箱をクリックして「+ 商品」パーツを削除し、再度+ 商品または+ カテゴリを選択します。

ステップ 5

商品リストのタイトルを編集し、見出しのサイズを選択します。

*Note: このフィールドを空白のままにすることもできます。その場合、ページにはタイトルが表示されません。

左上の言語ドロップダウンリストをクリックして開きます。このドロップダウンリストには、ストアでサポートされているすべての言語が表示されます。各言語に対して商品リストのタイトルを入力できます。


 

タイトルのテキストの配置も設定できます。（左/中央/右）

ステップ 6

「もっと見る」ボタンを表示するかどうかを選択します。


 

A. 「+ 商品」を選択した場合

このトグルがオンでもオフでも、システムは「もっと見る」ボタンを表示しません。そうでなければ、すべての商品が表示されます。

B. 「+ カテゴリ」を選択した場合

トグルをオンにすると、商品数が設定された表示数を超える場合、「もっと見る」ボタンが表示され、顧客は完全な商品リストをクリックして表示できます。トグルをオフにすると、ボタンは非表示になり、商品は設定されたレイアウトに従って表示されます。

*Note: Shopper Appは現在この機能をサポートしていません。

ステップ 7

画像関連の設定を編集します。

A. 商品の比率

商品画像の比率を設定できます。


 

B. 行あたりの商品数 & 列あたりの商品数

商品行数（左右）と列数（縦）を設定できます。

*Note：

• 行はデフォルトで3、列は2に設定されています。行の最大数は5、列の最大数は8です。
• 列数と行数はPC版でのみ調整できます。モバイル版のレイアウトはPC版の画像数に応じて変更され、行あたり2列に固定されます。（例えば、PC版が3列2行で合計6商品であれば、モバイル版は2列3行で合計6商品を表示します）。
• 商品が表示される順序は、Adminで設定された商品カテゴリの順序に基づいています。変更が必要な場合は、SHOPLINE Admin > [商品 & カテゴリ] > [カテゴリ]に移動し、商品カテゴリをクリックして商品順序を調整してください。
• ステップ4でカスタム商品リストを作成することを選択した場合、商品リストは行の順序に基づいてのみ配置されます。列数を調整しても影響はありません。

C. パディング

画像とページのパディングを調整できます。パディングの詳細については、この記事を参照してください。

ステップ8

隠された商品を表示するかどうかを選択します。オンにすると、顧客はストアフロントで隠された商品を見ることができます。

*Note： 公開されていない隠された商品は表示されません。隠された商品の設定方法を学びたい場合は、隠された商品を参照してください。

ステップ9

設定プロセス中に、下の保存ボタンをクリックして、右側に新しく追加された商品リストパーツのプレビューを表示できます。

 

または、右上のプレビューボタンをクリックして、ストアフロントでプレビューを表示します

ステップ10

上記の設定を確認した後、右上の公開ボタンをクリックしてください。顧客はこのページのすべての新しく追加されたコンテンツをストアフロントで見ることができます。

さらに読む

• お知らせバナー / ヘッダー設定 | ショップビルダー
• テキストパーツ | ショップビルダー
• ギャラリーパーツ | ショップビルダー
• 画像とテキストのパーツ | ショップビルダー
• スライダーパーツ | ショップビルダー
• 商品スライダーパーツ | ショップビルダー
• SEO設定 | ショップビルダー
• フッター設定 | ショップビルダー