Did you know that your customers can create accounts with your Shopify store? It’s relatively easy to do. Go to settings, go to checkout and choose one of the following options: “Accounts are optional” or “Accounts are required” and your customers will be prompted to open an account on a Shopify create account page.
Why might you want your customers to have accounts? You can collect your shoppers’ contact information and develop an email list to help grow your business with customer retention. You can also offer coupons, rewards, and benefits to these customers.
Signing up for an account is also beneficial to your customers because it makes it easier for them to order from your store again, keeps track of their order history, and tracks their current orders.
If you want your customers to have accounts with your store, you will need to create a few redirect Shopify pages. When your shoppers initially create the account, you will want to redirect them to a newly designed Welcome page. You can even add code to put confetti on the page.
Redirect Shopify Customer to Specific Page After Login
You will also need a Shopify login page for when customers log in Shopify: an account page. This tutorial will teach you how to add login page in Shopify.
Logout and Account Creation Shopify
When users log out, you can redirect them to an FAQ page
- Redirect customer on new account creation
By default, new customers are directed to the account page after they register a new account. Kindly follow the below steps to redirect the customer to a specific page when they register a new account:
In this example, we will write some simple code to redirect customers to Shopify’s Cart page. Add the following code near the bottom of layout/theme.liquid, just before </body>. To redirect to a different page, simply replace “/checkout” with your desired redirect location.
(function() {
var REDIRECT_PATH = '/checkout';
var selector = '#create_customer, form[action$="/account"][method="post"]',
$form = document.querySelectorAll(selector)[0];
if ($form) {
$redirect = document.createElement('input');
$redirect.setAttribute('name', 'return_to');
$redirect.setAttribute('type', 'hidden');
$redirect.value = REDIRECT_PATH;
$form.appendChild($redirect);
}
})();
</script>
In case you want to send your customers to a welcome/congratulations page you can style it a bit with falling confetti. From the navigation to the left scroll down to the templates directory. Click on add a new template. From the drop down choose a page and you can name it welcome or success page. At the following code at the bottom of the file:
<canvas id="canvas"></canvas>
<style>canvas {display: block;position: relative;zindex: 1;pointer-events: none;position: fixed;top: 0;}</style>
<script>
var canvas1,ctx,W,H;if(screen.width>=988)var mp=50;else mp=50;var deactivationTimerHandler,reactivationTimerHandler,animationHandler,particles=[],angle=0,tiltAngle=0,confettiActive=!0,animationComplete=!0,particleColors={colorOptions:["DodgerBlue","OliveDrab","Gold","pink","SlateBlue","lightblue","Violet","PaleGreen","SteelBlue","SandyBrown","Chocolate","Crimson"],colorIndex:0,colorIncrementer:0,colorThreshold:10,getColor:function(){return this.colorIncrementer>=10&&(this.colorIncrementer=0,this.colorIndex++,this.colorIndex>=this.colorOptions.length&&(this.colorIndex=0)),this.colorIncrementer++,this.colorOptions[this.colorIndex]}};function confettiParticle(t){this.x=Math.random()*W,this.y=Math.random()*H-H,this.r=RandomFromTo(10,30),this.d=Math.random()*mp+10,this.color=t,this.tilt=Math.floor(10*Math.random())-10,this.tiltAngleIncremental=.07*Math.random()+.05,this.tiltAngle=0,this.draw=function(){return ctx.beginPath(),ctx.lineWidth=this.r/2,ctx.strokeStyle=this.color,ctx.moveTo(this.x+this.tilt+this.r/4,this.y),ctx.lineTo(this.x+this.tilt,this.y+this.tilt+this.r/4),ctx.stroke()}}function InitializeButton(){$("#stopButton").click(DeactivateConfetti),$("#startButton").click(RestartConfetti)}function SetGlobals(){canvas1=document.getElementById("canvas"),ctx=canvas1.getContext("2d"),W=window.innerWidth,H=window.innerHeight,canvas1.width=W,canvas1.height=H}function InitializeConfetti(){particles=[],animationComplete=!1;for(var t=0;t<mp;t++){var i=particleColors.getColor();particles.push(new confettiParticle(i))}StartConfetti()}function Draw(){ctx.clearRect(0,0,W,H);for(var t,i=[],n=0;n<mp;n++)t=n,i.push(particles[t].draw());return Update(),i}function RandomFromTo(t,i){return Math.floor(Math.random()*(i-t+1)+t)}function Update(){var t,i=0;angle+=.01,tiltAngle+=.1;for(var n=0;n<mp;n++){if(t=particles[n],animationComplete)return;!confettiActive&&t.y<-15?t.y=H+100:(stepParticle(t,n),t.y<=H&&i++,CheckForReposition(t,n))}0===i&&StopConfetti()}function CheckForReposition(t,i){(t.x>W+20||t.x<-20||t.y>H)&&confettiActive&&(i%5>0||i%2==0?repositionParticle(t,Math.random()*W,-10,Math.floor(10*Math.random())-10):Math.sin(angle)>0?repositionParticle(t,-5,Math.random()*H,Math.floor(10*Math.random())-10):repositionParticle(t,W+5,Math.random()*H,Math.floor(10*Math.random())-10))}function stepParticle(t,i){t.tiltAngle+=t.tiltAngleIncremental,t.y+=(Math.cos(angle+t.d)+3+t.r/2)/2,t.x+=Math.sin(angle),t.tilt=15*Math.sin(t.tiltAngle-i/3)}function repositionParticle(t,i,n,e){t.x=i,t.y=n,t.tilt=e}function StartConfetti(){W=window.innerWidth,H=window.innerHeight,canvas1.width=W,canvas1.height=H,function t(){return animationComplete?null:(animationHandler=requestAnimFrame(t),Draw())}()}function ClearTimers(){clearTimeout(reactivationTimerHandler),clearTimeout(animationHandler)}function DeactivateConfetti(){confettiActive=!1,ClearTimers()}function StopConfetti(){animationComplete=!0,null!=ctx&&ctx.clearRect(0,0,W,H)}function RestartConfetti(){ClearTimers(),StopConfetti(),reactivationTimerHandler=setTimeout(function(){confettiActive=!0,animationComplete=!1,InitializeConfetti()},100)}$(document).ready(function(){SetGlobals(),InitializeButton(),InitializeConfetti(),$(window).resize(function(){W=window.innerWidth,H=window.innerHeight,canvas1.width=W,canvas1.height=H})}),window.requestAnimFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){return window.setTimeout(t,1e3/60)};
</script>
Create a new page as you would normally do, and on the right side you will find the templates box. From the drop-down choose the template you've just created and click on Save.
- Redirect customer on login
When a customer visits your online store and logs in to their account, they will see a My Account page that shows their past orders and associated shipping and billing addresses. You can edit your theme so that customers are taken to a different page when they log in.
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Templates directory, click customers/login.liquid.
Find the following line of code:
On a new line below it, paste the following:
<input type="hidden" name="checkout_url" value="/collections/all">
For the value attribute in the line of code that you just pasted, replace /collections/all with the relative URL of the page that you want customers to see when they log in.
Click Save
- Redirect customer on logout
By default, Shopify redirects the customers to home page after logout. If you want to redirect the customer to show a specific page, there is no built in way to do it. Here is a small script to achieve the same.
This script will work for all the logout links that you may have on the page. Paste the following code right above the closing body tag in the theme.liquid.
<script>
(function() {
var REDIRECT_PATH = "/collections/all";
var logoutBtn = document.querySelector('a[href^="/account/logout"]');
if(logoutBtn) {
logoutBtn.addEventListener('click', function() {
fetch(logoutBtn.href).then(() => window.location.href = REDIRECT_PATH)
})
}
})()
</script>
This is how to create customer account in Shopify. You should now know how to set up a Shopify login register, a welcome page, a redirect login page Shopify, and a redirect log-out page. Your customers should now be able to create accounts, save their personal infomration and order histories, and take advantage of special coupons and discounts you might offer. This is a great way to get customers to return to your store and make more purchases.
We hope you have gotten the most from this tutorial. As always, if you have questions, feel free to contact us.