An overview of the ways you can customize the the email list sign up prompt for our newsletter key conditions
Last updated
Was this helpful?
This applies to Klaviyo and Mailchimp key condition types - the setup instructions for which are linked below:
You can add any text prompt to the "Mailing list signup prompt" area, and it will be displayed right before the email input. The default prompt is shown below:
In addition, you can add any code to this area, and it 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>
Use {{ locksmith_email_form }} to denote where the form (input and button) itself will go, and then add in content that you want to display before and after it.
This results in the following:
To edit the text for the button, you'll need to follow Shopify's guide to "Edit default theme content":
Once there, you'll find a Locksmith tab in which you can edit the text as needed:
We have a dedicated guide on adding translated messages here:
If you have multiple key condition types on the same lock, it might be useful to include other form types within the prompt, so that they display on the same page. We have a guide on doing this here:
Please note that this is NOT compatible with overriding/editing the form itself (as detailed in the next section).
Note: This is advanced and requires knowledge of code. 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 or edit the code for you. With that said, you are still free to contact us with any troubleshooting questions that you have.
Use the following steps in order to override the form. The screenshots are taken from Chrome, but the steps are similar if using other browsers.
Once you've created a Mailchimp or Klaviyo key condition, open up your locked page in your storefront.
Right click on the email list signup form to inspect the code.
This should take you to the "Elements" tab. There, find the <div> element with the "locksmith-email-container" class:
You can copy the entire element and all child elements like so:
Paste this directly into your "Mailing list signup prompt". You should end up with something like this:
Save that, and open your locked page again on your storefront. If everything worked, your email list signup prompt and form should look exactly like it did before. But now you have the ability to edit it as needed. Please note that you must always include a <form> tag with an id of locksmith_email_form - otherwise Locksmith will try to include the form itself, and you'll end up with two forms - so don't remove that when editing the code.
Liquid - using
