ショッパーアプリでのカスタムツールを使ったストアアプリの強化

SHOPLINEは、ストアアプリのカスタマイズを強化し、アプリページの外観と機能をよりコントロールできるようになりました。カスタムコンポーネントやウェブページを作成することで、ストアアプリの体験をブランドにより適合させ、ビジネスニーズに応じて調整できます。

このガイドでは、サポートされているページタイプ、設定方法、およびテーマエディタを使用してカスタムコンポーネントを追加する方法について説明します。

サポートされているカスタマイズ方法と適用ページ

さまざまなシナリオにおける表示ニーズに応えるために、SHOPLINEは2つの柔軟なページカスタマイズツールを提供しています： カスタムコンポーネント と カスタムページ。それぞれ異なる目的に使用され、より完全なアプリ体験を実現するために一緒に使用できます。

カスタムコンポーネント

カスタムコンポーネントを使用すると、特定のページにカスタマイズされたコンテンツブロックを挿入できます。コンポーネントを作成する際には、ターゲットページを指定する必要があります。後でコードエディタまたはテーマエディタを介して他のサポートされているページにコンポーネントを追加できます。サポートされているページには以下が含まれます：

• ホームページ
• 商品詳細ページ
• ショッピングバッグ
• クイック追加パネル
• カスタムページ

カスタムウェブページ

カスタムウェブページは、プロモーションランディングページやブランドストーリーページなどのスタンドアロンページを作成するために使用されます。一度公開されると、コンテンツは即座にライブになり、テーマエディタでの追加設定は不要です。

他のページにカスタムページへのリンクやボタンを表示するには、カスタムコンポーネントを使用して埋め込むことができ、ストアのさまざまな部分間でスムーズなナビゲーションとコンテンツ統合を可能にします。あるいは、それをディープリンクを使用してリダイレクトページとして設定することもできます。

カスタムコンポーネントとウェブページの作成

すべてのカスタムコンポーネントとウェブページは、SHOPLINEの管理画面で直接管理できます。作成および編集プロセスは、整合性と効率を確保するために単一のインターフェースに集中しています。

カスタマイズ設定にアクセスするには、SHOPLINE管理画面のShopper App > アプリ設定 > カスタム開発に移動します。このページでは、異なるカスタマイズ機能に対応する2つのタブ、カスタムブロックとカスタムウェブページが表示されます。

カスタムコンポーネントの作成

1. カスタムブロックタブで、右上隅のカスタムブロックを作成をクリックします。
   
2. 右側の設定パネルで、以下の詳細を入力します：

• • ブロック名：コンポーネントを簡単に識別し、将来の管理のために名前を付けます。
  • ブロックの説明（オプション）：必要に応じて簡単な説明を提供します。
  • 割り当てページ：カスタムコンポーネントを表示したいページを選択します。
    

    Note: コンポーネントを保存または公開するには、少なくとも1つのページに割り当てる必要があります。後でコードエディタに戻って追加のページを割り当てたり、テーマエディタを使用してコンポーネントを追加したりできます。

• • ブロックプレビュー画像：コンポーネントプレビューとして使用する画像をアップロードします。

3. コードエディタで、HTML、CSS、またはJavaScriptを使用してカスタムコードを書きます。
   
4. 右側のパネルで、プレビュータブに切り替えて、コンポーネントがストアフロントにどのように表示されるかを確認します。
   
5. 保存をクリックして、コンポーネントを保存し、さらに編集します。この段階でページにコンポーネントを挿入すると、開発中のラベルが表示されます。開発が完了したら、公開をクリックしてコンポーネントをライブにし、ページに正しく表示させます。
   

カスタムコンポーネントを作成した後は、この記事の次のセクションを参照して、テーマエディタを使用して追加する方法を学んでください。

カスタムウェブページの作成

1. カスタムウェブページタブで、右上隅のカスタムウェブページを作成をクリックします。
   
2. 右側の設定パネルで、ページ名を入力し、オプションで説明を追加します。
   
3. コードエディタで、HTML、CSS、またはJavaScriptを使用してカスタムコードを書きます。
   
4. 右側のパネルで、プレビュータブに切り替えて、ページがストアフロントにどのように表示されるかを確認します。
   
5. 保存をクリックして、将来の編集のためにページを保存するか、公開をクリックしてライブにします。
   

テーマエディタでのカスタムコンポーネントの追加

カスタムコンポーネントを作成して公開したら、テーマエディタを使用してストアのフロントエンドのサポートされているページに追加できます。

1. あなたのSHOPLINE管理画面から、Shopper App > アプリ デザインに移動し、デザインをクリックしてテーマエディタを開きます。
   
2. テーマエディタで、カスタムパーツを挿入したいページに移動します。（この例では、ホーム ページを使用します。）
   
3. 左側のパネルで+ パーツを追加をクリックし、カスタムタブに切り替えて、追加したいカスタムパーツを選択します。あるいは、+ カスタムブロックを作成をクリックしてコードエディタに移動し、新しいカスタムパーツを作成します。
   
4. 必要に応じて、ページレイアウト内でパーツをドラッグして位置を調整します。
   
5. 保存をクリックして変更を保存し、さらに編集するか、公開 > ライブアプリに公開をクリックして変更を即座に公開します。
   

ヒントとベストプラクティス

カスタムパーツとウェブページが最良の体験を提供するために、以下のヒントを心に留めておいてください：

デザインの一貫性とブランドの整合性を維持する

ストア全体のブランディングに合ったフォント、色、間隔を使用してください。一貫したデザインは信頼を築き、ショッパーにとってスムーズなブラウジング体験を提供します。

モバイルデバイス向けにレイアウトを最適化する

カスタムパーツが完全にレスポンシブで、異なる画面サイズで適切に表示されることを確認し、アプリ内でスムーズでユーザーフレンドリーな体験を提供します。

パフォーマンスを考慮する

ページの読み込み時間を遅くする可能性のある重いスクリプトや大きな画像の過剰使用を避けてください。効率的でクリーンなコードは、パフォーマンスを向上させるだけでなく、SEOや全体的なユーザー体験も向上させます。