株式会社メタフェイズ

Shopify

会員登録画面

メタフェイズではShopifyを利用したストア構築を行っています。
今回はLiquidで会員登録画面を設定する方法を紹介いたします。

templates/customers/register.liquidに下記を記述します。

{%- if customer -%}
   新しく会員登録する場合、一度<a href="{{ routes.account_logout_url }}">ログアウト</a>して下さい。
{%- else -%}
   {% form 'create_customer' %}
       姓(必須):<input type="text" name="customer[last_name]" id="" placeholder="例)山田" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} required>
       {% if form.errors contains 'last_name' %}error{% endif %}

       名(必須):<input type="text" name="customer[first_name]" id="" placeholder="例)太郎" {% if form.last_name %}value="{{ form.last_name }}"{% endif %} required>
       {% if form.errors contains 'first_name' %}error{% endif %}

       メールアドレス(必須):<input type="text" name="customer[email]" id="" placeholder="例)sample@sample.com" pattern="^.+@.+\..+$" title="有効なメールアドレスを入力してください。" {% if form.email %} value="{{ form.email }}"{% endif %} required>
       {% if form.errors contains 'email' %}error{% endif %}

       パスワード(必須):<input type="password" name="customer[password]" id="" placeholder="" required>
       {% if form.errors contains 'password' %}error{% endif %}

       <button type="submit" name="">登録する</button>
   {% endform %}
{%- endif -%}

Shopifyの仕様ではパスワードは5文字以上で登録出来てしまうので、文字数を増やしたい場合はpattern属性やJSで制限をかける必要があります。

Shopifyを利用したストアの構築・運用のご相談はお問い合わせフォームより受け付けております。

Share on

その他の記事

  • Strategy

    ECサイトとは?簡単にできる構築方法を実例をもとにご紹介

  • Shopify

    セクションに可変長カスタム入力欄を設置する

  • Shopify

    コレクション内商品のタイトルだけ表示する

トップへ戻る

お問い合わせ

Webサイト制作やWebビジネスに関するお悩みがある方はお気軽にご相談ください。

お問い合わせはこちら

会社案内

社内で検討・回覧したい方向けに、弊社の会社概要や最新の制作実績を掲載した資料を、PDFでご覧いただけます。

ホワイトペーパー

最新のプロジェクトや過去の7,000サイト以上の実績と経験で獲得したWebサイト制作におけるノウハウの一部をホワイトペーパーとして公開しています。