Shopify 特定の会員ステータスを与えて商品の閲覧制限をかける方法

概要

ECサイトを運用していくなかで、特定の会員にしか購入させたくない商品があると思います。
今回は会員ステータスの付与の仕方と商品の閲覧制限の掛け方を解説して行きます。

準備

まずは会員ステータスの付与方法です。
Shopify自体に会員ステータスを分けるような機能はありません。なので自作する必要性があります。
タグで管理する方法もあるのですが今回は「メタフィールド」を使用したやり方を説明します。

■1. 設定に移動
管理画面左下にある設定ボタンを押します。

■2. カスタムデータより顧客を選択
左サイドバー一覧からカスタムデータを選択しさらに一覧から顧客を選択します。

■3. 定義を追加

①名前
任意の名前を入れてください

②ネームスペースとキー
任意の英数字を入力してください

③入力フォーマット
今回は単一行のテキストで大丈夫です

④選択肢
プリセットの選択肢に制限するチェックボックスにチェックを入れてください。
選択肢を増やすことができて、入力の手間が省けます。

■4.　顧客ページで会員ステータスを付与

■5. 見せたくない商品にタグを付与
閲覧制限をしたい製品に任意のタグを付与します。
※今回は「特別会員」を使用します

これで準備は完了です。
次に設定をしていきます。

設定

以下コードを使用します。

{% assign special = false %}
{% assign special_customer = false %}

// 商品判定
// ループで回している商品に対して「特別会員」タグが入っているか判定
{% for product_tag in product.tags %}
　　　　　{% if product_tag == '特別会員' %}
　　　　　　　　　　{% assign special = true %}
　　　　　{% endif %}
{% endfor %}

// 会員判定
// ログインしている会員情報に付与されている会員ステータスを判定
{% assign memberType = customer.metafields.my_fields.customer_menber_status %}
{% if memberType == ‘特別会員’ %}
　　　　　{% assign special_customer = true %}
{% endif %}

// 総合判定
{% if special %}
　　　　{% if special_customer %}
　　　　　　　　// 制限アイテムを表示
　　　　{% else %}
　　　　　　　// 会員ステータスが特別会員ではなかった為、非表示処理
　　　　{% endif %}
{% else %}
　　　　// 特別会員用アイテムでなかった場合通常のループ処理
{% endif %}

上記コードを出し分けしたい箇所に設置することで商品の閲覧制限が可能になります。
設置場所としては以下があります。
・検索結果ページ
・コレクション一覧ページ
・商品詳細ページ

設置例としてコレクション一覧ページの場合をShopifyデフォルトテーマ「Dawn」を使用した場合で紹介します。
sections/main-collection-product-grid.liquidの157行目にある以下コード1をコード2のように変更します。
※ 頭に「＋」がついているものが追記したものです。

■コード１

{%- for product in collection.products -%}
{% assign lazy_load = false %}
{%- if forloop.index > 2 -%}
  {%- assign lazy_load = true -%}
{%- endif -%}
<li
  class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
  {% if settings.animations_reveal_on_scroll %}
    data-cascade
    style="--animation-order: {{ forloop.index }};"
  {% endif %}
>
  {% render 'card-product',
    card_product: product,
    media_aspect_ratio: section.settings.image_ratio,
    image_shape: section.settings.image_shape,
    show_secondary_image: section.settings.show_secondary_image,
    show_vendor: section.settings.show_vendor,
    show_rating: section.settings.show_rating,
    lazy_load: lazy_load,
    show_quick_add: section.settings.enable_quick_add,
    section_id: section.id
  %}
</li>
{%- endfor -%}

■コード２

{%- for product in collection.products -%}
{% assign lazy_load = false %}
{%- if forloop.index > 2 -%}
  {%- assign lazy_load = true -%}
{%- endif -%}

+ {% assign special = false %}
+ {% assign special_customer = false %}
+ {% for product_tag in product.tags %}
+ {% if product_tag == '特別会員' %}
+      {% assign special = true %}
+ {% endif %}
+ {% endfor %}

+ {% assign memberType = 
	customer.metafields.my_fields.customer_menber_status %}
+ {% if memberType == '特別会員' %}
+  {% assign special_customer = true %}
+ {% endif %}

+ {% if special %}
+ {% if special_customer %}
<li
  class="grid__item{% if settings.animations_reveal_on_scroll                   %} scroll- trigger animate--slide-in{% endif %}"
  {% if settings.animations_reveal_on_scroll %}
    data-cascade
    style="--animation-order: {{ forloop.index }};"
  {% endif %}
>
  {% render 'card-product',
    card_product: product,
    media_aspect_ratio: section.settings.image_ratio,
    image_shape: section.settings.image_shape,
    show_secondary_image:         section.settings.show_secondary_image,
    show_vendor: section.settings.show_vendor,
    show_rating: section.settings.show_rating,
    lazy_load: lazy_load,
    show_quick_add: section.settings.enable_quick_add,
    section_id: section.id
  %}
</li>
+ {% else %}
+  <p>特別会員専用商品です。</p>
+ {% endif %}
+ {% else %}
+ <li
  class="grid__item{% if settings.animations_reveal_on_scroll                   %} scroll- trigger animate--slide-in{% endif %}"
  {% if settings.animations_reveal_on_scroll %}
    data-cascade
    style="--animation-order: {{ forloop.index }};"
  {% endif %}
>
  {% render 'card-product',
    card_product: product,
    media_aspect_ratio: section.settings.image_ratio,
    image_shape: section.settings.image_shape,
    show_secondary_image:         section.settings.show_secondary_image,
    show_vendor: section.settings.show_vendor,
    show_rating: section.settings.show_rating,
    lazy_load: lazy_load,
    show_quick_add: section.settings.enable_quick_add,
    section_id: section.id
  %}
+ </li>
+ {% endif %}
{%- endfor -%}

まとめ

デフォルトの機能としてないので完全自作にはなってしまいますが、使用できる場面はかなりあるかと思います。
是非有効活用してください！