Customise password page

[baileyymans]

I have a Dawn theme 13.0.1 site that is password protected.

I would like to have the site password protected for a few days after my company launches as a way of creating an "early access" period. Where only a select few people are allowed to browse when they have access to our early access code.

The current password page is viewed as attached.

I would like to change it so that:

- Store logo appears in top left

- Custom background image
- Opening soon changed to "Early access"

- Be the first to know when we launch changed to "Enter the secret code to enter our early access"

- Email box changed to password box

Is this possible?

If you'd like to look at the code, current password is calleo

[sahilsharma9515]

Hi @baileyymans Yes it's possible to edit the design of Password page.

Please follow the steps and you will be able to design it.

• Login in shopify admin.
• Click on the Online Store.
• Then click on the Customize button in live Theme.
• In Top section click on home page and scroll down.

• You will find the Password page, Click on that and from left section you will update the page according to your needs.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[BSSCommerce-B2B · Accepted solution]

Hi @baileyymans,

You can definitely customize it as described in your instructions.

First, navigate to Theme => Customize => Select the "Password" page.

Next, click on the Background, the Title, the Header, the Subtitle, etc., to make changes.

 

add the logo in the top-left corner, click on the "Password Header" and open "Theme Settings," then change the logo image:

For change background image:

Now, how can you replace the email box with a password box?

First, save the current changes.

Second, open the code editor by clicking on the left bar.

Third, find the file "email-signup-banner.liquid," open it, and replace the code of the file as follows:

+ Code to be replaced:

-> this code will be replace by: 

{%- form 'storefront_password', class: 'password-form' -%}
              <div class="password-field field{% if form.errors %} password-field--error{% endif %}">
                <input
                  type="password"
                  name="password"
                  id="Password"
                  class="field__input"
                  autocomplete="current-password"
                  {% if form.errors %}
                    aria-invalid="true"
                    aria-describedby="PasswordLoginForm-password-error"
                  {%- endif -%}
                  placeholder="{{ 'general.password_page.login_form_password_placeholder' | t }}"
                >
                <label class="field__label" for="{{ 'general.password_page.login_form_password_label' | t }}">
                  {{- 'general.password_page.login_form_password_placeholder' | t -}}
                </label>
                {%- if form.errors -%}
                  <div id="PasswordLoginForm-password-error" role="status">
                    <span class="visually-hidden">{{ 'accessibility.error' | t }}</span>
                    <span class="form__message">
                      {%- render 'icon-error' %}
                      {{ 'general.password_page.login_form_error' | t -}}
                    </span>
                  </div>
                {%- endif -%}
              </div>
              <button name="commit" class="password-button button button--outline">
                {{ 'general.password_page.login_form_submit' | t }}
              </button>
            {%- endform -%}

Now, save and return to the password page to double-check.

The result may look like this:

I hope these instructions will help you. If they are helpful, don't forget to like and mark the solution.