We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

How to add enter password to my password page

How to add enter password to my password page

DD2024
Tourist
18 0 2

When i was making my password page i removed the option of entering a password to enter the site and now I want to add it back but i cant remember how i did it. Help please! website is moralinstinct.com

 

Here is my current password page:

Screen Shot 2024-12-23 at 2.51.42 pm.png

Replies 2 (2)

Shipo-studio
Shopify Partner
57 12 20

Edit code -> search file "main-password-header.liquid" and replace all code with the code i have provided

<style type="text/css">
  .password-logo {
    max-width: {{ settings.logo_width }}px;
  }
</style>

<div class="color-{{ section.settings.color_scheme }} gradient">
  <div class="password-header">
    {%- if settings.logo != blank -%}
      {%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}
      {%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
      {{
        settings.logo
        | image_url: width: 500
        | image_tag:
          class: 'password-logo',
          widths: '50, 100, 150, 200, 250, 300, 400, 500',
          width: settings.logo_width,
          height: logo_height,
          alt: logo_alt
      }}
    {%- else -%}
      <h1 class="h2">{{ shop.name }}</h1>
    {%- endif -%}

    {%- if shop.password_message != blank -%}
      <div class="password-content">
        {{ shop.password_message }}
      </div>
    {%- endif -%}

    <password-modal>
      <details class="password-modal modal">
        <summary class="modal__toggle" aria-haspopup="dialog">
          <div class="modal__toggle-open password-link link underlined-link">
            <span class="svg-wrapper">
              {{- 'icon-padlock.svg' | inline_asset_content -}}
            </span>
            {{ 'general.password_page.login_password_button' | t }}
          </div>
          <div class="modal__toggle-close" aria-hidden="true">
            <span class="svg-wrapper">
              {{- 'icon-close.svg' | inline_asset_content -}}
            </span>
          </div>
        </summary>
        <div
          class="modal__content"
          role="dialog"
          aria-labelledby="DialogHeading"
          aria-modal="true"
        >
          <div class="password-modal__content" tabindex="-1">
            <button type="button" class="modal__close-button link" aria-label="{{ 'accessibility.close' | t }}">
              <span class="svg-wrapper">
                {{- 'icon-close.svg' | inline_asset_content -}}
              </span>
            </button>
            <h2 class="password-modal__content-heading" id="DialogHeading">
              {{ 'general.password_page.login_form_heading' | t }}
            </h2>
            {%- 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">
                      <span class="svg-wrapper">
                        {{- 'icon-error' | inline_asset_content -}}
                      </span>
                      {{ '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 -%}
            <small class="password__footer-text">{{ 'general.password_page.admin_link_html' | t }}</small>
          </div>
        </div>
      </details>
    </password-modal>
  </div>
</div>
{% assign scheme1 = settings.color_schemes | first %}
{%- if section.settings.color_scheme == scheme1 -%}<hr>{%- endif -%}

{% schema %}
{
  "name": "t:sections.main-password-header.name",
  "settings": [
    {
      "type": "header",
      "content": "t:sections.main-password-header.settings.logo_header.content"
    },
    {
      "type": "paragraph",
      "content": "t:sections.main-password-header.settings.logo_help.content"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-1"
    }
  ]
}
{% endschema %}
DD2024
Tourist
18 0 2

Hi thanks for your reply but it seems that the code you provided is the exact same as whats already there, is there something else i can add? thankyou