画像とテキストのリストパーツ｜Shopper App

アプリのトップページを編集する際に、「テキスト付き画像リスト」パーツ（次の記事で見るように「コンポーネント」とも呼ばれます）を追加することで、希望するプロモーション活動や特集カタログを追加できます。また、必要に応じてパーツの位置を調整することもできます。

この記事では、以下の内容を紹介します：

• テキスト付き画像リストパーツの追加
• テキスト付き画像リストパーツの編集

1. テキスト付き画像リストパーツの追加

ステップ 1

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

ステップ 2

 ⊕ 要素を追加をクリックします（ページ上に2つのエントリがあります。以下のように表示されます）。

ステップ 3

「テキストと画像リスト」コンポーネントを選択し、「ここに要素を配置」と書かれた青い背景のプレビューエリアにドラッグします。「配置を確認」というメッセージが表示されたら、追加が成功したと考えられます。

2. テキスト付き画像リストパーツの編集

ステップ 1

「コンポーネントタイトル」を設定します。右側の「コンポーネントタイトル表示」トグルはデフォルトでオンになっています。オンにすると、矢印で示されたように、要素の上部に表示されるコンポーネントタイトルフィールドに入力できます。

ステップ 2

「ボタン表示」を設定します。このトグルは右側でデフォルトでオンになっています。

i. 「ボタンテキスト」フィールドに入力

フィールドに入力すると、内容が要素の右上に表示されます。

ii. 「ジャンプリンク」フィールドに入力

• 「ジャンプリンク」を設定します。システムはデフォルトで「カスタムURL」になっており、現在は「https://」または「http://」で始まるリンクのみがサポートされています。
  
   
• 「カテゴリ」を選択した場合は、⊕ 商品カテゴリを選択をクリックしてください。ポップアップウィンドウで適切なカテゴリを選択し、確認をクリックします。
  
   
• 「プロモーション」を選択した場合は、⊕ プロモーションキャンペーンを選択をクリックしてください。ポップアップウィンドウで適切なカテゴリを選択し、確認をクリックします。
  

ステップ 3

テキスト付き画像リストの明示的（表示される）画像の数を設定します。デフォルトの表示数量は2です。スライダーをドラッグして表示される画像の数を調整できます。画像の数は1から2の範囲で設定できます。

ステップ 4

画像の「リストタイトル」と「説明テキスト」を表示するかどうかを設定します。表示トグルはデフォルトでオンになっています。

リストタイトルと説明テキストは画像の左下に表示されます。

ステップ 5

「リリーススケジュール（オプション）」フィールドは必須ではありません。「日付を選択」またはフィールドの右側にある「カレンダー」アイコンをクリックして日付を選択します。日付を選択したら、OKをクリックしてプロセスを完了します。

ステップ 6

左側の要素エリアでテキスト付き画像リストをクリックすると、右側の編集エリアに設定用の対応するフィールドが表示されます。ここで画像を希望通りに編集できます。

ステップ 7

下の画像の赤いボックス内の画像を追加をクリックして、写真をアップロードします。写真の幅は、テキストリストの画像の幅に指定されたカスタム幅に従います。

ステップ 8

表示される「パーツタイトル」と「ボタンテキスト」を入力します。これらのフィールドは、前述の「リストタイトルを表示」と「説明テキストを表示」のトグルがオフになっている場合は表示されません。

ステップ 9

「ジャンプリンク」を設定します。ステップ 2を参照してください。

ステップ 10

アプリはデフォルトで3つの画像を表示するように設定されています。⊕ テキスト付き画像リストを追加 (X/20)をクリックして、さらに画像を追加します。最大で20まで追加できます。

*Note: アプリはデフォルトで「テキスト付き画像リスト 1」と「テキスト付き画像リスト 2」を表示します。「テキスト付き画像リスト 3」の一部のみが画面に表示されます。顧客は右にスワイプして、さらに画像を表示できます。

ステップ 11

コンポーネントを移動または削除する必要がある場合は、左側のエリア、中央のプレビューエリア、または右側の編集エリアの下部で関連するアクションを実行できます（下の番号1から3で示されています）。

ステップ 12

設定が完了したら、保存をクリックして、要素の変更を保存します。アプリのトップページでのすべての編集が完了したら、更新して使用をクリックして、編集内容を公開します。