Today we are taking the standard sign in/sign up page for customers who create an account, and customizing it to have a more modern style and animation!
Before:
After:
Code: https://github.com/ndrishinski/blogs/commit/58b80e1ea9a4e9a36276dcd3ac17e68ba87d7330
Prefer Video?
Enjoy, otherwise read on!
Edit main-login.liquid
In this tutorial I am working from the Dawn starter theme. Under the sections directory, open up main-login.liquid and replace all the contents with the following code:
{{ 'customer.css' | asset_url | stylesheet_tag }}
{%- style -%}
.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;
}
}
/* new design styles: */
.customer-login-unique * {
font-family: 'Montserrat', sans-serif;
}
.customer-login-unique {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
* {
box-sizing: border-box;
}
.customer-login-unique h1 {
font-weight: bold;
margin: 0;
}
.customer-login-unique h2 {
text-align: center;
}
.customer-login-unique p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}
.customer-login-unique span {
font-size: 12px;
}
.customer-login-unique a {
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
.customer-login-unique button {
border-radius: 20px;
border: 1px solid #FF4B2B;
background-color: #FF4B2B;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
.customer-login-unique button:active {
transform: scale(0.95);
}
.customer-login-unique button:focus {
outline: none;
}
.customer-login-unique button.ghost {
background-color: transparent;
border-color: #FFFFFF;
}
.customer-login-unique form {
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
}
.customer-login-unique input {
background-color: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.customer-login-unique .container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.customer-login-unique .form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.customer-login-unique .sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.customer-login-unique .container.right-panel-active .sign-in-container {
transform: translateX(100%);
}
.customer-login-unique .sign-up-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.customer-login-unique .container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
@keyframes show {
0%, 49.99% {
opacity: 0;
z-index: 1;
}
50%, 100% {
opacity: 1;
z-index: 5;
}
}
.customer-login-unique .overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
/* z-index: 100; */
}
.container.right-panel-active .overlay-container{
transform: translateX(-100%);
}
.customer-login-unique .overlay {
background: #FF416C;
background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
background: linear-gradient(to right, #FF4B2B, #FF416C);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.customer-login-unique .container.right-panel-active .overlay {
transform: translateX(50%);
}
.customer-login-unique .overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.customer-login-unique .overlay-left {
transform: translateX(-20%);
}
.customer-login-unique .container.right-panel-active .overlay-left {
transform: translateX(0);
}
.customer-login-unique .overlay-right {
right: 0;
transform: translateX(0);
}
.customer-login-unique .container.right-panel-active .overlay-right {
transform: translateX(20%);
}
.customer-login-unique footer {
background-color: #222;
color: #fff;
font-size: 14px;
bottom: 0;
position: fixed;
left: 0;
right: 0;
text-align: center;
z-index: 999;
}
.customer-login-unique footer p {
margin: 10px 0;
}
.customer-login-unique footer i {
color: red;
}
.customer-login-unique footer a {
color: #3c97bf;
text-decoration: none;
}
@media screen and (max-width: 750px) {
.customer-login-unique .container {
width: 90vw;
}
.customer-login-unique .container.right-panel-active .sign-up-container {
transform: translateX(0%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
width: 100%;
}
.customer-login-unique .container.right-panel-active .sign-in-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
width: 100%;
}
.customer-login-unique .container .overlay-container {
display: none;
}
.customer-login-unique .container .sign-up-container {
transform: translateX(0%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
width: 100%;
}
.customer-login-unique .container .sign-in-container {
transform: revert-layer;
opacity: 1;
width: 100%;
z-index: 5;
animation: show 0.6s;
}
.mobile-swap-button {
text-decoration: underline;
cursor: pointer;
color: #FF4B2B;
}
.customer-login-unique .mobile-swap {
display: block;
}
}
.mobile-swap {
display: none;
}
.padding-bottom {
padding-bottom: 10px;
}
{%- endstyle -%}
<div class="customer-login-unique section-{{ section.id }}-padding">
<div class="container" id="container">
<div class="form-container sign-up-container">
{%- form 'create_customer' -%}
{{ form.errors | default_errors }}
<h1 class="padding-bottom">Create Account</h1>
<input name="customer[name]" id="Name" type="text" placeholder="Name" />
<input name="customer[email]" id="Email" type="email" placeholder="Email" />
<input name="customer[password]" id="CreatePassword" type="password" placeholder="Password" />
<button>Sign Up</button>
<div>
<p class="mobile-swap">or sign in <span class="mobile-swap-button" id="mobile-swap">here</span></p>
</div>
{%- endform -%}
</div>
<div class="form-container sign-in-container">
{%- form 'customer_login', novalidate: 'novalidate' -%}
<h1 class="padding-bottom">Sign in</h1>
{{ form.errors | default_errors }}
<input name="customer[email]" id="CustomerEmail" type="email" placeholder="Email" />
<input name="customer[password]" id="CustomerPassword" type="password" placeholder="Password" />
<a href="#">Forgot your password?</a>
<button>Sign In</button>
<div>
<p class="mobile-swap">or sign up <span class="mobile-swap-button" id="mobile-swap-2">here</span></p>
</div>
{%- endform -%}
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Welcome Back!</h1>
<p>To see your account dashboard and information, please login.</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>Hello, Friend!</h1>
<p>Simply create an account to gain access to exclusive member only perks!</p>
<button class="ghost" id="signUp">Sign Up</button>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const mobileSwap = document.getElementById('mobile-swap');
const mobileSwap2 = document.getElementById('mobile-swap-2');
const container = document.getElementById('container');
signUpButton.addEventListener('click', () => {
container.classList.add("right-panel-active");
});
signInButton.addEventListener('click', () => {
container.classList.remove("right-panel-active");
});
mobileSwap.addEventListener('click', () => {
container.classList.remove("right-panel-active");
});
mobileSwap2.addEventListener('click', () => {
container.classList.add("right-panel-active");
});
})
</script>
{% schema %}
{
"name": "t:sections.main-login.name",
"settings": [
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
]
}
{% endschema %}Note that the CSS can go in a separate file and be imported in to shorten the length of this file.
Import Google Font
Now the last step missing is importing the font from a Google Fonts CDN. Simply add the link reference below to your theme.liquid file:
<head>
....
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
...
</head>Conclusion
After saving these files you should see a successful login / sign up page with a beautiful design and animation! Stay tuned for more Shopify related content.