add button to lock screen page

Site URL: https://www.alouciadesigns.com/when-you-land

Hi,

I would like to add a home button to the lock screen or make the lock image redirect to the home page. I see the code from previous responses but am unsure what to edit for it to work on my site. I'm currently using the Ready template. 

You'll need a Business Subscription or higher and would need to write javascript to do this.

It would also apply to all lock screens on your website and not just some. Are you happy for that to happen?

On 12/28/2021 at 11:49 AM, KwameAndCo said:

You'll need a Business Subscription or higher and would need to write javascript to do this.

It would also apply to all lock screens on your website and not just some. Are you happy for that to happen?

I would actually like to know this as well. I have a business account, and understand that it would be the same on all lock pages. 

On 7/23/2023 at 4:24 AM, AshaG said:

I would actually like to know this as well. I have a business account, and understand that it would be the same on all lock pages. 

Which position? Above or under Password box or?

On 7/22/2023 at 10:24 PM, AshaG said:

I would actually like to know this as well. I have a business account, and understand that it would be the same on all lock pages. 

As in how to do it?

On 7/24/2023 at 2:15 AM, tuanphan said:

Which position? Above or under Password box or?

Wherever really. They just need to specify.

On 7/23/2023 at 9:15 PM, tuanphan said:

Which position? Above or under Password box or?

Above please. Thank you!

On 7/25/2023 at 6:05 AM, KwameAndCo said:

As in how to do it?

Wherever really. They just need to specify.

Yes, I would like to be able to do this.

Just now, AshaG said:

Yes, I would like to be able to do this.

On 7/25/2023 at 6:05 AM, KwameAndCo said:

As in how to do it?

Wherever really. They just need to specify.

Specifically I would like the code that allows me to do this. Thank you so much!

16 hours ago, AshaG said:

 

Specifically I would like the code that allows me to do this. Thank you so much!

Add to Settings > Developer Tools > Code Injection > Lock Page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('<a class="lock-button" href="https://google.com">Lock Button Text</a>').insertAfter('.password-form');
})
</script>
<style>
 a.lock-button {
    background-color: black;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    position: relative;
    top: 50px;
}
</style>

On 7/27/2023 at 9:55 AM, tuanphan said:

Add to Settings > Developer Tools > Code Injection > Lock Page

Nice! You beat me to it bro!

Though I would suggest a pure javascript solution like this, so there's no need for jQuery:

<script>
document.addEventListener('DOMContentLoaded', function() {
    var lockButton = document.createElement('a');
    lockButton.href = '/';
    lockButton.className = 'lock-button sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element';
    lockButton.textContent = 'Home';
    document.querySelector('.password-form').after(lockButton);
});
</script>
<style>
 a.lock-button {
    background-color: black; 
    color: white;
    padding: .6rem 1.2rem;
    border-radius: .5rem;
    text-decoration: none;
    position: relative;
    margin-top: 2rem;
}
</style>

(I pretty much copied your styling).

Alternatively, @AshaG, if you want the whole background clickable try:

<script>
document.addEventListener('DOMContentLoaded', function() {
    var slideLayer = document.querySelector('.sqs-slide-layer.layer-front.full-width-height');
    if (slideLayer) {
        slideLayer.addEventListener('click', function() {
            window.location.href = '/';
        });
    }
});
</script>

I haven't tested it but it should work.

On 7/27/2023 at 4:55 AM, tuanphan said:

Add to Settings > Developer Tools > Code Injection > Lock Page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('<a class="lock-button" href="https://google.com">Lock Button Text</a>').insertAfter('.password-form');
})
</script>
<style>
 a.lock-button {
    background-color: black;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    position: relative;
    top: 50px;
}
</style>

Thank you so much!

On 7/28/2023 at 11:40 AM, KwameAndCo said:

Nice! You beat me to it bro!

Though I would suggest a pure javascript solution like this, so there's no need for jQuery:

<script>
document.addEventListener('DOMContentLoaded', function() {
    var lockButton = document.createElement('a');
    lockButton.href = '/';
    lockButton.className = 'lock-button sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element';
    lockButton.textContent = 'Home';
    document.querySelector('.password-form').after(lockButton);
});
</script>
<style>
 a.lock-button {
    background-color: black; 
    color: white;
    padding: .6rem 1.2rem;
    border-radius: .5rem;
    text-decoration: none;
    position: relative;
    margin-top: 2rem;
}
</style>

(I pretty much copied your styling).

Alternatively, @AshaG, if you want the whole background clickable try:

<script>
document.addEventListener('DOMContentLoaded', function() {
    var slideLayer = document.querySelector('.sqs-slide-layer.layer-front.full-width-height');
    if (slideLayer) {
        slideLayer.addEventListener('click', function() {
            window.location.href = '/';
        });
    }
});
</script>

I haven't tested it but it should work.

Thank you so much!