//customers/login.liquid
<div class="customers-login custom-account" style="background:url({{ settings.login-image | img_url: 'master' }})">
<div class="login-wrapper">
<div class="main-login-content">
<div class="page-width page-width--tiny page-content">
<div id="CustomerLoginForm" class="form-vertical my-account-custom">
<header class="section-header text-left">
<h1 class="section-header__title">{{ 'customer.login.title' | t }}</h1>
</header>
<div class="note note--success hide" id="ResetSuccess">
{{ 'customer.recover_password.success' | t }}
</div>
{%- form 'customer_login' -%}
{{ form.errors | default_errors }}
<label for="CustomerEmail">{{ 'customer.login.email' | t }}</label>
<input type="email" name="customer[email]" placeholder="E-Mail-Adresse*" id="CustomerEmail" class="input-full{% if form.errors contains 'email' %} error{% endif %}" autocorrect="off" autocapitalize="off" autofocus>
{%- if form.password_needed -%}
<div class="password-fild-wrap">
<span class="showhide-pass-button togglePassword"><svg width="23" height="13" viewBox="0 0 23 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.213 12.359C9.01848 12.3327 6.86214 11.7812 4.92439 10.7507C2.98664 9.72027 1.32382 8.24077 0.0750208 6.436C0.0258838 6.35966 -0.000244141 6.27079 -0.000244141 6.18C-0.000244141 6.08921 0.0258838 6.00034 0.0750208 5.924C1.32382 4.11922 2.98664 2.63973 4.92439 1.60927C6.86214 0.578803 9.01848 0.0273385 11.213 0.000999451C13.4077 0.0274263 15.5641 0.578922 17.502 1.60937C19.4399 2.63982 21.1029 4.11927 22.352 5.924C22.4012 6.00034 22.4273 6.08921 22.4273 6.18C22.4273 6.27079 22.4012 6.35966 22.352 6.436C21.1029 8.24073 19.4399 9.72018 17.502 10.7506C15.5641 11.7811 13.4077 12.3326 11.213 12.359ZM1.16702 6.18C2.32251 7.76575 3.83236 9.05975 5.5763 9.95888C7.32023 10.858 9.25006 11.3375 11.212 11.359C13.1742 11.3376 15.1042 10.8583 16.8483 9.95911C18.5924 9.05996 20.1024 7.76589 21.258 6.18C20.1025 4.59424 18.5927 3.30025 16.8487 2.40111C15.1048 1.50198 13.175 1.02254 11.213 1.001C9.25089 1.02238 7.32087 1.50175 5.57674 2.40089C3.83262 3.30004 2.32261 4.59411 1.16702 6.18ZM11.213 10.27C10.0924 10.304 9.00391 9.89278 8.1857 9.12629C7.3675 8.35981 6.88617 7.30046 6.84702 6.18C6.88616 5.05945 7.36766 4.00004 8.18612 3.23369C9.00458 2.46734 10.0933 2.05646 11.214 2.091C12.3347 2.05646 13.4235 2.46734 14.2419 3.23369C15.0604 4.00004 15.5419 5.05945 15.581 6.18C15.5419 7.30064 15.0604 8.36014 14.242 9.12665C13.4236 9.89317 12.3348 10.3043 11.214 10.27H11.213ZM11.213 3.091C10.3664 3.06456 9.54383 3.37487 8.92562 3.95391C8.30741 4.53294 7.94399 5.33346 7.91502 6.18C7.94373 7.02707 8.30731 7.82816 8.92599 8.40746C9.54466 8.98677 10.3679 9.29697 11.215 9.27C12.0622 9.29697 12.8854 8.98677 13.5041 8.40746C14.1227 7.82816 14.4863 7.02707 14.515 6.18C14.4861 5.33292 14.1222 4.53194 13.5034 3.95282C12.8845 3.3737 12.0612 3.06375 11.214 3.091H11.213Z" fill="#FFFFFF"/></svg></span>
<input type="password" value="" name="customer[password]" placeholder="Passwort*" id="CustomerPassword" class="CustomerPassword input-full{% if form.errors contains 'password' %} error{% endif %}">
</div>
<div class="grid Passwort-vergessen">
<div class="grid__item hide">
<label for="CustomerPassword">{{ 'customer.login.password' | t }}</label>
</div>
<div class="grid__item ">
<small class="label-info">
<a href="#recover" id="RecoverPassword">
{{ 'customer.login.forgot_password' | t }}
</a>
</small>
</div>
</div>
{%- endif -%}
<div>
<button type="submit" class="btn btn--full button button--primary ">
{{ 'customer.login.sign_in' | t }}
</button>
</div>
<p class="registrieren-text">Neu hier? <a href="/account/register">Jetzt registrieren</a></p>
{%- endform -%}
</div>
<div id="RecoverPasswordForm" class="hide my-account-custom ">
<div class="form-vertical">
<h2 class="text-left">{{ 'customer.recover_password.title' | t }}</h2>
<p class="text-left">{{ 'customer.recover_password.subtext' | t }}</p>
{%- form 'recover_customer_password' -%}
{{ form.errors | default_errors }}
{%- if form.posted_successfully? -%}
<span class="hide reset-password-success"></span>
{%- endif -%}
<label for="RecoverEmail">{{ 'customer.login_page.email' | t }}</label>
<input type="email" value="" placeholder="E-Mail-Adresse*" name="email" id="RecoverEmail" class="input-full" autocorrect="off" autocapitalize="off">
<p>
<button type="submit" class="btn button button--primary ">
{{ 'customer.login_page.submit' | t }}
</button>
<button type="button" class="button button--primary" id="HideRecoverPasswordLink">{{ 'customer.login_page.cancel' | t }}</button>
</p>
<
{%- endform -%}
</div>
</div>
{%- if shop.checkout.guest_login -%}
<hr class="hr--clear">
<h1>{{ 'customer.login.guest_title' | t }}</h1>
<hr class="hr--small">
{%- form 'guest_login' -%}
<button type="submit" class="btn">
{{ 'customer.login.guest_continue' | t }}
</button>
{%- endform -%}
{%- endif -%}
</div>
</div>
</div>
</div>
//customers/register.liquid
<div class="customers-login customers-register custom-account" style="background:url({{ settings.login-image | img_url: 'master' }})">
<div class="register-wrapper">
<div class="main-register-content">
<div class="page-width page-width--tiny page-content my-account-custom">
<header class="section-header">
<h1 class="section-header__title">{{ 'customer.register.title' | t }}</h1>
</header>
<div class="form-vertical ">
{%- form 'create_customer' -%}
{{ form.errors | default_errors }}
<label for="FirstName">{{ 'customer.register.first_name' | t }}</label>
<input type="text" placeholder="Vorname*" name="customer[first_name]" id="FirstName" class="input-full"{% if form.first_name %} value="{{ form.first_name }}"{% endif %} autocapitalize="words" autofocus>
<label for="LastName">{{ 'customer.register.last_name' | t }}</label>
<input type="text" placeholder="Nachname*" name="customer[last_name]" id="LastName" class="input-full"{% if form.last_name %} value="{{ form.last_name }}"{% endif %} autocapitalize="words">
<label for="Email">{{ 'customer.register.email' | t }}</label>
<input type="email" placeholder="E-Mail-Adresse*" name="customer[email]" id="Email" class="input-full{% if form.errors contains 'email' %} error{% endif %}"{% if form.email %} value="{{ form.email }}"{% endif %} autocorrect="off" autocapitalize="off">
<label for="CreatePassword">{{ 'customer.register.password' | t }}</label>
<div class="password-fild-wrap">
<span class="showhide-pass-button togglePassword"><svg width="23" height="13" viewBox="0 0 23 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.213 12.359C9.01848 12.3327 6.86214 11.7812 4.92439 10.7507C2.98664 9.72027 1.32382 8.24077 0.0750208 6.436C0.0258838 6.35966 -0.000244141 6.27079 -0.000244141 6.18C-0.000244141 6.08921 0.0258838 6.00034 0.0750208 5.924C1.32382 4.11922 2.98664 2.63973 4.92439 1.60927C6.86214 0.578803 9.01848 0.0273385 11.213 0.000999451C13.4077 0.0274263 15.5641 0.578922 17.502 1.60937C19.4399 2.63982 21.1029 4.11927 22.352 5.924C22.4012 6.00034 22.4273 6.08921 22.4273 6.18C22.4273 6.27079 22.4012 6.35966 22.352 6.436C21.1029 8.24073 19.4399 9.72018 17.502 10.7506C15.5641 11.7811 13.4077 12.3326 11.213 12.359ZM1.16702 6.18C2.32251 7.76575 3.83236 9.05975 5.5763 9.95888C7.32023 10.858 9.25006 11.3375 11.212 11.359C13.1742 11.3376 15.1042 10.8583 16.8483 9.95911C18.5924 9.05996 20.1024 7.76589 21.258 6.18C20.1025 4.59424 18.5927 3.30025 16.8487 2.40111C15.1048 1.50198 13.175 1.02254 11.213 1.001C9.25089 1.02238 7.32087 1.50175 5.57674 2.40089C3.83262 3.30004 2.32261 4.59411 1.16702 6.18ZM11.213 10.27C10.0924 10.304 9.00391 9.89278 8.1857 9.12629C7.3675 8.35981 6.88617 7.30046 6.84702 6.18C6.88616 5.05945 7.36766 4.00004 8.18612 3.23369C9.00458 2.46734 10.0933 2.05646 11.214 2.091C12.3347 2.05646 13.4235 2.46734 14.2419 3.23369C15.0604 4.00004 15.5419 5.05945 15.581 6.18C15.5419 7.30064 15.0604 8.36014 14.242 9.12665C13.4236 9.89317 12.3348 10.3043 11.214 10.27H11.213ZM11.213 3.091C10.3664 3.06456 9.54383 3.37487 8.92562 3.95391C8.30741 4.53294 7.94399 5.33346 7.91502 6.18C7.94373 7.02707 8.30731 7.82816 8.92599 8.40746C9.54466 8.98677 10.3679 9.29697 11.215 9.27C12.0622 9.29697 12.8854 8.98677 13.5041 8.40746C14.1227 7.82816 14.4863 7.02707 14.515 6.18C14.4861 5.33292 14.1222 4.53194 13.5034 3.95282C12.8845 3.3737 12.0612 3.06375 11.214 3.091H11.213Z" fill="#ffffff"/></svg></span>
<input type="password" placeholder="Passwort*" name="customer[password]" id="CustomerPassword" class="CustomerPassword input-full{% if form.errors contains 'password' %} error{% endif %}">
</div>
<p>
<label for="register-submit" class="hidden-label">{{ 'customer.register.submit' | t }}</label>
<input type="submit" id="register-submit" value="{{ 'customer.register.submit' | t }}" class="btn btn--full button button--primary register-btn">
</p>
{%- endform -%}
<p class="registrieren-text">Konto vorhanden? <a href="/account/login">Zur Anmeldung</a></p>
</div>
</div>
</div>
</div>
</div>
//css
body.account {
max-width: 100%;
padding: 0;
}
body.account .header:not(.drawer-menu).page-width {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
:is(.account,.order) .cart-drawer__footer h2 {
margin-top: 0;
margin-bottom: 0;
}
:is(.account,.order) .cart-drawer__footer p {
font-size: .938rem;
letter-spacing: .019rem;
color: #000;
font-family: var(--font-body-family);
margin-bottom: 0;
}
.account #CartDrawer table td:first-of-type a {
box-shadow: none;
border: 0;
}
body.transparent.black .header-wrapper {
position: relative;
background-color: #fff;
}
:is(.account,.order) .announcement-bar p {
margin: 0;
font-size: .75rem;
}
body.transparent.black .header-wrapper {
position: relative;
background-color: #fff;
}
body.transparent.black .header__heading-logo {
filter: brightness(0);
}
body.transparent.black div#cart-total,
body.transparent.black .header__active-menu-item,
body.transparent.black .header-wrapper .header__menu-item{
color: #121212;
}
body.transparent.black .header__icons svg {
filter: brightness(0);
}
.addresses h2 {
font-size: 1.25rem;
}
.customer.addresses .field label,
.customer.addresses .field input {
font-size: 1rem;
}
.customer.addresses .field input{
padding-left: 0;
}
.customer.addresses .field label {
left: 0;
display: none !important;
}
.customer button {
margin: 4rem 0 1.5rem;
height: 2.5rem;
padding: 0 2.5rem;
background: var(--btn-primary-color);
box-shadow: 1px 1px 30px #ffffff67;
border-radius: 20px;
color: var(--btn-primary-text-color);
font-size: .875rem;
line-height: 2.5rem;
min-height: auto;
font-family: var(--heading-font-semibbold);
}
:is(.account,.order)>div.shopify-section:nth-of-type(2) {
display: block;
margin: 0;
}
:is(.account,.order) .customer.account a,
:is(.account,.order) .customer.account p {
font-size: 1rem;
}
.customer.account a .svg-wrapper {
filter: brightness(0);
}
:is(.account,.order) h2 {
margin-top: 0;
font-size: 1.25rem;
letter-spacing: .125rem;
}
.custom-account {
padding-top: 6.25rem;
padding-bottom: 6.25rem;
background-size: cover !important;
}
.my-account-custom {
max-width: 33.75rem!important;
margin: 0 auto;
padding-top: 5rem;
}
.hide {
display: none !important;
}
.customers-login .login-wrapper .main-login-content .form-vertical label[for=CustomerEmail],
.customers-login .login-wrapper .main-login-content .form-vertical .password-label {
display: none;
}
h1.section-header__title {
text-align: center;
color: #fff;
font-size: 1.875rem;
line-height: 2.5rem;
letter-spacing: .188rem;
margin-bottom: 2.5rem;
}
.my-account-custom input:not(.button) {
height: 2.5rem!important;
line-height: 2.5rem!important;
padding-top: 0!important;
padding-bottom: 0!important;
font-size: .625rem!important;
padding-left: 1.25rem!important;
padding-right: 1.25rem!important;
border-radius: 1.25rem!important;
color: #868686;
width: 100%;
margin-bottom: .75rem;
box-shadow: none;
border: 0;
font-family: var(--font-body-family);
letter-spacing: 0.013rem;
}
.my-account-custom input::placeholder{
color: #868686;
}
.password-fild-wrap .showhide-pass-button {
display: flex;
position: absolute;
top: 0;
right: 1rem;
height: 2.5rem;
cursor: pointer;
align-items: center;
width: 100%;
max-width: 1.375rem;
justify-content: center;
filter: brightness(0);
}
.password-fild-wrap {
position: relative;
}
.password-fild-wrap .showhide-pass-button:not(.show-password):after {
content: "";
width: calc(100% - 17px);
height: 1px;
position: absolute;
background-color: #fff;
transform: rotate(-45deg);
}
.grid.Passwort-vergessen .grid__item {
width: 100%;
max-width: 100%;
}
a#RecoverPassword {
font-family: var(--font-body-family);
letter-spacing: 0.013rem;
color: #868686;
font-size: .625rem;
}
.grid.Passwort-vergessen {
text-align: center;
}
button.btn.btn--full.button.button--primary, input#register-submit {
width: 100%;
}
p.registrieren-text {
text-align: center;
color: #fff;
}
p.registrieren-text a {
color: #fff;
}
.form-vertical h2,.form-vertical p {
color: #fff;
text-align: center;
}
div#RecoverPasswordForm p {
margin-top: 0;
}
.form-vertical h2{
margin-bottom: 0;
}
.my-account-custom label {
display: none;
}
div#RecoverPasswordForm p {
text-align: center;
}
.errors li {
color: #fff;
list-style: none;
}
.errors ul {
padding: 0;
}
/*adress*/
.addresses .select__select,.addresses .customer select,
.addresses .field__input, .addresses .customer .field input {
height: 2.5rem!important;
line-height: 2.5rem!important;
padding-top: 0!important;
padding-bottom: 0!important;
font-size: .875rem !important;
padding-left: 1.25rem!important;
padding-right: 1.25rem!important;
border-radius: 1.25rem!important;
color: #868686;
border: 1px solid #868686;
}
.addresses .select .svg-wrapper,
.addresses .customer select+.svg-wrapper {
height: .6rem;
width: 1rem;
pointer-events: none;
position: absolute;
top: calc(50% - .2rem);
right: 1rem;
}
.addresses .field__input::placeholder{
color: #868686 !important;
}
.addresses .field:before,.addresses .field:after{
display:none;
}
.addresses label.field__label {
font-size: 1rem !important;
line-height: 0.5;
display: none;
}
.addresses .field__input::placeholder,
.addresses .customer .field input::placeholder {
opacity: 1 !important;
padding:0; !important;
}
.addresses .field {
margin-bottom: 1rem !important;
margin-top: 0 !important;
}
.addresses .select {
margin-bottom: 1rem;
margin-top: 1rem;
}
.addresses .customer button {
margin: 2rem 0 1.5rem;
}
/*address*/
@media screen and (max-width: 849px){
.my-account-custom {
padding-top: 0;
}
.my-account-custom input:not(.button) {
height: 38px!important;
line-height: 38px!important;
}
.custom-account {
padding-bottom: 50px;
}
}
