All Collections
Advanced Design
Create Account / Register - full page look.
Create Account / Register - full page look.

Make the create account or register form into a full page layout.

Niall Diamond avatar
Written by Niall Diamond
Updated over a week ago

I was admiring the new Walmart.com website the other day and really appreciated how they made their register/create account form into a full page layout. For me this makes a much better user experience as it takes away all the distractions. 

Walmart Register Page

So I thought to myself, wouldn't it be nice to do this on an EvolutionX store!! 


BEFORE

AFTER

Step 1 

Add the below JS code to your footer block .

<script>
// Backbutton to work
function registerBackBut() {
    window.history.back();
}

// load this only on the register page

if ($('body.register').length > 0) {

// Add the gradient-box
$('.page-content').prepend("<div class=\"gradient-box\"></div>");
// Add the backbutton
$('body').prepend("<button class=\"registerBackBut\" onclick=\"registerBackBut()\"><i class=\"fa fa-arrow-left\" aria-hidden=\"true\"></i></button>");
}
</script>

Step 2

Add the below CSS code to your CSS block 

/* start of full page create account  */

/* blue bar gradient  */
.gradient-box {
    position: fixed;
    bottom: 0%;
    width: 100%;
    height: 30%;
    z-index: -1;
    background: rgb(3,131,185);
    background: -moz-linear-gradient(270deg, rgba(3,131,185,1) 41%, rgba(38,169,225,0.8883928571428571) 100%);
    background: -webkit-linear-gradient(270deg, rgba(3,131,185,1) 41%, rgba(38,169,225,0.8883928571428571) 100%);
    background: linear-gradient(270deg, rgba(3,131,185,1) 41%, rgba(38,169,225,0.8883928571428571) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0383b9",endColorstr="#26a9e1",GradientType=1);

}



/* Darken the shadow and change forms background-color */
.register-form .form-container {
    box-shadow: 2px 4px 30px -6px #404041;
    background: #ffff;
}

/* Remove the header section */
.register .header-full {
    display: none;
}

/* Remove spacing around the logo */
.register-form .logo {
    margin-top: 0px;
    margin-bottom: 0px;
   
}

/* Darken form text color */
.log-reg .form-container form .form-group > label {
    color: #404041;
    }
   
/* Increase form text size */
.register-form label {
    font-size: 1em;
}

/* background */
body.register {
    background-color: #fff;
}

/* field borders */
.register .form-control {
    border: 1px solid #b6b6b6;
}

/* checkbox borders */
.register .control__indicator {
    border: 1px solid #b6b6b6;
}

/* font awesome arrow */
.register .fa-arrow-left {
    font-size: 24px;
   
}
/* back button */
button.registerBackBut {
    box-shadow: none;
    border: none;
    position: absolute;
    top:25px;
    left:40px;
}

/* back button remove on mobile  */
@media (max-width: 768px) {
button.registerBackBut {
display: none;

}

}
/* end of full page create account  */


👍 Pro tip 

If you want to add your own gradient color. Get the code on https://cssgradient.io/

That's it, now go be Awesome!!

Did this answer your question?