Redirecting using Locksmith

Out of the box, when a Locksmith lock is activated on a specific page, Locksmith will block acess to the main content of the page (i.e. everything in between the header and footer). The main content will then be replaced by Locksmith's access denied content, which might be a sign-in page, a passcode prompt, or simply a message letting the customer know that they don't have access (depending on what keys and settings you are using).

Then, of course, once a customer gains access, they will be shown the content of the page normally.

While that is the default behavior, you also have the ability to send customers to a different page before or after they gain access to the content. So in this way, there are two types of redirecting - redirecting customers right away once they arrive on the locked page, or redirecting customer once they gain access.

Redirecting customers immediately when they arrive on a locked page - before they can gain access

To redirect customers this way, you'll simply use a regular Javascript redirect script, and enter it into the "Messages" area in Locksmith. More information on the messages area here:

This is an example of a simple redirect script:

<script>
  window.location = 'https://www.example.org/my-example-page-url';
</script>

The only thing you'll need to change is the exact URL. Use the full URL whenever possible (as opposed to partial URLs).

In Locksmith, this will look something like the following:

Also keep in mind that in the case of customer account keys, you have the option to define different messages(or behavior, in this case) based on whether or not the customer is signed in when they arrive on the page. So, you could redirect customers that were signed in (but still didn't have access), for example. This would look like the following:

Redirecting customers to a login form and returning them after signing in

Sometimes, a theme's login form will include features that Locksmith is unable to present when replacing locked resources with Locksmith's access denied content. This redirect is a good way to ensure customers see the correct login form.

The following code provides an example of a JavaScript redirect that automatically redirects customers to the default login form in a Shopify store. This script includes a variable that captures the customer's current URL and sets it as the return URL after signing in. This script can be pasted into the "Guest messages content" area in Locksmith.

<script>
    var current_url = encodeURIComponent(window.location.pathname);
    window.location.replace("/account/login?return_url=" + current_url);
</script>

Redirecting customers after they've gained access

Locksmith also has the ability to redirect customers once they've arrived to a page that they have access to. This could be useful if you wanted to show different pages to different customers once they've gained access. Passcodes is an area that this is frequently used for.

So - for example: three customer groups that each need to see a different collection. If I have a landing page that I put a Locksmith lock on, we can use the redirect feature to send each customer to a different collection, depending on which passcode they've entered.

The redirect-after-access feature is found in the key settings, accessed with the edit link to the right of each key:

The Redirect URL field is in the Key options section, at the bottom of the keys settings card:

Since this is a key setting, you can set a different redirect for each key. Notice in this example that each key is redirecting to a different collection URL:

Redirecting customers from the product page to the parent collection page before access is granted:

To redirect customers in this way, you can use some Liquid code to check if a customer is on a product page and then include a regular JavaScript redirect script within that Liquid. This code can be entered into the "Guest message content" field or "Passcode prompt" area on the collection lock's settings page. More information on the messages area here:

The following code provides an example of some Liquid and a JavaScript redirect that automatically redirects customers to a collection page from a product page in a Shopify store. The Liquid code checks for the default product template to prevent the script from running on the collection page. This script includes the URL that can be modified to redirect customers to the collection page for the locked collection.

This script can be pasted into the "Guest message content" field or "Passcode prompt" field on the respective collection lock's settings page.

{% if template == "product" %}
  <script>
    window.location = 'https://example-store.myshopify.com/collections/example-collection';
  </script>
{% endif %}

Related articles