Solved

Customise password page

baileyymans
Shopify Partner
10 0 2

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.Screenshot 2024-04-30 at 20.50.58.png

 

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

Accepted Solution (1)

BSS-TechFusion
Shopify Expert
149 26 15

This is an accepted solution.

Hi @baileyymans,

 

You can definitely customize it as described in your instructions.

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

view (18).png

 

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

view (19).png

 

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

view (20).png

 

For change background image:

view (21).png

 

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.

 

view (22).png

 

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

+ Code to be replaced:

view (23).png

 

-> 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:

view (24).png

 

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

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 2 (2)

sahilsharma9515
Shopify Partner
994 124 189

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.

sahilsharma9515_1-1714541158041.png

 

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

sahilsharma9515_2-1714541248177.png

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

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


BSS-TechFusion
Shopify Expert
149 26 15

This is an accepted solution.

Hi @baileyymans,

 

You can definitely customize it as described in your instructions.

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

view (18).png

 

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

view (19).png

 

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

view (20).png

 

For change background image:

view (21).png

 

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.

 

view (22).png

 

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

+ Code to be replaced:

view (23).png

 

-> 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:

view (24).png

 

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

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development