A popular request from our Shopify clients is to send customers to a specific page after login or registration. Be that the cart, the checkout, a specific thank you page or the page/product they were looking at before they signed in or signed up.The solutions are different for Registration and Log In so we'll tackle them separately.
Login Solutions
REDIRECT TO A STATIC URL
Let's say you want to redirect customers to their cart after login.
Locate your customer login form{% form 'customer_login' %}, usually in customers/login.liquid.
On a new line immediately after {% form 'customer_login' %} , insert the relative URL for the desired destination. E.g. for cart:
<input type="hidden" name="checkout_url" value="/cart"/>
It should look something like this:
{% form 'customer_login' %}
<input type="hidden" name="checkout_url" value="/cart"/>
...
{% endform %}
And you're done!
If you want to redirect to checkout, replace value="/cart" with value="/checkout" Similarly, if it's a specific page, you can do like: value="/pages/my-page-handle"
How it Works
The name="checkout_url" is a special attribute that Shopify will use to determine where to send your customer after login. This can be set to anything, /cart and /checkout are popular, but what if you want to return the customer to a dynamic URL, say, the page that they were on when they clicked "Login"?
REDIRECT TO THE PREVIOUS PAGE
To do this, we're going to set the URL that we want to return the customer by inserting the return URL as a parameter of the login page so that we can use that in the form.
First, locate your login button. You might have multiple, usually, you will find it in the header, so try looking for a file called header.liquid.
The relevant line will look something like:
{{ 'layout.customer.log_in' | t | customer_login_link }}
or:
<a href="/account/login">Sign in to your account</a>
Change it to:
{% assign redirect_url = canonical_url | remove: shop.url %}
<a href="/account/login?checkout_url={{ redirect_url }}">Sign in to your account</a>
And you're done!
How it Works
In Shopify, the canonical_url object returns the canonical URL for the current page. The canonical URL is the page's "default" URL with any URL parameters removed. ref: https://www.shopify.com/partners/blog/canonical-urls
However, we want to return the relative path, not the absolute path, so we assign canonical_url to a redirect_url variable and strip out the primary domain. This is also necessary in the next step where we use return_to as that only works with relative paths.
So when the customer clicks the login button, if they are currently on:
https://https://mydomain.com/product/tshirt
we'll be sending the customer to a URL that looks like:
https://mydomain.com.account/login?checkout_url=/product/tshirt
Shopify will use the checkout_url parameter in the URL the same way as they would if it were embedded in the form, but this allows us to set the checkout_url to the page that they were on when they clicked the login button.
Registration Solutions
checkout_url only works on login, however, we can use return_to for the registration form. The process is essentially the same, with some caveats.
REDIRECT TO A STATIC URL
Let's say you want to redirect customers to a Thank you page after registration.
Locate your customer registration form {% form 'create_customer' %} , usually in customers/registration.liquid.
On a new line immediately after {% form 'create_customer' %}, insert:
<input type="hidden" name="return_to" value="/cart"/>
It should look something like this:
{% form 'create_customer' %}
<input type="hidden" name="return_to" value="/cart"/>
...
{% endform %}
REDIRECT TO THE PREVIOUS PAGE
First, locate your signup button. Again, usually you will find it in the header, so try looking for a file called header.liquid.
The relevant line will look something like:
{{ 'customer.login.sign_in' | t }}
{{ 'layout.customer.log_in' | t | customer_login_link }}
or:
<a href="/account/login">Sign in to your account</a>
Change it to:
{% assign redirect_url = canonical_url | remove: shop.url %}
<a href="/account/login?checkout_url={{ redirect_url }}">Sign in to your account</a>
Again, this is very similar to the process for Login, except that we can't use the return_to param in the URL the same way that we do for registration in order to make it dynamic, so we'll insert that field with javascript.
We use jQuery because basically every Shopify theme uses jQuery, so this works for our customers.
Create a new asset called account-redirect.js.liquid and insert the following:
var urlParams = new URLSearchParams(window.location.search);
(function($){
var redirect_url = urlParams.get('checkout_url');
// Register form, or captcha form for registering:
var registerForm = jQuery('#create_customer');
// Make our element:
var formElement = $('<input type="hidden" name="return_to">');
formElement.attr('value', redirect_url); // Shopify will use this value as the redirect destination
registerForm.append(formElement); // Add the element to the form.
}(jQuery));
Next, we need to update our login buttons to use
TODO: RETURN TO THE SPECIFIED PAGE, EVEN WITH RECAPTCHA
Whenever a customer account creation attempt is made more than once in a 24 hour period from a single IP address, a page with a captcha is loaded to help protect your customer list from being inundated with spam customer account creation.
There's no way currently (that I'm aware of) to edit the capture form to include the extra hidden input, furthermore, the URL changes to: https://mydomain.com/challenge and you'll notice, it's missing the params, so none of our solutions will work.
Now most customers won't run into this captcha, but for completeness, how do we ensure that even if they do, that we return them to the correct page?
-------
Credit to Eric Seastrand of Bubbleup.net for the inspiration for this:
1 comment
This helped me so much. It was exactly what I needed. Thanks for sharing your knowledge and helping the community.