スライド可能なバナーパーツ｜Shopper App

スライド可能なバナーを追加して、キャンペーンや特別な商品を強調表示できます。各バナーは最大で 10 画像とURLを表示できます。また、スライド可能なバナーの位置や内容を変更することもできます。

 

ステップ 1

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

 

ステップ 2

 

ステップ 3

右側のバーで関連する内容を編集します。

i. 自動切替時間間隔を設定

「自動切替時間間隔」のドロップダウンメニューをクリックすると、「3s」と「5s」の2つのオプションが表示されます。

 

ii. フル幅

このオプションを有効にすると、画像/動画が端から端まで表示され、空白の余白がなくなります。

 

iii. 画像の比率を設定

バナー画像のストアフロントでの表示効果に応じて、「左右」、「縦」、「元の画像比率」の3つの異なる設定から選択できます。

• 左右レイアウトの比率は16:9です。
  
   
• 縦レイアウトの比率は9:16です。
  
   
• 元の画像比率は、アスペクト比を変更せずに完全な画像を表示します。
  

iv. リリーススケジュールを設定

必要に応じてリリーススケジュールを設定します。バナーの開始時間と終了時間を設定するには、フィールドの右側にある「カレンダー」アイコンをクリックします。

 

ステップ 4

左側のパーツエリアで⊕ 追加 (X/10)をクリックして、スライド可能なバナー要素に画像または動画を追加します。最大で10枚の画像または動画を追加できます。要素を追加する際に、デフォルトで画像が追加されます。

ステップ 5

右側の編集エリアで追加した画像を設定します。上記のように、スライド可能なバナータイプとして画像をクリックします。

i. 画像を追加

画像をアップロードするために、+ 画像を追加をクリックします。適切なサイズで画像をアップロードするために、灰色の指示を注意深く読みます。

 

ii. マスクの強度を選択

システムのデフォルトは20%です。ドロップダウンメニューをクリックして、希望するマスクの強度を選択できます。利用可能なオプションは「0%、20%、40%、60%、80%」の5つです。

 

iii. タイトルと内容を入力

コンポーネントの言語表示は「英語、繁体字中国語、簡体字中国語」の順に従います。つまり、すべてが入力されている場合、インターフェースは英語を表示します。

 

iv. ボタン表示の設定

ボタン表示の表示ボタントグルをオンにしたら、ボタンのタイトルを入力します。ボタンはスライダブルバナーコンポーネントの中央に表示されます。

 

v. ジャンプリンクの設定

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

A. カテゴリ

「カテゴリ」をチェックしたビジネスオーナーは、⊕ 商品カテゴリを選択をクリックし、ポップアップウィンドウで適切なカテゴリを選択してください。確認後、確認をクリックします。商品リストパーツの設定方法の詳細については、この記事を参照してください。

 

B. プロモーション

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

 

C. カスタムURL

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

 

vi. フォントの配置と色の設定

 

ステップ6

右側の編集エリアで追加した動画を設定します。スライダブルバナータイプとして動画をクリックします。これはステップ4で示されています。

i. YouTubeまたはVimeoの埋め込みリンクを入力

 

ii. マスクの強度を選択

システムのデフォルトは20%です。ドロップダウンメニューをクリックして強度を調整できます。利用可能なオプションは「0%、20%、40%、60%、80%」の5つです。

 

iii. タイトルと内容を入力

再度ステップ5のiiiを参照してください。

 

iv. フォントの配置と色を設定

再度ステップ5のviを参照してください。

ステップ7

「スライダブルバナー」要素の追加が完了したら、保存をクリックして変更を保存できます。そして、全体のトップページの編集が完了したら、更新して使用をクリックして、アプリに変更を公開します。