【アプリ不要】Shopifyで特定会員のみがアクセスできる限定ページの作成【OS2.0対応】

  • 投稿日
  • 更新日
  • 著者 ソケットブログ
  • カテゴリー Shopify

こんにちは、ムネトです。

悩む人
ストアオーナー

Shopifyでアプリを使わずに特定の会員のみがアクセスできるページを作成できないか？

といった疑問に、お答えします。

結論から言うと、アプリなしで特定会員専用ページは作れます。

本記事では、アプリなしで特定会員のみがアクセスできるページの作成方法を詳しく解説していきます。

今回使うShopifyテーマは、『Studio』(Online Store2.0)です。

やりたいこと

  • アカウント（会員）登録は任意
  • 非会員でもストアの一部にアクセスできる
  • 特定会員のみがアクセスできるコレクションページと商品ページを作成
  • 非会員と会員が特定会員専用ページにアクセスしようとした場合、別ページにジャンプする
注意

・特定会員にタグを付与する方法は、ストア側で手動で追加

・アカウント登録（会員）だけでは特定会員ページを閲覧できない

アカウント設定

チェックアウトの顧客アカウントは、『アカウントを任意にする』とします。

顧客タグの設定

特定会員にタグを手動で付与します。
今回は『members_0327』というタグを付けました。

アカウントを作成した場合には、『members』というタグが自動で付与されるように設定しています

会員登録をしたら自動で顧客にタグを付与する設定はコチラをどうぞ

特定会員のみアクセスできる商品ページの作成

特定会員のみアクセスできる商品ページのテンプレートを作っていきます。

Templatesの作成

コードの編集＞Templates＞新しいtemplateを追加する

『product.members.json』という名前にします。

『product.members.json』の中身は、product.jsonからコピペします。

{
  "sections": {
    "main": {
      "type": "main-product",
      "blocks": {
        "vendor": {
          "type": "text",
          "settings": {
            "text": "{{ product.vendor }}",
            "text_style": "uppercase"
          }
        },
        "title": {
          "type": "title",
          "settings": {
          }
        },
        "caption": {
          "type": "text",
          "settings": {
            "text": "{{ product.metafields.descriptors.subtitle.value }}",
            "text_style": "subtitle"
          }
        },
        "price": {
          "type": "price",
          "settings": {
          }
        },
        "variant_picker": {
          "type": "variant_picker",
          "settings": {
            "picker_type": "button"
          }
        },
        "quantity_selector": {
          "type": "quantity_selector",
          "settings": {
          }
        },
        "buy_buttons": {
          "type": "buy_buttons",
          "settings": {
            "show_dynamic_checkout": true
          }
        },
        "share": {
          "type": "share",
          "settings": {
            "share_label": "Share"
          }
        },
        "description": {
          "type": "description",
          "settings": {
          }
        }
      },
      "block_order": [
        "vendor",
        "title",
        "caption",
        "price",
        "variant_picker",
        "quantity_selector",
        "buy_buttons",
        "share",
        "description"
      ],
      "settings": {
        "enable_sticky_info": true,
        "gallery_layout": "stacked",
        "media_size": "large",
        "mobile_thumbnails": "hide",
        "hide_variants": true,
        "enable_video_looping": false,
        "padding_top": 40,
        "padding_bottom": 0
      }
    },
    "multicolumn": {
      "type": "multicolumn",
      "blocks": {
        "column-0": {
          "type": "column",
          "settings": {
            "title": "Shipping",
            "text": "<p>Share the details of your shipping policy.<\/p>",
            "link_label": "",
            "link": ""
          }
        },
        "column-1": {
          "type": "column",
          "settings": {
            "title": "Returns",
            "text": "<p>Share the details of your return policy.<\/p>",
            "link_label": "",
            "link": ""
          }
        }
      },
      "block_order": [
        "column-0",
        "column-1"
      ],
      "settings": {
        "title": "",
        "heading_size": "h1",
        "image_width": "full",
        "image_ratio": "adapt",
        "columns_desktop": 2,
        "column_alignment": "left",
        "background_style": "primary",
        "button_label": "",
        "button_link": "",
        "color_scheme": "background-1",
        "columns_mobile": "1",
        "swipe_on_mobile": false,
        "padding_top": 56,
        "padding_bottom": 36
      }
    },
    "image-with-text": {
      "type": "image-with-text",
      "blocks": {
        "text": {
          "type": "text",
          "settings": {
            "text": "<p>Image with text<\/p>",
            "text_style": "body"
          }
        },
        "heading": {
          "type": "heading",
          "settings": {
            "heading": "Pair text with an image",
            "heading_size": "h1"
          }
        }
      },
      "block_order": [
        "text",
        "heading"
      ],
      "settings": {
        "height": "adapt",
        "desktop_image_width": "large",
        "layout": "text_first",
        "desktop_content_position": "bottom",
        "desktop_content_alignment": "left",
        "content_layout": "no-overlap",
        "color_scheme": "accent-1",
        "mobile_content_alignment": "left",
        "padding_top": 36,
        "padding_bottom": 0
      }
    },
    "image-with-text-1": {
      "type": "image-with-text",
      "blocks": {
        "text": {
          "type": "text",
          "settings": {
            "text": "<p>Pair text with an image to focus on your chosen product, collection, or artist. Add details on availability, style, or even provide a review.<\/p>",
            "text_style": "body"
          }
        }
      },
      "block_order": [
        "text"
      ],
      "settings": {
        "height": "small",
        "desktop_image_width": "small",
        "layout": "image_first",
        "desktop_content_position": "middle",
        "desktop_content_alignment": "left",
        "content_layout": "no-overlap",
        "color_scheme": "accent-1",
        "mobile_content_alignment": "left",
        "padding_top": 0,
        "padding_bottom": 56
      }
    },
    "product-recommendations": {
      "type": "product-recommendations",
      "settings": {
        "heading": "You may also like",
        "heading_size": "h1",
        "columns_desktop": 4,
        "color_scheme": "background-1",
        "image_ratio": "portrait",
        "show_secondary_image": true,
        "show_vendor": false,
        "show_rating": false,
        "columns_mobile": "2",
        "padding_top": 0,
        "padding_bottom": 0
      }
    },
    "image-with-text-2": {
      "type": "image-with-text",
      "blocks": {
        "heading": {
          "type": "heading",
          "settings": {
            "heading": "Image with text",
            "heading_size": "h1"
          }
        },
        "text": {
          "type": "text",
          "settings": {
            "text": "<p>Pair text with an image to provide extra information about your brand or collections.<\/p>",
            "text_style": "body"
          }
        }
      },
      "block_order": [
        "heading",
        "text"
      ],
      "settings": {
        "height": "adapt",
        "desktop_image_width": "medium",
        "layout": "text_first",
        "desktop_content_position": "middle",
        "desktop_content_alignment": "left",
        "content_layout": "no-overlap",
        "color_scheme": "inverse",
        "mobile_content_alignment": "left",
        "padding_top": 32,
        "padding_bottom": 76
      }
    }
  },
  "order": [
    "main",
    "multicolumn",
    "image-with-text",
    "image-with-text-1",
    "product-recommendations",
    "image-with-text-2"
  ]
}

Sectionsの作成

特定会員のみに表示するセクションファイルを作成

コードの編集＞Sections＞新しいsectionを追加する

『members-main-product』という名前にします。

『members-main-product』の中身は、Sectionsにある「main-product.liquid」からすべてのコードをコピペしてください。
なお、コードは割愛します。

新しいセクションの作成は省略可能

このセクション新しいセクションの作成は必須ではありません。


Q.なぜ新しいセクションを作るのか？

A.特定会員用に商品ページを編集する場合に使います。

『product.members.json』のコードの変更

先程作った『product.members.json』にあるセクションファイルの読み込み先を変更します。

4行目あたりにある”type”を置き換えます。

"type": "members-main-product",

ここは元々『main-product』というliquidを読み込むようになっていますが、
それをSectionsでつくった『members-main-product』に変更しました。

新規でセクションファイルを作成していない場合は

『product.members.json』のコードは変更せず、そのままでOK

特定会員用の商品テンプレートを変更する

こんどは特定会員のみがアクセスできる商品ページを作っていきます。
商品管理から特定会員専用の商品を追加し、テンプレートを『members』に切り替えます。

商品タグ

商品テンプレートの変更と同時に、

『特定会員』というタグを作っておきます。

※会員専用ページのコレクション作成時に使用

『members』というテンプレートは、先に作成した『product.members.json』のことです。

特定会員のみアクセスできるコレクションの作成

特定会員のみアクセスできるコレクションページを作っていきます。

Templatesの作成

コードの編集＞Templates＞新しいtemplateを追加する

『collection.members.json』という名前にします。

コレクションの作成

『会員専用ページ』という名前のコレクションを作ります。

コレクションの条件に「商品タグ」が「特定会員」というタグが付与されている商品のみ表示されるようにします。

テンプレートは『members』に変更します。

ヘッダーメニューを追加

ヘッダーメニューに特定会員のみアクセスできるコレクションページのリンク『会員専用コレクション』を追加します。

コレクション名・リンクは任意で名前をつけてください。

特定会員以外がアクセスした場合に表示されるページの作成

特定会員以外が、特定会員の専用ページにアクセスしようとした時に表示されるページを作ります。

Snippetsの作成

コードの編集＞Snippets＞新しいsnippetを追加する

『non-members.liquid』というスニペットファイルをつくり、
そこに貼り付けるコードです。

<h1>このページは会員専用のページです</h1>
<p>
  {% unless customer %}
    <a href="/account/login">ログインする</a> |  
  {% endunless %}
    <a href="/pages/contact">お問合せください</a>
</p>

コードの中身は、

{% unless customer %}
    <a href="/account/login">ログインする</a> |  
{% endunless %}

{% unless customer %}→会員でない場合（非会員）には、『ログインする』と『お問い合わせください』というリンクを表示し、
アカウント登録しており、なおかつログインしている場合、『ログインする』は表示されません。

特定会員だけがアクセスできるページの表示

最後に、特定会員だけがアクセスできるページの設定をしていきます。

theme.liquidの編集

Layoutにある『theme.liquid』内の、

<main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">

mainタグの直下にコードを追加します。

{% if template contains 'members' %}
  {% if customer.tags contains 'members_0327' %}
    {{ content_for_layout }}
  {% else %}
    {% render 'non-members' %}
  {% endif %}
{% else %}
  {{ content_for_layout }}
{% endif %}

コードの中身は、

{% if template contains 'members' %}

『members』という名前を含むテンプレートにアクセスした場合、

{% if customer.tags contains 'members_0327' %}

『members_0327』のタグを持つ顧客に、

{{ content_for_layout }}

『members』名前を含むテンプレートを表示。

{% else %}

『members_0327』のタグを持っていない顧客には、

{% render 'non-members' %}

『non-members』というsnippetで作成したコードを表示。

  {% endif %}
{% else %}
  {{ content_for_layout }}
{% endif %}

『members』を含むテンプレート以外は、どの訪問者でも見られるようするといった内容です。

まとめ

特定会員だけがアクセスできるページ

・membersの名前を含むテンプレートは、『members_0327』というタグを持つ会員しかアクセスすることができません

・それ以外の会員と非会員は、別ページにリダイレクトされます

以上です。
少しでも参考になれば幸いです。

Shopifyのストア制作やページの修正のご依頼、Shopifyに関するアドバイスなどのはお気軽にご相談ください。

相談してみる