Loyalty page display with coding

コード表示ロイヤルティページ

非2.0 Shopify テーマでのロイヤルティページ表示方法 without template section apps)

重要なお知らせ：BON のロイヤルティランディングページ表示はBasic プラン以上で利用可能です。詳しくは料金プランをご確認ください。

はじめに

少しのコード調整で、競合と差をつける魅力的なロイヤルティページを作成できます。ぜひこの機会を活かして、お客様のエンゲージメントを高め、売上アップにつなげましょう！

概要

ロイヤルティページを有効化する
 ストアフロントにロイヤルティページを表示

ロイヤルティページを有効化する

BON Loyalty > ブランディング > ロイヤルティページ > ステータス > ロイヤルティページを有効化します。

ストアフロントにロイヤルティページを表示

ロイヤルティページを有効化したら、お客様に見えるように設定しましょう！

1. テーマ内に新しいロイヤルティページテンプレートを作成

Shopify 管理画面 > 販売チャネル > オンラインストア > テーマ に進み、3点ボタンをクリック > コードを編集 を選択します。

Templates フォルダで 新しいテンプレートを追加 をクリック > ページ を選択し、Liquid を選択 > ファイル名（例：bon-loyalty）を入力 > 完了をクリックします。

テンプレート欄に以下のコードを貼り付け、Liquid をフォーマットを選択 > 保存をクリックします。

重要：表示の不具合を防ぐため、このコードは編集しないでください。

{% liquid
      assign bonLoyaltyPageInfo = shop.metafields.bonLoyaltyPageInfo.bonLoyaltyPageInfo
      assign bonShopInfo = shop.metafields.bonShopInfo.bonShopInfo
  %}
  <script> var bonLoyaltyPageInfo = {{ bonLoyaltyPageInfo | json }}; </script>
  <script> var bonShopInfo = {{ bonShopInfo | json }}; </script>
  <div class='shopify-section'>
      {{ page.content }}
      <script id='script-bon-loyalty-page' src='https://d31wum4217462x.cloudfront.net/loyalty_page/js/app.js'></script>
  </div>