bon-loyaltybon-loyaltybon-loyaltybon-loyalty
  • 特徴
  • ドキュメント
  • ブログ
    • 新しいアップデート
    • ブログ
  • 料金プラン
  • リソース
    • BONとSmile.ioの比較
    • BONとRivoの比較
    • BONとGrowaveの比較
    • BONとLoyaltyLionの比較
    • BONとYotpoの比較
  • パートナー
  • jaJA
    • en_USEN
  • 無料で始める
  • デモを予約
  • 無料で始める
  • デモを予約
Download
✕

Loyalty page display with coding

  • ホームページ
  • ドキュメント
  • Loyalty page display with coding
‘Subscribe to newsletter’ point-earning action
27 2月, 2023
Amount Discount
15 4月, 2023

Loyalty page display with coding

28 2月, 2023
カテゴリー
Tags

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

Loyalty page display with coding – BON Loyalty
  • ロイヤルティプログラムの設定
    • 概要: クイックスタートガイド
    • BONでの複数通貨
    • 購入後のページ
    • Point recommendation strategy
    • Customer interaction with BON Loyalty
  • ダッシュボード
    • Overview: Dashboard
    • 月間注文数上限
    • Activity log
    • Customer activities
  • 顧客管理
    • Overview: Customer data
    • Customer profiles
    • Delete and exclude customers
    • Import data
  • ポイント獲得ルール
    • Overview: Earn points
    • アカウントを作成
    • Complete an order
    • Delayed points for Completing an order
    • Refunded orders
    • お誕生日おめでとう
    • ニュースレターを購読
    • Complete profile
    • Social media actions
  • ポイント交換ルール
    • Overview: Redeem points
    • Amount discounts
    • Percentage discounts
    • Free products
    • 送料無料
    • Combine discounts
    • Set up the BON POS UI Extension
    • Check BON discounts in Shopify
  • 紹介プログラム
    • Overview: Referral program
    • Referral steps
    • Avoid unsuccessful referrals
  • VIP Tier Program
    • Overview: VIP Tier
    • VIP Tier tags
  • 期間限定ポイント
    • Overview: Limited-time points offer
  • Order Booster
    • Overview: Order booster
    • Order booster display
  • ブランディング設定
    • ウィジェットを表示する
    • Widget theme
    • Widget icon
    • Widget text
    • Display in multiple languages
    • Loyalty page with no coding
    • Loyalty page with coding
    • Promote BON with Loyalty page
    • Points on Customer account page
    • Points on Post-purchase page
    • Points on Cart page
    • Points on Checkout page
  • メール設定
    • Overview: Notification emails
    • Email attributes
    • Integrate with Klaviyo
    • Integrate with Dotdigital
  • 分析レポート
    • Overview: Analytics
  • その他の·設定
    • Overview: Settings
    • ポイント有効期限設定
    • Include tax in order total
    • Integrate with OneMobile
    • BON Loyalty integrate with Subscription Apps
  • 料金プラン
    • How to change pricing plans

Loyalty page display with coding

Understand how to display your loyalty page (for non-2.0 Shopify themes without template section apps)

IMPORTANT NOTE: Displaying the BON loyalty landing page is available from the Basic plan or higher. Check out our pricing plans for more details.

Introduction

With a simple coding tweak, you can create a stunning loyalty page that will set you apart from the competition. Don’t miss out on this opportunity to boost customer engagement and drive sales!

Overview

Activate your Loyalty page
Display the Loyalty page on your storefront

Activate your Loyalty page

Go to BON Loyalty > ブランディング設定 > ロイヤルティページ > Status > Enable the Loyalty page.

Enable the Loyalty page

Display the Loyalty page on your storefront

With the Loyalty page activated, let’s make it visible to your customers!

1. Create a new Loyalty page template in your theme:

Go to your Shopify admin > 販売チャネル > Online store > テーマ > Click the 3-dot button > Select Edit code.

In the Templates folder, click Add a new template > Select Page, then Liquid > Enter a file name (e.g., bon-loyalty) > Click Done.

Paste the following code into the template section. Select Format liquid > Click Save.

IMPORTANT NOTE: Avoid editing this code to prevent any display conflicts.

{% 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>
 

2. Add the new template to the Pages section:

Next, you’ll need to assign the newly created template to the Pages you’re currently using in your store.

Go to your Shopify admin > Sales channels > Online store > Pages > Add page.

Online store > Pages

Select the new template you just created in the Theme template section. Name your Loyalty page (e.g., Rewards Program, Loyalty Page).

3. Add the new template to Content > Menus:

Last but not least, put the Loyalty page onto your storefront.

Go to your Shopify admin > Sales channels > Online store > Content > Menu > Choose to display your Loyalty page at either the Main menu (Header) or the Footer menu.

Main/Footer menu

Click on either the Main menu or the Footer menu, then select Add menu item.

  • ラベル: Enter a name for the page, such as BON Loyalty.

  • Link: Choose Pages > Select the Loyalty page you created earlier.

  • Finally, click Save to apply the changes.

Add menu item
Link > Pages > BON Loyalty Page

Your ロイヤルティページ is now ready to engage and reward your customers!

Previous
« ‘Subscribe to newsletter’ point-earning action
次へ
Amount Discount »

Share
2
BON Loyaltyを無料で試そう!
無料で始める
Menu
BON Loyalty

BON Loyaltyは、魅力的なポイント・リワード・紹介制度を通じて、顧客エンゲージメントの向上を支援する信頼のソリューションプロバイダーです。

製品情報

  • ホームページ
  • 特徴
  • アップストア

会社情報

  • パートナー募集
  • お問い合わせ

リソース

  • ブログ
  • 動画

法的情報

  • プライバシーポリシー
  • 利用規約
  • データ処理契約(DPA)
© 2021 BON Loyalty - Rewards & Referrals
facebooklinkedintwitteryoutube