コンテンツに進む
ShopifyでのEC運営に役立つメディア
SlashApp - スラッシュアプリ

【Shopifyアプリ手順書】会員限定ページ作成にはLocksmith!「Locksmith」の使い方について徹底解説

【Shopifyアプリ手順書】会員限定ページ作成にはLocksmith!「Locksmith」の使い方について徹底解説

Locksmith使い方

Locksmithは特定の商品・コレクション・ページ等をロックすることができるアプリです。
ロックをすることで、指定の会員のみ公開させる・会員限定ページ等の運用がサイト上で可能となります。
この手順書では、Locksmithアプリを利用した会員限定ページの作成方法について説明します。

アプリの利用シーン

  • 顧客タグを利用した会員限定商品・コレクション・ページの作成
  • ログイン状況に応じた限定商品・コレクション・ページの作成
  • パスコード入力で表示する限定商品・コレクション・ページの作成
  • メルマガアプリKlaviyoの情報を利用した限定商品・コレクション・ページの作成

...etc

アプリストア

Locksmithアプリストア

概要

今回は「顧客タグを利用した会員限定商品・コレクション・ページの作成」の設定方法をご紹介します。

事前準備として、会員のみ閲覧可能にするコレクションを作成します。

1,「コレクションを作成する」ボタンを押下します。

 

2,コレクションの内容を記入します。

①タイトルの入力

②商品タグを利用して商品を自動的に格納する場合は、画像と同じ設定にします

③保存ボタンを押下します

また、顧客タグにも同様の「ゴールド会員」というタグを設定しています。

各顧客データ内の「タグ」で顧客タグは設定可能です。

 

会員限定ページの作成方法

1,Locksmithアプリを開き、「Add lock」赤枠内を押下する。

ロックスミスのトップページ

 

2,ロックしたい項目を入力し、選択する

会員限定で公開したい商品・コレクション・ページの名前を入力いただくと、項目が表示されます。

※ロック設定のできる対象は1つずつとなります

ロックスミスのトップページ

 

3,「Create lock」を押下。

原文 翻訳
①Enable this lock  このロックを有効にする(チェック必須)
②Protact products in this collection このコレクションの製品

 

コレクション内すべての製品を会員限定表示にする場合は、②のチェックも必須となります。

ロックスミスのトップページ 設定画面

 

4,「Add key」を押下

会員限定ページの条件設定をします。

ロックスミスの編集ページ

 

5,①で「is tagged with」を選択します。

is tagged with=指定の顧客タグがついていた場合

②で指定のタグを入力します。
例で「ゴールド会員」と入力しています。

ロックスミスの編集ページ

 

6,右欄の「Settings」で、サイトの表示非表示設定をします。

「Advanced」を押下すると項目が出てきます。
画像の通りに、チェックをつけてください。

原文 翻訳
Hide any links to this collection and its products

 このコレクションとその製品へのリンクを非表示にします。

※ロックしたコレクションやページをメニューに設置した場合、特定の会員以外には非表示となります。

このコレクションとコレクションに含まれる商品を非表示にする。

手動ロックを有効にする。

※基本的に自動ロックを利用するため、チェックなしで問題ない箇所となります。

コレクションをサイトマップから非表示にする。

Add the "noindex" meta tag to any pages protected by this lock

このロックで保護されているすべてのページに「noindex」メタ タグを追加します

※デフォルトでチェックがついているため、基本的にはそのままにする箇所となります。


設定完了後、右下②の「Save」を押下し、条件を保存します。

ロックスミスの編集画面

 

※「Save」押下後、アプリの権限更新を求められる可能性があります。右上「アプリを更新する」ボタンで進んでいただければ問題ない箇所となります。

 

7,ホーム画面に設定した条件が赤枠内に表示されていることを確認してください。

条件設定は完了です。

ロックスミスのトップページ

 

メッセージ変更箇所について

「Massage」欄の内容は、デフォルト状態だと下記画像のように英文です。
英語→日本語への変更は、「Settings」ページで可能となっています。

1,Locksmithアプリのトップページから、赤枠内を押下します。

 

2,「Content」の各欄でメッセージ内容の変更が可能です。

メッセージ内容はHTMLの記述が必要となります。

下記の表には、日本語でのメッセージ例を記述しています。

※classを記述することで、サイト上でのメッセージ表示位置や色・フォントサイズ等の変更が可能となります(コード記述編集が必要なため要注意)

原文 日本語メッセージ例

Guest message content

(ゲスト会員へのメッセージ)

 <p class="locksmith-contents"><strong>このコンテンツは会員限定ページです</strong><br>ログインをして再度ご確認ください</p>

Access denied content

(アクセス権限を持たない会員へのメッセージ)

※今回の場合は、顧客タグが付いていない会員へのメッセージ

<p class="locksmith-contents"><strong>このコンテンツは権限が必要です</strong><br> 会員情報をご確認の上、ご不明点はストアへ確認ください</p>

 

 

 

3,各メッセージの表示は下記画像をご覧ください。

※画像例として、設定画面右欄の「Hide any links to this collection and its products」のチェックを外しています。

 

 ゲスト会員が会員限定ページを開こうとした場合

 

顧客タグがついていない会員が会員限定ページを開こうとした場合

 

 

問い合わせ先

1,赤枠「Get help and support」を押下します

ロックスミスのトップページ 問い合わせ先説明

 

2,アプリ開発元へ直接連絡する際は、赤枠内の「Start a conversation」を押下します。チャット欄が表示されるため、項目入力し「Send a message」を押下します。

※開発元は海外のため、Deepl翻訳等を利用し英語で送信すると対応が早めです。

ロックスミスの問い合わせ先説明

 

ロックスミスの問い合わせ先説明

 

記事のまとめ

今回は「Locksmith」アプリを利用した会員限定ページの作成方法についてご紹介しました。

アプリ内の条件も多岐に渡っているため、まずは「どのようなお客様に限定公開していきたいのか?」を考えながら設定することをオススメします。

今後もShopifyアプリの使い方をご紹介するのでお楽しみに!

 

アプリストア

Locksmithアプリストア

 

ネットイヤーグループ開発アプリ紹介記事

「この商品、欲しかったけど在庫切れかぁ……」
「またサイト開くのも面倒だなぁ」
「入荷したら通知してくれないかな?」

そのようなお悩みには「再入荷通知サポーター」

記事内では、DLから設定方法まで紹介しているので、ぜひご覧くださいませ。

 

Shopifyアプリの開発、承ります。

SlashApp運営チームは、アプリ開発も行っております。開発したいアプリの概要を教えていただければ、仕様設計から細かくサポートいたします。 ぜひお問い合わせください。