Customizing passcode form elements

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 to Customizing Messages.
The below classes and IDs should be added to the bottom of your style.scss.liquid file, or the otherwise named main stylesheet for your theme. You'll add these classes there, and then specify the CSS attributes as you need. We've included some examples of styling here as well. 

Change the look of the continue button:
  .locksmith-passcode-container p:last-child { 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. 


<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, click the chat button in the lower right in the app, and let us know. :)
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us