Customizing the passcode form
Locksmith gives you flexibility in how you can customize the passcode form!
Here are some of the many different ways you can edit the passcode form!
This is the default behavior for the message. You can add as much content as you need, including text, images and backgrounds, by simply adding code directly to the "Passcode prompt" area, found on the lock page, under Messages:
Any code that you add to this area will be rendered normally, as if adding it to the theme. Including:
- HTML - using regular HTML tags
- CSS - using <style> your CSS code here </style>
- Javascript - using <script> your javascript code here </script>
Simply use {{ locksmith_passcode_form }} to denote where the form itself will go, and then add in content that you want to display before and after it.
<p>Please enter the passcode to continue: </p>
{{ locksmith_passcode_form }}
<p> Content to be displayed after the form </p>
This is not done in the Locksmith app, but rather in the theme's "Language" settings:
Once in the settings for a specific language, you'll need to go to the "Locksmith" tab, which is typically not visible right away:
So then finally, you can edit the text itself, under the Locksmith tab:
Note: This step only changes the wording for your default language. If you are using multiple languages in your store, you'll also need to go through the "Localize" step. Check out Shopify's guide on doing that here.
Some merchants want more control over the form itself, not just the text that is shown alongside it. This could just be for more granular edits to the way it looks, or to perform more complicated javascript operations on the text input.
Although we can help troubleshoot, if you choose to override the form, the coding and style is up to you, we are not able to create a new form for you.
To do this, simply use the "Passcode prompt" area to put in your new form. Since you're overriding the form, you'll need to add in all the code for the new form. To begin, copy/paste this entire section (including the script!) into the Messages > Passcode prompt area. Then, edit as needed:
<div class="locksmith-passcode-container container page-width">
<form id="locksmith_passcode_form">
<p>Enter the passcode to continue: </p>
<p><input autofocus id="locksmith_passcode" class="locksmith-passcode {% if locksmith_passcode_attempted %}failed{% endif %}"></p>
<p><button type="submit" class="button button-primary btn btn-primary action-button action_button">CONTINUE</button></p>
</form>
</div>
<script>
var passcodeForm = document.getElementById("locksmith_passcode_form");
passcodeForm.addEventListener('submit', function (event) {
event.preventDefault();
var passcode = document.getElementById("locksmith_passcode").value;
/* REMOVE THIS LINE and insert any desired transforms to passcode here */
Locksmith.submitPasscode(passcode, event);
});
</script>
If you need to perform text transforms (e.g. downcasing the text for case-insensitivity), do that in the marked area in the script above.
Editing tips
- Changing the form too extensively (editing the text input, script, classes/ids) could cause the passcode not to be submitted correctly, so try to stick as close to the above as possible.
- Locksmith will look for the <form> tag with the "locksmith_passcode_form" id, so that's something to keep in mind if you see that Locksmith is still rendering the default form when overriding:
<form id="locksmith_passcode_form">
...rest of form code...
</form>
This rest of this article is intended to be a reference guide for customizing the passcode form elements. That includes the passcode prompt field and submit button individually, as well as the form as a whole. A bit of CSS knowledge will be helpful in implementing what's below.
If you're looking for information about how to customize the message the customer sees above the passcode entry, check out this guide:
The below classes and IDs could be added to the bottom of your style.scss.liquid file( or the otherwise named main stylesheet for your theme) can be added directly to the "Passcode prompt" area using a
<style>...</style> HTML tag.. We've included some examples of styling here as well.
Change the look of the continue button:
#locksmith_passcode_submit { color: blue; }
Center the continue button
.locksmith-passcode-container p:last-child { text-align: center; }
Changing the wording of the Continue button and the loading message can be found in your store language settings under the Locksmith tab. :)
Change the look of the passcode entry field
#locksmith_passcode { border 1px solid red; }
Add a background image to the entire form
#locksmith-content {
background-image: url("https:// your image source here");
background-size: 100%;
background-repeat: no-repeat;
}
Add placeholder text to the passcode entry field.
This one is not added to your stylesheet, but directly in the passcode prompt message field in the app. This has both jquery and javascript versions.
jquery:
<script> setTimeout(() => { $('#locksmith_passcode').attr('placeholder', 'This is a placeholder!'); }, 10); </script>
Vanilla javascript:
<script>document.querySelector('#locksmith_passcode').setAttribute('placeholder', 'Enter password');</script>
If you need help, contact us via email at [email protected].
Last modified 1mo ago