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?