Shopify｜会員登録画面に誕生日欄を作成し、顧客メタフィールドに反映する（Dawn）

こんにちは、ななこまです。

ECサイトの誕生日特典メール開封率は、通常のメール開封率より約10%高くなるという話を耳にしたので、今回は、誕生日を顧客メタフィールドに反映するまでを実装していきたいと思います。

コードを追加する

コードを編集 > 「main-register.liquid」に下記のコードを追加します。

<p style="font-size: 1.1rem; margin-bottom: -1.8rem; text-align: left;">誕生日</p>
<div class="field">
 <input id="Birthday" type="date" name="customer[note][Birthday]" placeholder="Birthday" />
</div>

80行目あたりの下記コードの下に追加すると、姓・名の下に誕生日欄が設置されます。

      <label for="RegisterForm-FirstName">
        {{ 'customer.register.first_name' | t }}
      </label>
    </div>

これで誕生日欄は追加されましたが、年/月/日がややずれているので、（pcで見ると分かる）テーマ > カスタマイズ > お客様の登録 > 登録セクションのカスタムcssに下記のコードを追加します。

良い感じに揃いました↑

年/月/日がデフォルトで備わっているので、文字が被らないように「誕生日」ラベルは外に追加しています。

「誕生日ラベル」の上下位置がずれてしまう場合は、最初に追加したコードの「margin-bottom: -1.8rem;」の数字を変更して調整してください。

顧客メモをメタフィールドに反映する

試しに会員登録をすると、登録した顧客情報のメモ欄に誕生日が表示されました。

誕生日メールを送付する際は「Shopify Flow」アプリを使用したいので、メモをメタフィールドに自動追加できるようにします。（手動でも問題ないです）

1. 顧客メタフィールドの定義を追加

まずは、管理画面に戻り、設定 > カスタムデータ > 顧客 > 定義を追加する を選択。
名前「誕生日」、ネームスペースとキー「custom.birthday」、タイプを選択する「日付」に設定します。

2. Shopify Flowアプリで自動化に

つづいて、Shopify Flowアプリで「ワークフローを作成」>「トリガーを選択」に進み、「Customer created」を選択します。

上の画像は完成形です↑

追加した後、+ボタン > アクションを選択し、「Update customer metafield」を選択します。

• Metafield namespace　➝「custom」

• Key　➝「birthday」

• Value　➝下記コード

{%- assign notes = customer.note | strip | newline_to_br | split: '<br />' -%}
{%- for note in notes -%}
  {%- if note contains "Birthday: " -%}
    {{ note | replace: 'Birthday: ', ''| strip }}
  {%- endif -%}
{%- endfor -%}

• Type　➝「Date」

上記4つを入力し保存すれば完了です！
顧客メモの誕生日が反映されるかどうかお試しください。

Shopify Flowに紐づいているメールアプリと今回作成したメタフィールドを連携すると、誕生日の月または日にお誕生日メールが送付されるようになります。

うまく反映されましたでしょうか？
尚アプリの導入やコード編集によるトラブルは自己責任となりますので、バックアップを取った上でお試しください！

以上、ななこまでした☺