Custom "Enter Password" button for the password page

Store Design

Topic summary

A user testing the Horizon theme needs to add a custom “Enter Password” button for their password-protected store page. The theme’s native button appears as a transparent overlay at the bottom of the screen, which they removed but now lack any way for customers to access early-access sales.

Key Requirements:

  • Create a custom password entry button
  • Preferably styled as a standard rectangular Shopify button for better visibility
  • Must integrate with Horizon theme’s password page functionality

Solutions Offered:

  1. Community member (ranazain2626) provided code to add to password.liquid that creates a fixed-position button triggering the login modal, plus CSS styling for a black rectangular button.

  2. namphan offered personalized assistance through collaborator access and provided alternative code for a Custom Liquid Block using the theme’s native button styling with button-secondary class.

Status: Multiple code solutions provided; implementation outcome not yet confirmed. Screenshots were shared to clarify button placement and messaging features.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone,
We’re testing the Horizon theme, however it lacks a nobrainer function to customise the “access with password” button, that is natively in a transparent overlay at the bottom of the screen on the theme.

We didn’t like it, so we commented out the overlay, however now we don’t have any button, where customers can enter their access code for early-access sales.

Hoping someone in here can help us create a custom button, otherwise we won’t be able to use Horizon at all…

Looking forward to your answers. Have a great weekend!

2

Hi @LucasfromDRAGO,

Please send the website link, I will check it for you

3

Hi Namphan,

Here’s a preview link: https://4jxxxwrhwkdpklxa-77620543833.shopifypreview.com
Let me know if you can’t access the password page.

4

Hi @LucasfromDRAGO,

I checked and can’t access the password page, are you referring to this button?

Screenshot
Screenshot959×530 13.8 KB

5

I think that’s because our main store is live, and we’re currently running a sale so I can’t afford to have it closed here on the final day haha.

But yes that’s exactly the kind of button I’m looking for. On the Horizon theme it just doesn’t exist, so I’m looking for a way to custom code it into the page.

6

Also, I don’t know if it’s possible, but we’d love to make the button a native rectangular button (as in the regular buttons you can have on shopify via. the theme editor) as this kind of button stands out more.

7

Hi @LucasfromDRAGO,

If so, can I send you a collaborator invitation? It will help me check the code details and guide you better.

8

Yes sure. Should I send you the collaborator code here?

1 Like
9

Hi @LucasfromDRAGO,

No, please send it at private message it will be good for you and I will send you invite

10

Can’t seem to find a private message button. Where do I access this feature?

11

Hi @LucasfromDRAGO,

You just click my avatar and find it.

Screenshot
Screenshot1598×826 102 KB

12

image
image1009×607 64.1 KB

Very odd, but I can’t find it. Maybe you can send me a message?

13

Hi @LucasfromDRAGO,

Sure, I sent it, please check your messages :blush:

14

find the password. Liquid file

<!-- Add this inside password.liquid or a section like header.liquid -->
<div class="custom-password-button-wrapper">
  <button onclick="document.getElementById('LoginModal-password').style.display='block';" class="custom-password-btn">
    Enter Access Code
  </button>
</div>

you can add this to your theme.css file
to style your button

.custom-password-button-wrapper {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
}

.custom-password-btn {
  background-color: #000;
  color: #fff;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.custom-password-btn:hover {
  opacity: 1;
}
1 Like
15

Hi @LucasfromDRAGO,

Please add code for Custom liquid Block.

<div class="password-enter__links color-scheme-6ad48c7f-1091-4201-80e4-473618e6fea1" style="background: transparent;">
        <button
          class="button-secondary button-secondary--ANlQzS1hkelNsbDFGd__button_8wWxhz"
          on:click="#password-form/showDialog"
        >
          {{ 'actions.enter_using_password' | t }}
        </button>
      </div>
1 Like