👤 顧客アカウント中級
顧客ログインとパスワードリセット
顧客がメールアドレスとパスワンを使ってログインするフォーム、パスワードリセット機能、ゲストログイン選択肢をまとめたセクション。エラーメッセージと成功通知を表示対応。
用途
accounts/login テンプレートに配置し、既存顧客のログイン、パスワード忘れ時のリセット申請、ゲストチェックアウト選択を1ページで実現。
設置場所
sections/main-login.liquid に配置し、templates/customers/login.liquid で `{% section 'main-login' %}` として呼び出す。Shopify 管理画面でロゴ幅やセクションの上下余白を調整可能。
注意点
Multipass ログインが有効な場合(settings.multipass_login == true)、このセクションは表示されないため、ストア設定で Multipass を無効にするか、セクション条件を外す必要がある。パスワードリセットメールは Shopify から自動送信されるため、カスタムメールテンプレートを使う場合は別途 Flow で設定する。ロゴの表示幅は section.settings.logo_width で指定し、アスペクト比を失わないよう自動計算されるため、アップロード画像は正方形または1:1に近い比率が推奨。
コード
238 行 / liquid{% comment %} Based on: https://github.com/Shopify/dawn/blob/v7.0.1/sections/main-login.liquid {% endcomment %}
{%- if settings.multipass_login != true -%}
{{ 'customer.css' | asset_url | stylesheet_tag }}
{%- style -%}
.login-logo {
max-width: {{ section.settings.logo_width }}px;
}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
<div class="customer login section-{{ section.id }}-padding">
{%- if section.settings.logo != blank -%}
<a href="https://{{ settings.storefront_hostname }}/" style="margin-bottom:3rem;">
{%- assign logo_alt = shop.name | escape -%}
{%- assign logo_height = section.settings.logo_width | divided_by: section.settings.logo.aspect_ratio -%}
{{ section.settings.logo | image_url: width: section.settings.width | image_tag:
class: 'login-logo',
widths: '50, 100, 150, 200, 250, 300, 400, 500',
height: logo_height,
width: section.settings.logo_width,
alt: logo_alt
}}
</a>
{%- endif -%}
<h1 id="recover" tabindex="-1">
Reset password
</h1>
<div>
<p>
We will send you an email to reset your password
</p>
{%- form 'recover_customer_password' -%}
{% assign recover_success = form.posted_successfully? %}
<div class="field">
<input type="email"
value=""
name="email"
id="RecoverEmail"
autocorrect="off"
autocapitalize="off"
autocomplete="email"
{% if form.errors %}
aria-invalid="true"
aria-describedby="RecoverEmail-email-error"
autofocus
{% endif %}
placeholder="Email"
>
<label for="RecoverEmail">
Email
</label>
</div>
{%- if form.errors -%}
<small id="RecoverEmail-email-error" class="form__message">
<svg aria-hidden="true" focusable="false" role="presentation" viewBox="0 0 13 13">
<circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
<circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
<path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
<path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
</svg>
{{ form.errors.messages['form'] }}
</small>
{%- endif -%}
<button>
Submit
</button>
<a href="#login">
Back to login page
</a>
{%- endform -%}
</div>
<h1 id="login" tabindex="-1">
Login
</h1>
<div>
<p>
Welcome back! Please enter your details.
</p>
{%- if recover_success == true -%}
<h3 class="form__message" tabindex="-1" autofocus>
<svg aria-hidden="true" focusable="false" role="presentation" viewBox="0 0 13 13">
<path d="M6.5 12.35C9.73087 12.35 12.35 9.73086 12.35 6.5C12.35 3.26913 9.73087 0.65 6.5 0.65C3.26913 0.65 0.65 3.26913 0.65 6.5C0.65 9.73086 3.26913 12.35 6.5 12.35Z" fill="#428445" stroke="white" stroke-width="0.7"/>
<path d="M5.53271 8.66357L9.25213 4.68197" stroke="white"/>
<path d="M4.10645 6.7688L6.13766 8.62553" stroke="white">
</svg>
{{ 'customer.recover_password.success' | t }}
</h3>
{%- endif -%}
{%- form 'customer_login', novalidate: 'novalidate' -%}
{%- if form.errors -%}
<h2 class="form__message" tabindex="-1" autofocus>
<span class="visually-hidden">{{ 'accessibility.error' | t }} </span>
<svg aria-hidden="true" focusable="false" role="presentation" viewBox="0 0 13 13">
<circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
<circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
<path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
<path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
</svg>
{{ 'templates.contact.form.error_heading' | t }}
</h2>
{{ form.errors | default_errors }}
{%- endif -%}
<div class="field">
<input
type="email"
name="customer[email]"
id="CustomerEmail"
autocomplete="email"
autocorrect="off"
autocapitalize="off"
{% if form.errors contains 'form' %}
aria-invalid="true"
{% endif %}
placeholder="Email"
>
<label for="CustomerEmail">
Email
</label>
</div>
{%- if form.password_needed -%}
<div class="field">
<input
type="password"
value=""
name="customer[password]"
id="CustomerPassword"
autocomplete="current-password"
{% if form.errors contains 'form' %}
aria-invalid="true"
{% endif %}
placeholder="Password"
>
<label for="CustomerPassword">
Password
</label>
</div>
<a href="#recover">
Forgot your password?
</a>
{%- endif -%}
<button>
Sign in
</button>
<p>
Don't have an account?
<a href="{{ routes.account_register_url }}">
Sign up
</a>
</p>
{%- endform -%}
</div>
{%- if shop.checkout.guest_login -%}
<div>
<hr>
<h2>Continue as a guest</h2>
{%- form 'guest_login' -%}
<button>
Continue
</button>
{%- endform -%}
</div>
{%- endif -%}
</div>
{%- endif -%}
{% schema %}
{
"name": "Login",
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": "Logo image"
},
{
"type": "range",
"id": "logo_width",
"min": 50,
"max": 250,
"step": 10,
"default": 100,
"unit": "px",
"label": "Custom logo width"
},
{
"type": "header",
"content": "Section padding"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Top padding",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Bottom padding",
"default": 36
}
]
}
{% endschema %}
出典・ライセンス
- License:
- MIT
このコードは instantcommerce 著作の MIT ライセンスソースです。 原本の著作権は instantcommerce が保有します。日本語訳は ALSEL によるものです。