アプリのトップページデザイン

Shopper App は、柔軟なユーザーインターフェースと一般的なテンプレートの選択肢を備え、アプリ構築プロセスを効率化します。テーマの更新は、リアルタイム同期を介してアプリにシームレスに統合されます。

この記事では、Shopper Appの事前構築されたコンポーネントを活用して、顧客向けに魅力的で視覚的に魅力的なトップページをデザインする方法をご案内します。

トップナビゲーション

SHOPLINEの管理画面で、アプリ ＞ Shopper App ＞ アプリデザイン に移動し、デザイン ボタンをクリックしてデザインエディターを開きます。上部のドロップダウンメニューから、ホームページ を選択します。

トップナビゲーションバーの以下の設定を構成できます。これらの設定は、アプリ内のすべてのページに適用されます：

1. ストアロゴ： 左サイドバーでトップナビゲーション を選択し、変更 をクリックしてストアロゴをアップロードします。4:1のアスペクト比または384px × 96pxのサイズの画像を使用することをお勧めします。
   
2. 左/右ナビゲーションアイコン： トップナビゲーション の左側にある三角形アイコン をクリックしてメニューを展開します。次に、左右のナビゲーションアイコンとそれに対応する表示ページを選択します。
   

お知らせバー

お知らせバー は、トップナビゲーションバーの下に配置されています。ホームページには1つのお知らせバーしか配置できず、削除や並べ替えはできません。選択できる表示スタイルには、水平スライド、垂直スライド、点滅スイッチ、間隔を空けて中央揃え の4つがあります。また、ボードの背景色やテキスト色をカスタマイズし、お知らせのスケジュールを設定することもできます。

お知らせバーには最大3つのお知らせを追加できます。お知らせは削除できませんが、必要に応じて非表示にしたり編集したりできます。

ページネーションコンポーネント

ページネーションコンポーネント は、お知らせバーの下に配置されており、削除や並べ替えはできません。ウェブサイトのホームページに異なるタブを構成するには、以下の手順に従ってください：

1. デフォルトでは、ページネーションコンポーネントは無効になっています。有効にするにはページネーションコンポーネントをクリックしてください。
2. 各セクションをクリックしてタブの名前を編集します。最大10個のタブを追加するには、ページネーションコンポーネントを追加をクリックします。
3. デザインしたいページを選択し、各タブに必要なコンポーネントを追加し、必要に応じて設定を構成します。右側のプレビューパネルでは、タブを動的に切り替え、リアルタイムで適用された効果を表示します。

ボディパーツ

追加するにはコンポーネントを追加をクリックします。ボディパーツには4種類のコンポーネントが用意されています：

基本コンポーネント

• カルーセル：自分の好みに合わせて、自動切り替え間隔、寸法、リリース時間のスケジュールを設定できます。ここには画像や動画を追加することができます。
  • 画像：サポートされているファイル形式はpng、jpg、jpeg、gifです。顧客をコレクションページ、商品詳細ページ、カスタムページ、および任意のウェブページにリンクすることができます。
  • 動画：YouTubeとVimeoのリンクがサポートされています。
    
• カスタム画像バナー：サポートされているファイル形式はpng、jpg、jpeg、gifです。画像の幅は少なくとも1123pxである必要があります。必要に応じてリリース時間をスケジュールします。
  
• カスタム動画バナー：ビデオをローカルにアップロードします。ビデオのサイズは10 MBを超えることはできません。アップロードしない場合はビデオのカバー画像が自動生成されます。希望するアスペクト比を選択し、リダイレクトリンクを挿入し、必要に応じてリリース時間をスケジュールします。
  
• カウントダウン：タイムセールを実施している場合、カウントダウンは緊急感を生み出します。タイトルを付け、終了時間をスケジュールし、テキストの色を選択できます。必要に応じて、カウントダウン後の画像トグルをオンにして、カウントダウンが終了したときに表示される画像をアップロードできます。
  

商品コンポーネント

以下の方法で商品を表示できます。

• 商品リスト： 表示したい商品を含むコレクションを選択します。商品はグリッドで表示されます。コンポーネントにタイトルを付けたり、商品の並び替え方法を決定したり、リリース時間をスケジュールしたりすることができます。必要に応じて「すべて表示」のようなボタンを表示することもできます。ボタンのテキストとリダイレクトリンクをカスタマイズできます。
  
• 商品グリッド： コンポーネントにタイトルを付けたり、表示したい商品の数を決定したり、リリース時間をスケジュールしたりすることができます。必要に応じて「すべて表示」のようなボタンを表示することもできます。ボタンのテキストとリダイレクトリンクをカスタマイズできます。最大5つのコレクションをサブコンポーネントとしてコンポーネントに追加できます。ドラッグアンドドロップで位置を変更できます。各サブコンポーネントをクリックしてコレクションを選択し、コレクションのタイトルを変更し、商品の並び替え方法を決定できます。
  
• 商品カルーセル： 表示したい商品を含むコレクションを選択します。商品はカルーセルで表示されます。コンポーネントにタイトルを付けたり、商品の並び替え方法を決定したり、商品カードのスタイル（フレームまたは通常）と配置を選択したり、リリース時間をスケジュールしたりすることができます。必要に応じて「すべて表示」のようなボタンを表示することもできます。ボタンのテキストとリダイレクトリンクをカスタマイズできます。
  
  
  
• 商品ショーケース： 表示したい商品を含むコレクションを選択します。商品はコラージュで表示されます。コンポーネントにタイトルを付けたり、商品の並び替え方法を決定したり、リリース時間をスケジュールしたりすることができます。必要に応じて「すべて表示」のようなボタンを表示することもできます。ボタンのテキストとリダイレクトリンクをカスタマイズできます。
  
  

  Note: 選択した並び替え方法に従い、コレクション内の最初の6つの商品（無効な商品を除く）がコンポーネントに表示されます。プレビューの番号タグはあなただけに表示され、アプリのホームページには表示されません。

• 商品コレクション表示： 表示したい商品を含むコレクションを選択します。商品は背景の前に表示されます。このコンポーネントはコレクションを特集するのに適しています。商品の並び替え方法を決定したり、必要に応じてリリース時間をスケジュールしたりすることができます。背景には画像をアップロードし、オプションでタイトルとサブタイトルを付けたり、テキストの色をカスタマイズしたり、リダイレクトリンクを設定したりできます。
  

コレクションコンポーネント

以下の方法でコレクションを表示することができます。

• カテゴリ: 画像スタイル（ラウンドまたはスクエア）、列数、タイトルとその配置、およびコンポーネント全体のリリーススケジュールを選択できます。個々のカテゴリについては、各サブコンポーネントにクリックしてカテゴリを指定し、画像をアップロードし、リリース時間をスケジュールできます。
  
• カテゴリショーケース A および カテゴリショーケース B: カテゴリはコラージュで表示されます。カテゴリショーケース A は最大4つのカテゴリをサポートし、カテゴリショーケース B は最大7つのカテゴリをサポートします。全体のコンポーネントには、タイトルを付け、希望の配置を選択し、リリース時間をスケジュールできます。個々のカテゴリについては、各サブコンポーネントにクリックしてカテゴリを指定し、画像をアップロードします。表示順序を調整するにはドラッグアンドドロップしてください。
  
  
  
• カテゴリカルーセル: カテゴリはカルーセルで表示されます。最低4つのカテゴリを指定してください。コンポーネントには最大12個のカテゴリを追加できます。全体のコンポーネントには、タイトルを付け、希望の配置や背景とテキストの色を選択し、リリース時間をスケジュールできます。個々のカテゴリについては、各サブコンポーネントにクリックしてカテゴリを指定し、画像をアップロードし、リリース時間をスケジュールできます。表示順序を調整するにはドラッグアンドドロップしてください。
  
• カテゴリグリッド: カテゴリはグリッドで表示されます。最低1つのカテゴリを指定してください。コンポーネントには最大4つのカテゴリを追加できます。全体のコンポーネントには、タイトルを付け、希望の配置や画像の比率を選択し、リリース時間をスケジュールできます。個々のカテゴリについては、各サブコンポーネントにクリックしてカテゴリを指定し、画像をアップロードします。表示順序を調整するにはドラッグアンドドロップしてください。
  

アプリ

タイムセール：タイムセールアプリで構成したキャンペーンがアプリにショーケースされます。詳細はこちら。

ボトムナビゲーション

顧客がアプリを閲覧している間、すべてのページにボトムナビゲーションが表示されます。デフォルトのコンポーネントを表示するか、カスタムのものを作成するかを選択できます。

デフォルトコンポーネント

エディタで、ボトムナビゲーション の横にあるドロップダウンアイコンをクリックして利用可能なコンポーネントを展開します。次の変更をコンポーネントに加えることができます：

カスタムパーツ

カスタムパーツを追加するには、ナビゲーションを追加をクリックします。タイトルを付け、アイコンを選択し、リダイレクトリンクを設定します。リンクはカスタムページにのみ移動できます。

テキストを非表示にする

ボタンナビゲーションアイコンにテキストを表示するかどうかを選択できます。たとえば、ショップコンポーネントは、オンにすると「ショップ」というテキストなしでアイコンのみが表示されます。

デザインを公開する

編集を完了し、プレビューですべてが正しく表示されていることを確認した後、デザインをアプリに公開するには、右上隅の適用ボタンをクリックします。公開を保留したい場合は、編集内容を保持するために保存をクリックできます。