Unable to add ID to the Password Page submit button.

[adcasey79]

We have a test Shopify store within a Shopify Partner account.

As the store is currently classed as "in development", the Shopify password protection feature is automatically switched on, and the toggle to switch it off is disabled.
NOTE: We don't want to publish this store as it's purely for testing purposes.

One of the things I need to test is a GDPR cookie consent tool from CookiePro
Part of the process of setting this tool up, requires that their software scans/crawls the store looking for all of the 3rd party scripts that you have running.
It them produces a report that you use to classify scripts and implement their cookie consent tool.

However, their crawler is failing to complete a crawl as it is hitting this password protection page immediately.
The CookiePro tool does have a feature to get around login pages, whereby we supply their software with the password and the HTML form IDs for the password text field and the submit button.
(i.e. their crawler software must use this information to autocomplete the form and then access the site to perform the crawl.)

The problem I'm having is that the password protection page that is being served up is Shopify's default page.
And the 'Submit' button on this page doesn't have a HTML ID attribute set?

So my plan was to add an ID attribute into the button code (see below id="passwordbtn"): 

{% form 'storefront_password' %}
<div class="form-group">
<input type="password" name="password" class="form-control" id="inputPassword2" placeholder="{{ item.p_t2 }}">
<button type="submit" id= "passwordbtn" class="btn btn-primary">{{ item.p_t3 }}</button>
</div>
{{ form.errors | default_errors }}
{% endform %}

However, when I save this change and check the live page, the code does not show up.
I think this is because I'm adding the code to our Theme's password protection page code template and not Shopify's default password protection page.

So my questions are:

1. Where is the Shopify code that I need to change located?
Or if it's not possible to access or change this code...
2. How can I make Shopify use the Password Protection pages that comes with our theme? (Guessing it's not been mapped properly)

NOTE: Our theme is Wokiee Theme. I'm not a developer but can code a little, so if anyone can give me any pointers that would be a great help.

[Ninthony]

If you're editing in the right spot, the id should show up. I think you're probably adding the id to the email signup form submit button. For instance I just took a look at this on Brooklyn theme. First you'll want to go into password.liquid in your templates folder. Upon opening that page, I found two section renders:

{% layout 'password' %}

{% comment %}
  The contents of the password.liquid templates can be found in /sections
{% endcomment %}

{% section 'password-header' %}
{% section 'password-content' %}

I thought what I needed would be in password-header.liquid in my sections folder because that's where my "Enter Using Password" would be located. However, there was no form in there, just a link. When I clicked the link I noticed that HTML generated above that element, so it must be above the password-header render. So I checked password.liquid in my layouts folder ({% layout 'password' %}). The form was located in there:

    <div id="LoginModal" class="password-page__login-form text-center mfp-hide">
      <p class="h4">{{ 'general.password_page.login_form_heading' | t }}</p>
      {% form 'storefront_password' %}
      {{ form.errors | default_errors }}
      <label for="password" class="hidden-label">{{ 'general.password_page.login_form_password_label' | t }}</label>
      <div class="input-group">
        <input type="password" name="password" id="password" class="input-group-field" placeholder="{{ 'general.password_page.login_form_password_placeholder' | t }}" autofocus>
        <span class="input-group-btn">
          <input type="submit" id="passwordbtn" class="btn password-page__login-form__submit" value="{{ 'general.password_page.login_form_submit' | t }}">
        </span>
      </div>
      {% endform %}
      <p class="admin-login">{{ 'general.password_page.admin_link_html' | t }}</p>
    </div>

I added the passwordbtn id and I see it rendering now on the modal. 

You appear to be editing the right spot since you're inside the correct form:

{% form 'storefront_password' %}

So I'm not entirely sure. Make sure you're editing the published version of your theme, that's the only thing I can think of as to why it may not be rendering.

[adcasey79]

Thanks a lot for your very detailed response.

Sorry if this is a dumb question, but how would I know if I'm "editing the published version of your theme"?

Also, below is the code I see when following your steps...

password.liquid contains the following:

{% layout 'password' %}
{% section 'password-template' %}

I can only click on the link to the password-template section

Below is what is contained in the password-template.liquid file. I've posted everything just incase you can spot something that I don't understand, which may clear things up a little?

{%- assign item = section.settings -%}
{%- assign logo_size = item.logo_max_width | append: 'x' -%}
<div id="tt-pageContent">
  <div class="tt-coming-soon"{% if item.image != blank %} style="background-image: url({{ item.image | img_url: '2048x' }});"{% endif %}>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-8 tt-coming-soon-content">
          
          {% if item.show_logo %}{% if item.image_l != blank %}
          <div class="tt-logo"><img class="tt-retina" src="{{ item.image_l | img_url: logo_size }}" alt="{{ item.image_l.alt }}"></div>
          {% endif %}{% endif %}
          
          {% if item.t1 != '' %}<h1 class="tt-title">{{ item.t1 }}</h1>{% endif %}
          {% if item.t2 != '' %}<div class="description">{{ item.t2 }}</div>{% endif %}
          
          {% if item.show_n %}
          {% if item.n_t1 != '' %}<h2 class="tt-title">{{ item.n_t1 }}</h2>{% endif %}
          {%- if item.use_mailchimp_form -%}
          {% if settings.mailchimp_form_action != "" %}
          <div class="form-inline form-default justify-content-center">
            <form action="{{ settings.mailchimp_form_action }}" method="post" name="mc-embedded-subscribe-form" target="_blank">
              <div class="form-group">
                <input type="email" name="EMAIL" class="form-control" id="inputEmail2" placeholder="{{ item.n_t2 }}">
                <button type="submit" class="btn btn-primary ttbtnmainstyle">{{ item.n_t3 }}</button>
              </div>
            </form>
          </div>
          {% else %}
          <strong class="text-center" style="display: inline-block; margin-bottom: 60px;"><u><a href="{{ shop.url }}/admin/themes">
            Add newsletter redirect link in:<br>
            Customize Theme / General Settings / Newsletter / MailChimp form action URL
            </a></u></strong>
          {% endif %}
          {% else %}
          <div class="form-inline form-default justify-content-center">
            {%- form 'customer' -%}
            {{ form.errors | default_errors }}
            <div class="form-group">
              <input type="hidden" name="contact[tags]" value="newsletter">
              <input type="email"
                     name="contact[email]"
                     class="form-control"
                     value=""
                     placeholder="{{ item.n_t2 }}"
                     autocomplete="off"
                     autocapitalize="off"
                     spellcheck="false" >
              <button type="submit" class="btn" name="commit">{{ item.n_t3 }}</button>
            </div>
          </div>
          {%- endform -%}
          {% endif %}
          {% endif %}

          {% if item.show_p %}
          {% if item.p_t1 != '' %}<h2 class="tt-title">{{ item.p_t1 }}</h2>{% endif %}
          <div class="form-inline form-default justify-content-center">
            {% form 'storefront_password' %}
            <div class="form-group">
              <input type="password" name="password" class="form-control" id="inputPassword2" placeholder="{{ item.p_t2 }}">
              <button type="submit" id= "passwordbtn" class="btn btn-primary">{{ item.p_t3 }}</button>
            </div>
              {{ form.errors | default_errors }}
            {% endform %}
          </div>
          {% endif %}
        </div>
      </div>
    </div>
    <div class="coming-soon-bottom">
      {% if item.f_t1 != '' %}<p>
        {{ item.f_t1 }}
      </p>{% endif %}
      {% if section.blocks.size > 0 %}
      <ul class="tt-social-icon">
        {% for block in section.blocks %}
        {% assign b_i = block.settings %}
        <li>
          <a href="{{ b_i.link }}" target="blank" class="{{ b_i.icon }}"></a>
        </li>
        {% endfor %}
      </ul>
      {% endif %}
    </div>
  </div>
</div>

{% schema %}
  {
    "name": "Settings",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Background Image"
      },
      {
        "type": "header",
        "content": "Logo"
      },
      {
        "type": "checkbox",
        "id": "show_logo",
        "label": "Show logo",
        "default": true
      },
      {
        "type": "image_picker",
        "id": "image_l",
        "label": "Logo image"
      },
      {
        "type": "text",
        "id": "logo_max_width",
        "label": "Logo Main width (in pixels)",
        "default": "175"
      },
      {
        "type": "header",
        "content": "Texts"
      },
      {
        "type": "textarea",
        "id": "t1",
        "label": "Title",
		"default": "WEBSITE IS COMING SOON"
      },
      {
        "type": "textarea",
        "id": "t2",
        "label": "Description",
		"default": "Successful brands get into the mind slowly. A blurb in a magazine. A mention in a newspaper. A comment from a friend. A display in a retail store."
      },
      {
        "type": "header",
        "content": "Newsletter"
      },
      {
        "type": "checkbox",
        "id": "show_n",
        "label": "Show newsletter",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "use_mailchimp_form",
        "label": "Use mailchimp",
        "default": true,
		"info": "Default address - shopify store admin panel in the customers tab"
      },
      {
        "type": "textarea",
        "id": "n_t1",
        "label": "Title",
		"default": "SUBSCRIBE TO OUR NEWSLETTER"
      },
      {
        "type": "textarea",
        "id": "n_t2",
        "label": "Form Text",
		"default": "Enter your e-mail"
      },
      {
        "type": "textarea",
        "id": "n_t3",
        "label": "Button Text",
		"default": "SUBSCRIBE"
      },
      {
        "type": "header",
        "content": "Password"
      },
      {
        "type": "checkbox",
        "id": "show_p",
        "label": "Show password",
        "default": true
      },
      {
        "type": "textarea",
        "id": "p_t1",
        "label": "Title",
		"default": "ENTER THE PASSWORD TO GET ACCESS TO THE SITE"
      },
      {
        "type": "textarea",
        "id": "p_t2",
        "label": "Form Text",
		"default": "Enter Password"
      },
      {
        "type": "textarea",
        "id": "p_t3",
        "label": "Button Text",
		"default": "ENTER"
      },
      {
        "type": "header",
        "content": "Footer"
      },
      {
        "type": "textarea",
        "id": "f_t1",
        "label": "Copyright",
		"default": "&copy; Wokiee 2018. All Rights Reserved"
      }
    ],
    "blocks": [
      {
        "type": "social",
        "name": "Social Button",
        "settings": [
          {
            "type": "paragraph",
            "content": "icon-g-64 (facebook)"
          },
          {
            "type": "paragraph",
            "content": "icon-g-58 (twitter)"
          },
          {
            "type": "paragraph",
            "content": "icon-g-66 (gmail)"
          },
          {
            "type": "paragraph",
            "content": "icon-g-67 (instagram)"
          },
          {
            "type": "paragraph",
            "content": "icon-g-70 (pinterest)"
          },
          {
            "type": "text",
            "id": "icon",
            "label": "Icon code",
            "default": "icon-g-64"
          },
          {
            "type": "url",
            "id": "link",
            "label": "Link",
            "info": "Optional"
          }
        ]
      }
	]
  }
{% endschema %}

[Ninthony]

You can't click on the {% layout 'password' %} -- but that's where your code is probably going to be located. To open the file you just have to navigate to it in the sidebar, it'll be in your layouts folder:

Your published theme will be as pictured below. My published theme is brooklyn in this case, and venture below it is an unpublished theme:

[adcasey79]

Again thanks very much for your feedback. However, I'm don't seem to be able to locate it in here either.
Looks like there is very little in the body tags.

See code below from the {% layout 'password' %} -- file.

<!doctype html>
<!--[if IE 9]> <html class="ie9 no-js" lang="{{ shop.locale }}"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html{% if settings.use_boxed %} id="tt-boxed"{% endif %} class="no-js" lang="{{ shop.locale }}"> <!--<![endif]-->
<head>
  <!-- Basic page needs ================================================== -->
  <meta charset="utf-8">
  <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="theme-color" content="{{ settings.color_base }}">
  <meta name="keywords" content="{{ "general.meta.keywords" | t }}" />
  <meta name="author" content="{{ "general.meta.author" | t }}">
  <link rel="canonical" href="{{ canonical_url }}">
  
  {%- if settings.favicon != blank and settings.use_favicon -%}
  	<link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
  {%- endif -%}

  <title>
    {{ shop.name }} &ndash; {{ 'general.password_page.opening_soon' | t }}
  </title>

  {%- if page_description -%}
  <meta name="description" content="{{ page_description | escape }}">
  {%- endif -%}

  <link href="https://fonts.googleapis.com/css?family={{ settings.font_name1 }}:100,200,300,400,500,600,700,800,900" rel="stylesheet">
  {% if settings.font_name1 != settings.font_name2 and settings.font_name2 != '' %}
  <link href="https://fonts.googleapis.com/css?family={{ settings.font_name2 }}:100,200,300,400,500,600,700,800,900" rel="stylesheet">
  {% endif %}

  {% include 'social-meta-tags' %}

  {{ 'theme.css' | asset_url | stylesheet_tag }}
  {{ 'jquery.min.js' | asset_url | script_tag }}
  
  {{ content_for_header }}
</head>

<body>
  {{ content_for_layout }}
  
  {%- include "modal-subscribe_message" -%}

  <script>
    var wokiee_app = {
      url: '{{ shop.metafields.ollistsapp.appurl }}',
      loader_text: '{{ "wishlist.buttons_text.tooltop_load_text" | t }}',
      main_info: {
        customerid: '{{ customer.id }}',
        iid: '{{ shop.metafields.ollistsapp.iid }}',
        shop: '{{ shop.permanent_domain }}',
      	domain: '{{ shop.domain }}',
      	lic: '{{ settings.license }}',
      }
    };
  </script>
  
  {{ 'jquery.cookie.js' | asset_url | script_tag }}
  {{ 'vendor.min.js' | asset_url | script_tag }}
</body>
</html>

[adcasey79]

No, not sure why this forum is showing a green successful label. I don't think i pressed anything to claim it was fixed?

[Ninthony]

it may be in the modal-subscribe-message.liquid snippet in your Snippets folder. I can't really be sure. If you want, I can request access to your themes and check this out for you further. I'll just need a store url.