Shopper Appでのカスタムツールを活用したブランドアプリの機能強化 – SHOPLINE ヘルプセンター

SHOPLINEは現在、ブランドアプリのカスタマイズ機能を強化しており、アプリページの外観や機能をより細かく制御できるようになりました。カスタムパーツやウェブページを作成することで、ブランドにより適したストアアプリ体験を提供し、ビジネスニーズに応じた調整が可能です。

このガイドでは、対応しているページタイプ、設定方法、およびテーマエディターを使ったカスタムパーツの追加方法について説明します。

対応しているカスタマイズ方法と適用ページ

さまざまな表示ニーズに対応するため、SHOPLINEでは柔軟なページカスタマイズツールとしてカスタムパーツとカスタムページの2種類を提供しています。それぞれ異なる目的を持ち、組み合わせてより充実したアプリ体験を実現できます。

カスタムパーツは特定のページにカスタマイズしたコンテンツブロックを挿入できる機能です。パーツを作成する際には対象ページを指定する必要があります。作成後はコードエディターやテーマエディターを使って他の対応ページにも追加可能です。対応ページは以下の通りです：

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

別のページにカスタムページへのリンクやボタンを表示したい場合は、カスタムパーツを使ってエントリーを埋め込むことで、スムーズなナビゲーションとコンテンツ統合が可能です。あるいは、ディープリンクを使ったリダイレクトページとして設定することもできます。

すべてのカスタムパーツとウェブページはSHOPLINE管理画面で一元管理できます。作成および編集は単一のインターフェースで行い、一貫性と効率性を確保しています。

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

2.0_EN.png

割り当てるページ: カスタムコンポーネントを表示したいページを選択します。

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

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

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

カスタムパーツを作成して公開したら、テーマエディターを使ってストアの対応ページに追加できます。

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