Login form - redirect if incorrect password

[Chad_S_]

We have developed a login page for our wholesale customers with a login form and a custom checkout_url value specified:

<input type="hidden" name="checkout_url" value="/pages/wholesale-landing" />

It works great when the correct password is entered, but if incorrect, the user is redirected to:

/account/login?checkout_url=%2Fpages%2Fwholesale-landing

This is not what we need, as now the user is on the generic login page.  Ideally, an incorrect password would show the default error on this same page.

I've looked all over and seen this topic mentioned but never answered, so I'm hoping someone has a solution example to share.

[Chad_S_ · Accepted solution]

Right after posting this, I noticed that since the checkout_url is added to a query at the end of /account/login, I could use that to solve the whole thing:

1. In this example, my page is called /pages/custom-login
   1. Add the checkout_url field to the login form:  <input type="hidden" name="checkout_url" value="/pages/custom-login" />
2. In the template for the default login page (customers/login), I added this script, which reloads my custom login page IF that's the referring page (checks for the checkout_url added in the url string):
   <script>
   if(document.location.href.indexOf('?checkout_url=%2Fpages%2Fcustom-login') > -1) {
   document.location.href = '/pages/custom-login';
   }
   </script>
3. Back in the template for /pages/custom-login, I added this script which checks that referrer, and outputs an "Incorrect Password" message if the referrer was /account/login... (correct passwords would have passed you directly to your checkout_url destination, or /account by default)
   

   <script>
   var refer = document.referrer;
   var wrongpass = refer.includes("/account/login?checkout_url=%2Fpages%2Fcustom-login");

   if (wrongpass) {
   document.write("<p style='color:red; padding-top:10px'>INCORRECT PASSWORD</p>");
   } else {
   document.write("");
   }
   </script>

I sincerely hope this workaround helps someone trying to find this solution.  

[hshiebler]

Hi there-

I was hoping you could help me with this - I am trying to re-direct to a custom landing page once someone signs in - similar to what you're saying for wholesale customers. How would I re-direct customers to a new landing page once they login? Thanks so much

[Chad_S_]

For other customer action redirects, it's explained here by Huratips:  https://www.huratips.com/tech-tips/how-to-redirect-shopify-customer-to-specific-page-after-login-log....  A web search for "shopify redirect customer on login" would have found this for you.

---

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.

1. From your Shopify admin, go to Online Store > Themes
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Templates directory, click customers/login.liquid.
4. Find the following line of code:
   1. {% form 'customer_login' %}
5. On a new line below it, paste the following:
   1. <input type="hidden" name="checkout_url" value="/collections/all">
6. Replace /collections/all with the relative URL of the page that you want customers to see when they log in.
7. Click Save