商品スライダーパーツ｜SHOP Builder

Avatar
SHOPLINE TW Copywriters

4. EC + SC (EN).png

ページを編集する際に商品スライダーのパーツを追加し、スライドショー形式で商品を表示できます。商品スライダーは、簡潔で整然としたレイアウトを示し、顧客が自由に商品をスクロールしてページと対話できるようにします。

⚠️ 始める前に：

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

 

1. 商品スライダーのパーツを追加する

ステップ 1

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

 

ステップ 2

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

 

ステップ 3

商品スライダーのパーツを選択します。pastedGraphic_2.png

 

ステップ 4

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

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

 

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

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

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

 

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

*Note: 「もっと見る」ボタンはカスタム商品リストには利用できません。「ボタンを表示」トグルをオンにしてもボタンは有効になりません。EN new 1.png

 

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

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


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

 

ステップ 5

商品スライダーのタイトルを編集します。

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


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


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

 

ステップ 6

スライダー関連の設定を編集します。

A. ボタンを表示

「ボタンを表示」がオンになっている場合、「もっと見る」ボタンが商品スライダーの下に表示されます。顧客は「もっと見る」をクリックして商品カテゴリページに入り、商品を閲覧できます。
pastedGraphic_12.png


B. 商品の比率

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

 

C. 行ごとの商品数

PC版では行ごとに最大6商品、モバイル版では行ごとに最大3商品を設定できます。

*注意： 顧客は商品スライダーを左右にスワイプすることで商品を閲覧できます。

pastedGraphic_14.png


D. パディング

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

 

E. スタイル（商品を閲覧する）

商品スライダーのスタイルとして「ボタン」と「インジケーター」のいずれかを選択できます。
pastedGraphic_16.png

 

a. ボタン

顧客は左右の矢印をクリックして商品を切り替えることができます。 EN new 3.png


b. インジケーター

顧客は商品スライダーの下部にあるインジケーターをクリックして商品を閲覧できます。 EN new 4.png

 

ステップ 7

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

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

 

ステップ 8

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

 

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

EN new 6.png

 

ステップ 9

上記の設定を確認したら、右上の公開ボタンをクリックしてください。顧客はストアフロントでこのページの新しく追加されたすべてのコンテンツを表示できます。EN new 7.png

 

さらに読む

 

 

 

 

 

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

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

コメント