商品スライダー パーツ | Shopper App

4. EC + SC (EN).png

12. ブランド会員ショッピング App.png

アプリのトップページを編集する際に、「商品スライダー」パーツを追加し、右にスワイプしてさらに多くの商品を表示できます。これにより、すっきりとしたレイアウトを持つことができ、顧客が商品を閲覧し、インタラクションの感覚を高めることができます。

 

ステップ 1

SHOPLINE 管理者 > [Shopper App 管理] > [アプリ デザイン] > [トップページ デザイン] > [現在のテンプレート] に移動します。セットアップをクリックしてアプリページエディタに入ります。

Screenshot 2025-09-02 at 1.37.54 PM.png

 

ステップ 2

パーツを追加をクリックし、商品スライダーパーツを選択します。プレビューエリアにドラッグして、パーツを挿入します。

Add_an_element_EN.png

EN3.png

 

ステップ 3

右側の編集エリアにパーツのタイトルを入力します。

EN4.png 

ステップ 4

フォントの色を設定します。

Screenshot 2025-10-08 at 4.36.09 PM.png

 

ステップ 5

表示ボタントグルをオンにすると、商品スライダーの右上に表示される「ボタンテキスト」を入力する必要があります。ジャンプリンクは必要ありません。顧客はボタンをタップすると、商品を閲覧するためにネイティブの商品リストページに移動します。

EN6.png

 

ステップ 6

利用可能なジャンプリンクオプションは3種類、「商品リストページ、プロモーション、カスタムURL」です。

i. 商品リストページ

「商品リストページ」をチェックしたビジネスオーナーは、以下に示す「編集」アイコンを使用して、さらに多くの商品を選択できます。

Screenshot 2025-09-12 at 4.36.04 PM.png

 

ii. プロモーション

「プロモーション」をチェックしたビジネスオーナーは、⊕ プロモーションキャンペーンを選択をクリックし、ポップアップウィンドウで希望のキャンペーンを選択してください。確認後、確認をクリックします。プロモーション要素の設定方法の詳細については、この記事を参照してください。

Screenshot

 

iii. カスタムURL

「カスタムURL」をクリックしたビジネスオーナーは、フィールドにリンクを入力してください。入力したリンクは「https://」または「http://」で始まる必要があります。

Screenshot

 

*注:パーツを一番右にスライドさせると「もっと」ボタンが表示されます。以下を参照してください:

EN8.png

 

ステップ 7

次に、商品または商品カテゴリを選択します。

EN9.png

 

i. 商品を選択する場合

表示したい商品(最大500商品)のボックスを選択し、設定を保存するために確認をクリックします。

*注:

  • 追加された商品数に関係なく、スライダー要素は最大10商品を表示できます。「もっと」をクリックして商品リストに入って残りの商品を表示する必要があります。
  • Shopper Appプラットフォームバージョン1.15以前に50商品以上を追加した場合、システムは最初の50商品を自動的に表示します。

Screenshot 2025-09-12 at 4.40.24 PM.png

 

ii. 商品カテゴリを選択する場合

追加したいカテゴリのボックスをチェックし、設定を保存するために確認をクリックします。

以下に示す「下向き矢印」アイコンをクリックして、ドロップダウンリストからサブカテゴリを追加します。

*注:商品カテゴリは1つしか追加できません。

EN11.png

 

ステップ 8

表示スタイルを選択します。

i. スタイル設定

表示したい商品情報のボックスをチェックします。

EN12.png

 

ii. 商品表示ルール

売り切れまたは非表示の商品を表示するかどうかを決定できます。トグルをオンにして更新すると、顧客はアプリで非表示の商品を見ることができます。

EN13.png

*注意:

  • 未公開の商品は自動的にフィルタリングされます。
  • ここで設定した表示ルールは、「もっと見る」ボタンがジャンプする商品リストページに同期されます。
  • 売り切れ商品を表示しないを選択した場合、在庫が無限の商品もフィルタリングされます。
  • 商品表示順がカスタムソートの場合、「売り切れ商品を表示」トグルはONになり、「非表示商品を表示」はOFFになりますが、これはここでの設定とは無関係です。

 

ステップ 9

必要に応じてリリーススケジュールを設定します。

schedule_EN.png

 

ステップ 10

現在の設定を保存するには保存をクリックします。すべての編集が完了したら、設定をアプリに公開するには更新して使用をクリックします。

Screenshot 2025-09-12 at 4.42.34 PM.png

 

 

 

さらに読む

 

 

 

 

 

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

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

コメント