株式会社メタフェイズ

Shopify

ログイン画面

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

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

{% form 'customer_login' %}
{%- if form.errors -%}
{% if form.errors contains 'form' %}<div>メールアドレス又はパスワードが間違っている可能性があります。</div>{% endif %}
{%- endif -%}

<div>メールアドレス(必須):<input type="text" name="customer[email]" id="" placeholder="例)sample@sample.com" autocorrect="off" autocapitalize="off" {% if form.email %}value="{{ form.email }}"{% endif %} required></div>

{%- if form.password_needed -%}
<div>パスワード(必須):<input type="password" value="" name="customer[password]" id="" placeholder="" required></div>
{%- endif %}

<button type="submit">ログイン</button>
{% endform %}

これだけでも機能しますがログインした状態で/account/loginへアクセスするとログインしているのに入力画面が表示されます。それを防ぎたい場合はlayout/theme.liquidのタグ直後に下記を記述します。

{%- if template == "customers/login" and shop.customer_accounts_enabled and customer -%}
<meta http-equiv="refresh" content="0;URL=https://{{ request.host }}">
{%- endif -%}

この記述によってログインした状態で/account/loginへアクセスするとトップページへリダイレクトするようになります。

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

Share on

その他の記事

  • Strategy

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

  • Shopify

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

  • Shopify

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

トップへ戻る

お問い合わせ

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

お問い合わせはこちら

会社案内

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

ホワイトペーパー

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