メンバーシップ App

メンバーシップ Appについて

「メンバーシップ App」とは、自分のショップのメンバーシップを作成することができ、ショップのファンとのつながりをより深められる機能です。

タグ一覧

ブロック

if (条件を満たす場合に表示)

タグ説明
{block:MembershipPage}メンバーシップのガイドページであるとき(「メンバーシップ App」のインストールが必要)
{block:NotMembershipPage}メンバーシップのガイドページではないとき
{block:MembershipMyPage}メンバーシップのマイページであるとき(「メンバーシップ App」のインストールが必要)
{block:NotMembershipMyPage}メンバーシップのマイページではないとき
{block:MembershipLoginPage}メンバーシップのログインページであるとき(「メンバーシップ App」のインストールが必要)
{block:NotMembershipLoginPage}メンバーシップのログインページではないとき
{block:AppsMembership}「メンバーシップ App」をインストールしているとき

※ 便宜上、メンバーシップについての概要・メンバーシップ名などが記載されたメンバーシップページのことをここでは「ガイドページ」と呼んでいます。

変数

タグ説明
{MembershipPageURL}メンバーシップのガイドページのURL
{MembershipLoginPageURL}メンバーシップのログインページのURL
{MembershipMyPageURL}メンバーシップのマイページのURL
（非ログイン状態の場合は、自動的にメンバーシップ・ログインページにリダイレクトされます）

テンプレート

タグ説明
{PageContents}メンバーシップページをふくむ、ページコンテンツを表示するための共通タグ。くわしくはこちら

ローカライズテキスト

※2023年4月現在、「英語・外貨対応 App」には対応しておりません。

対応が必要な箇所

ナビゲーション

ナビゲーションにメンバーシップページとマイページへのリンクを表示してください。

{block:AppsMembership}
  <li>
    <a href="{MembershipPageURL}">メンバーシップページ（ガイドページ）のタイトル</a>
  </li>
  <li>
    <a href="{MembershipLoginPageURL}">ログインページのタイトル</a><!-- （任意）ログインページにかならず遷移したい場合にご利用ください -->
  </li>
  <li>
    <a href="{MembershipMyPageURL}">マイページ/ログインのタイトル</a>
  </li>
{/block:AppsMembership}

商品詳細ページ

（ポイント機能がリリースされた 2023/09/27 以降に追加された要素です）

以下の条件が満たされる場合に、{ItemAttentionTag} のなかにポイント情報が表示されます。

  • メンバーシップが公開状態に設定されている
  • ポイント設定が有効に設定されている
  • 商品種別がポイント付与対象外の商品ではない
    • この判定は {ItemAttentionTag} 内で自動的に行われ、対象外の場合 <div class="membershipPoint"> の要素は表示されません
<div class="membershipPoint">
    <p class="membershipPoint__amountWrapper"><span class="membershipPoint__amount">1000</span><span class="membershipPoint__pointName">サンプルポイント名</span>獲得</p>
    <div class="membershipPoint__attentionWrapper">
        <p class="attention membershipPoint__attention">※ <a href="/membership" class="membershipPoint__attentionLink" target="_blank">メンバーシップに登録</a>し、購入をすると獲得できます。</p>
    </div>
</div>

ポイント情報が表示されている商品詳細ページのキャプチャ

また、購入者がPay IDにログイン済みで、なおかつメンバーシップ会員の場合、ポイント情報下部の注意文言は非表示になります。

購入者がPay IDログイン済みで、そのアカウントがメンバーシップ会員の場合

メンバーシップ会員ログイン済みで商品詳細ページを開いた場合のキャプチャ

ポイント付与対象外になる商品種別

  • 定期便商品
  • 抽選販売商品
  • デジタルコンテンツ商品
  • テイクアウト商品

メンバーシップページ（ガイドページ）

メンバーシップページのコンテンツ表示

{PageContents} を利用すると、自動的にログイン・ログアウト時のコンテンツが切り替わります。
ログイン・ログアウト時でレイアウトが変わりますので、必要に応じてスタイルを適応してください。 くわしくはこちらを参照してください。

メンバーシップページの表示（『Pay ID』・メンバーシップログイン前） メンバーシップ非会員状態のメンバーシップページのキャプチャ

メンバーシップページの表示（『Pay ID』ログイン済み・メンバーシップログイン前） Pay IDユーザー状態のメンバーシップページのキャプチャ

メンバーシップページの表示（『Pay ID』・メンバーシップログイン済み） メンバーシップ会員状態のメンバーシップページのキャプチャ

メンバーシップページの表示（「ポイントを利用する」設定の場合）

「ポイントを利用する」設定のメンバーシップのメンバーシップページのキャプチャ ※ 「ポイントを利用する」設定の時に表示される要素は購入者のログイン状態に関わらず表示されます。

メンバーシップページの表示（特典を登録している場合）

特典を登録しているメンバーシップのメンバーシップページのキャプチャ

メンバーシップページのメッセージ表示

メンバーシップページ上部には、退会後の完了メッセージなどが表示されます。

メンバーシップから退会した後のメンバーシップページの表示

メンバーシップから退会した後のメンバーシップページのキャプチャ

非メンバーシップ会員の購入者が退会を行おうとしたときのメンバーシップページの表示

非メンバーシップ会員の購入者が退会を行おうとしたときのメンバーシップページのキャプチャ

メンバーシップ・マイページ

{PageContents} を利用すると、メンバーシップ会員の情報が表示されます。

マイページのキャプチャ

メンバーシップ・マイページ（「ポイントを利用する」設定の場合）

「ポイントを利用する」設定のショップの場合、マイページには登録メールアドレスの代わりに以下の情報が表示されます。

  • 保有ポイント数
  • 有効期限（獲得したポイントがある場合のみ）
  • ポイント獲得・利用履歴ページへのリンク

また、ポイント下に「有効期限について」ページへのリンクが表示されます。

「ポイントを利用する」設定のメンバーシップのマイページのキャプチャ

メンバーシップ・マイページ（特典を登録している場合）

スマートフォンでの表示時においてはレスポンシブ対応が必要になります。

特典を登録しているメンバーシップのマイページのキャプチャ

「特典の申請方法」を開くことで、特典の申請方法を確認することができます。 特典の申請方法を開いているマイページのキャプチャ

メンバーシップ・マイページのメッセージ表示

メンバーシップ・マイページ上部には、新規登録成功のメッセージなどが表示されます。

メンバーシップに新規登録した後のメンバーシップ・マイページの表示

メンバーシップに新規登録した後のメンバーシップ・マイページのキャプチャ

メンバーシップ退会モーダル

メンバーシップに入会後に退会するさいに このメンバーシップから退会する ボタンを押すと、退会できるモーダルが出現します。
スマートフォンでの表示時においてはレスポンシブ対応が必要になります。 メンバーシップ退会モーダルのキャプチャ

メンバーシップ・ポイント獲得・利用履歴ページ

ポイントを獲得もしくは利用したことがない場合は、「獲得・利用履歴がありません」と表示されます。 ポイント履歴が空のキャプチャ

ポイントを獲得もしくは利用したことがある場合は、1ページあたり20件履歴が表示されます。 ポイント履歴が数件あるキャプチャ

メンバーシップ・ログインページ

{PageContents} を利用すると、「Pay ID」・メンバーシップにログインするための導線が表示されます。

ログインページのキャプチャ

メンバーシップ非公開状態

ショップ管理画面からメンバーシップを非公開状態に変更すると、メンバーシップページ / メンバーシップ・マイページ / メンバーシップ・ログインページは以下のような非公開画面に変わります。

この状態では、過去にメンバーシップに登録した会員の退会のみ受け付け、新規登録をはじめメンバーシップページ・マイページの閲覧などはおこなえなくなります。

メンバーシップが非公開状態のキャプチャ

「ポイントを利用する」設定の場合の非公開状態

メンバーシップ自体が非公開状態でも「ポイントを利用する」設定の場合には、購入者が自身の意志で退会と保有ポイントの確認ができるように、非公開ページに 会員情報を確認する ボタンが表示されます。
購入者がこのボタンから「Pay ID」ログインをおこなった後に、以下のような非公開状態のマイページが表示されます。

「ポイントを利用する」設定のメンバーシップの非公開状態のキャプチャ

メンバーシップ退会モーダル

メンバーシップ自体が非公開状態でも、過去にメンバーシップに入会した購入者が自身の意志で退会できるようにこのメンバーシップから退会するボタンを押すと退会できるモーダルが出現します。
マイページの場合と同様にスマートフォンでの表示時においてはレスポンシブ対応が必要になります。 メンバーシップ退会モーダルのキャプチャ

共通フッター

「メンバーシップ App」をインストールしている場合に、購入者がいつでもアクセスできる場所に会員規約ページへのリンクを設置する必要があります。
そのため、共通フッターに適切な文言と https://thebase.com/pages/shop_membership_term へのリンクを設定してください。

また、{block:AppsMembership}を使用して「メンバーシップ App」をインストールしていない場合にはリンクが表示されない設定してください。

共通フッター部分のキャプチャ

動作のチェック

動作確認するには下記項目を参考にしてください。

ナビゲーション表示

  • 「メンバーシップ App」をインストール時にナビゲーションリンクが表示されているか
  • 「メンバーシップ App」がインストールされていないときにナビゲーションリンクが非表示になっているか

商品詳細ページ

  • 「ポイントを利用する」設定の場合に、商品詳細ページにポイント情報が崩れることなく表示されているか
  • ポイント名：ポイント名が最大文字数（15文字）の場合でも、崩れることなく表示されているか
  • 獲得予定ポイント数：獲得予定ポイント数が崩れることなく表示されているか

メンバーシップページ

※メンバーシップに未入会、入会済みの場合で表示内容が変わりますので、それぞれの状態で動作確認してください。

メンバーシップのステータス一覧

ステータス名Pay ID に
登録済み
または
Pay ID に
ログイン済み		メンバーシップに
登録済み
または
メンバーシップに
ログイン済み		備考
非会員✕✕「Pay ID」・メンバーシップのどちらも登録（ログイン）していない状態のこと
メンバーシップページでは Pay ID ログイン・登録（同時にメンバーシップへのログイン・登録がおこなわれる）への導線が表示される
Pay IDユーザー◯✕「Pay ID」には別のページなどでログイン済みだが、メンバーシップには登録していない状態のこと
メンバーシップページでは Pay ID アカウントを使ったメンバーシップ登録への導線が表示される
メンバーシップ会員◯◯すでにPay ID・メンバーシップ登録（ログイン）が完了した状態のこと
メンバーシップページではマイページへの導線が表示される
※起こり得ないステータス✕◯-

メンバーシップ情報（共通パターン）

  • メンバーシップ名：メンバーシップ名が最大文字数（60文字）の場合でも、崩れることなく表示されているか
  • メンバーシップの説明：メンバーシップの説明が最大文字数（5,000文字）の場合でも、崩れることなく表示されているか
  • メンバーシップ画像：メンバーシップ画像が設定されている場合に、崩れることなく表示されているか
  • ポイント名（「ポイントを利用する」設定の場合）：ポイント名が最大文字数（15文字）の場合でも、崩れることなく表示されているか
  • 特典一覧：特典が1件以上登録されている場合に、崩れることなく表示されているか
    • 特典名：最大60文字
    • 必要ポイント数：最大100,000,000ポイント
    • 特典の説明文：最大100文字

非会員の場合

  • ページ下部の「会員登録する」「利用規約」「メールマガジンを受け取る」のチェックボックスが表示されているか

Pay IDユーザーの場合

  • ページ下部の「会員登録する」「利用規約」「メールマガジンを受け取る」のチェックボックスが表示されているか

メンバーシップ会員の場合

  • ページ下部の「マイページで確認する」が正しく表示されているか

メンバーシップ・マイページ

  • 「ポイントを利用しない」設定の場合
    • 「ログアウトする」「登録メールアドレス」「会員情報を編集する」「このメンバーシップから退会する」「ショップロゴ / メンバーシップ名 / 入会日」が正しく表示されているか
  • 「ポイントを利用する」設定の場合
    • 「ログアウトする」「ポイント名・保有ポイント数 / 有効期限 / ポイント履歴」「会員情報を編集する」「このメンバーシップから退会する」「ショップロゴ / メンバーシップ名 / 入会日」が正しく表示されているか
    • 「ポイント履歴」をクリックすることで、ポイント履歴ページへ遷移できるか
  • 特典が1件以上登録されている場合に、崩れることなく表示されているか
    • 特典名：最大60文字
    • 必要ポイント数：最大100,000,000ポイント
    • 特典の説明文：最大100文字
  • 退会モーダル：レスポンシブ対応されているか
  • ポイント履歴ページで、履歴が20件以上ある場合にページャーが表示されているか

メンバーシップ・ログインページ

  • ページ下部の「Pay IDでログインする」が正しく表示されているか

メンバーシップ非公開状態

  • 「ポイントを利用しない」設定の場合
    • メンバーシップ・ログイン前: 「会員情報を確認する」が正しく表示されているか
    • メンバーシップ・ログイン後: 「このメンバーシップから退会する」 / 「ログアウトする」が正しく表示されているか
  • 「ポイントを利用する」設定の場合
    • メンバーシップ・ログイン前: 「会員情報を確認する」が正しく表示されているか
    • メンバーシップ・ログイン後: メンバーシップ・ログイン後: 「このメンバーシップから退会する」 / 「ポイント名・保有ポイント数 / 有効期限 / ポイント履歴」「ログアウトする」が正しく表示されているか
  • 退会モーダル：レスポンシブ対応されているか
← コミュニティApp再入荷自動通知App →