Advice and answers from the Locksmith Team

Whenever you use Locksmith to require your visitors to log in with their customer account, Locksmith will automatically pull in your theme's customer login form, with a message of your choosing added just above it.

Here's Locksmith's default message, which you can customize over in your Locksmith account's "Settings" tab.

<p><strong>This content is protected</strong> - please log in with your customer account to continue.</p>

Sometimes this placement isn't quite right - depending on your theme, you might not want to have your message placed above the login form. If your login form is preceded by a heading or some breadcrumbs, for example, you may want to insert the Locksmith-specific message beneath the heading, but above the email and password fields.

The rest of this guide gets a bit technical, so if you need a hand, just hit that chat button in the lower-right corner! :)

To customize where your guest content message appears, open up the code editor for your Shopify theme (here's how!), and open the file templates/customers/login.liquid. You might see something like this:

<h1>Login</h1>

{% form 'customer_login' %}
  {{ form.errors | default_errors }}

  <label for="customer_email">Email Address</label>
  <input type="email" name="customer[email]" />

  <label for="customer_password">Password</label>
  <input type="password" name="customer[password]" />

  <input type="submit" value="Sign In" />
{% endform %}

Add the code <!-- locksmith-message --> wherever you'd like your guest message to appear, like so:

<h1>Login</h1>

<!-- locksmith-message -->

{% form 'customer_login' %}
  {{ form.errors | default_errors }}

  <label for="customer_email">Email Address</label>
  <input type="email" name="customer[email]" />

  <label for="customer_password">Password</label>
  <input type="password" name="customer[password]" />

  <input type="submit" value="Sign In" />
{% endform %}

Next, head to the "Settings" tab of your Locksmith account, and scroll down to the "Guest message content" field. Use a value like the example below to (a) customize your guest message, and (b) have Locksmith display your login template with your custom message injected into it:

{% capture locksmith_message %}
  <p>Please login below! :)</p>
{% endcapture %}

{{ locksmith_customer_login_form | replace: '<!-- locksmith-message -->', locksmith_message }}

That's it! :D You've just customized the login form's display using pure Liquid - congratulations, and feel free to experiment until the result is just right for your shop. :)

Did this answer your question?