Working with Passcode/Secret Link expiry in UNIX timestamp
When you've set an expiration time in the passcode or secret link keys, you can see the expiration time as a UNIX timestamp. That's found in cart.json between the "-" and the ":" in the Locksmith entry:
The number before the "-" is the key id that was used to open the lock. What's after the colon is not valuable.
Clearing the Locksmith cart attribute
Locksmith adds information as a cart attribute when using remote keys. You can clear that manually with something like this. This triggers when the page loads:
This code is designed to be added to the "Passcode prompt" field in Locksmith's settings, or the "Passcode prompt" field on a lock's settings page.
Update background-image: attribute with the URL for your image
Make sure you update the padding-top: attribute with your images aspect ratio. For example, calculate the aspect ratio of an image of size 1080*1920 pixels like this: ((1080 / 1920) * 100)% = 56.25%
<style>
.locksmith-passcode-container {
content: "";
display: block;
padding-top: 56.25%; /* Adjust this value based on the actual aspect ratio of your background image. For example, here is a calculation of the aspect ratio for an image of size 1080*1920 pixeles: ((1080 / 1920) * 100)% = 56.25% */
flex-direction: column;
justify-content: center; /* Aligns content vertically center */
align-items: center; /* Aligns content horizontally center */
height: 100%; /* Ensures the container takes full height of its parent */
}
#locksmith-content::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https:// your image source here');
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
}
#locksmith-content {
position: relative;
}
#locksmith-passcode-form {
position: absolute;
top: 50%; /* Aligns content vertically center */
left: 50%; /* Aligns content vertically center */
transform: translate(-50%, -50%); /* Adjusts the position of the passcode from so that its center aligns with the center of the div. */
box-sizing: inherit;
max-width: 475px; /* Sets the maximum width of the passcode form */
width: 100%;
padding: 20px 25.45px;
z-index: 1;
}
</style>
Redirecting after customer registration
<script>
(function() {
var current_url = window.location.href;
var REDIRECT_PATH = '{{ current_url }}{% if collection %}/collections/{{ collection.handle }}{% endif %}/products/{{ product.handle }}';
var selector = '#create_customer, form[action$="/account"][method="post"]',
$form = document.querySelectorAll(selector)[0];
if ($form) {
$redirect = document.createElement('input');
$redirect.setAttribute('name', 'return_to');
$redirect.setAttribute('type', 'hidden');
$redirect.value = REDIRECT_PATH;
$form.appendChild($redirect);
}
})();
</script>
Removing product information from Shopify Analytics in the page source
Sometimes, Shopify Analytics, Google Analytics, or Web Pixels can leave bits of information about your locked products in the page source. Locksmith can't filter that, since it's outside of your theme, but you may be able to replace the content with null values for just your locked resources.
Here's an example of how that might work with Shopify Analytics scripts: