従量課金制での月額料金を計算しましょう
28 2月, 2023BON LoyaltyウィジェットとSPA
18 10月, 2023顧客アカウントページのポイント
顧客アカウントページにBON Loyalty拡張機能を設定する方法をご紹介します。
重要:この機能はCustomer Account Loginタイプを使用している店舗で利用可能です。Legacyアカウントには対応していません。
はじめに
アプリ埋め込みとは、テーマ上に重ねて表示するアプリ要素や、オンラインストアに追加するコードで、顧客には直接見えない機能です。ストアの隅に表示されるチャットバブルアプリや、ロイヤルティポイントとリワードを表示するコールアウトカードなどがあります。
With BON Loyalty, there are 4 options to showcase your loyalty program on the プロフィール, Account, Order Status, and Thank You pages.
概要
BON customer-account-ui on the Profile page
- To add the bon-customer-account-ui app embed on the Profile page > Go to Themes > Customize.

- ページ一覧でチェックアウトと顧客アカウントを選択します。

- アプリ に進み、bon-customer-account-ui という拡張機能を見つけます。これを プロフィールページ に追加し、好みに合わせて位置を調整します。

- 拡張機能に表示されるコンテンツもカスタマイズできます。ただし、BON Loyalty から同期された値を表示するために使用されている ‘{{_}}’ 内の属性は変更しないでください。

- {{first_name}} {{last_name}} の両方を表示したくない場合は、メッセージに合う方を選び、{{first_name}} または {{last_name}} のいずれか一方のみを使用できます。



BON full-page-extension on the Account page
After adding the bon-customer-account-ui app embed above, don’t forget to add the bon-loyalty-fullpage-extension. With this extension, the customer shopping experience is enhanced by adding a dedicated tab for tracking membership progress, viewing membership tiers, or checking and redeeming points directly on the new Customer Account page. All these features can be found in the bon-loyalty-fullpage-extension.
- このフルページの動作については、こちらの動画をご覧ください。

- Here’s what the bon-loyalty-fullpage-extension appears on the actual new Customer Account page.

重要:必要なすべてのプログラム(例:VIPランク、ポイント獲得プログラム、ポイント交換プログラム)を有効化していることを必ず確認してください。ブランド向けのカスタマイズ(色、フォント、文字色など)はShopifyテーマに合わせて同期され、手動で変更することはできません。
BON referral-program-extension on the Thank You page
On the Thank You page, you can add the bon-referral-program-extension to make it easy for customers to access their referral link and share it with friends and family, helping you attract more organic traffic.
- As you are already in the editing tab for Checkout and customer account, go to Apps > Select extensions called bon-referral-program-extension > Add it to the Thank You page.
重要:: Shopify currently does not allow app embed extensions to be displayed in the Theme preview for the Thank You page. After adding the bon-referral-program-extension to the Thank You page, please place a test order to view it on the actual Thank You page from the customer’s perspective.

Here’s what the bon-referral-program-extension appears on the actual Thank You page.

BON referral-program-extension & order-point-rewards on the Order Status page
The bon-referral-program-extension and bon-order-point-rewards app embeds allow customers to easily refer their friends and see how many points they earned from the order they’ve just completed on the Order Status page.
重要:: Please ensure that you have activated the Referral Program and rewards in BON > Point programs > ポイント交換. Also, in Shopify > Settings > Customer accounts, make sure the Customer Account login type is selected. Otherwise, these extensions will not appear.

- As you are already in the editing tab for Checkout and customer account, go to Apps > Select extensions called bon-referral-program-extension > Add it to the Order Status page.

- To edit its content, you can adjust the default text by typing in the text inputs in the left corner. While editing, please make sure you do not change the attributes in the {{_}}. The direct link in the hyperlink text is by default and cannot be changed.

- As you are already in the editing tab for Checkout and customer account, go to Apps > Select extensions called bon-order-point-rewards > Add it to the Order Status page.

To edit its content, you can update the default text by typing into the text fields located in the left corner. While editing, please ensure you do not modify any attributes within {{_}}.
The hyperlink in the View rewards text cannot be changed. It automatically redirects customers to the bon-loyalty-fullpage-extension on the Account page.

Can app embed content be displayed in multiple languages?
Shopify currently doesn’t support multi-language content for app embeds in Shopify themes, so the content can only be displayed in one language. Shopify will automatically detect your store’s default language and display the content in that language.
The text fields in the Block settings (located in the left column) can also be edited in only one language.
