How can I create a password protected downloadable content page?

thesoulhub
Tourist
8 0 3

I am looking to create a new page that is downloadable content that should only be accessed by those who have the password. A very simple password (no username or signup) that then allows access to the page of content. 

 

What is the most simple way to do this? 

 

Website: www.thesoulhub.com

Replies 5 (5)

Developer-G
Shopify Partner
3079 604 857

Hello @thesoulhub ,

 

The most simple and easiest way is use an app locksmith

 

Thanks

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

soulchild37
Shopify Partner
164 9 46

Hi store owners of The Soul Hub!

I noticed your store is using the "Refresh" theme by Shopify, which is easy to edit! 

I have written a page template which will show password input box for page that you have set password (more on how to set password on a page later).

Below is a simplified instruction for copy pasting the code. (You can go to my tutorial link here if you want a more thorough step by step guide with screenshots and customization option : https://yagisoftware.com/articles/how-to-password-protect-a-page-on-shopify)


Here's the example demo :
password_demo.gif

You can go to your store theme, select "Edit code", then search for "main-page.liquid" , and replace the existing code with the code below : 

3edit_code.png

7main_page_top.png

Replace the code in the "main-page.liquid" with the code below :

{% capture contentForQueryString %}{{ content_for_header }}{% endcapture %}
  {% assign pageParams = contentForQueryString
    | split: '"pageurl":"'
    | last
    | split: '"'
    | first
    | split: '.myshopify.com'
    | last
    | split: '?'
    | last
    | replace: '\/', '/'
    | replace: '%20', ' '
    | replace: '\u0026', '&'
    | split: '&'
  %}

{% for param in pageParams %}
  {% if param contains 'password=' %}
  {% capture pagePassword %}{{ param | split: '=' | last }}{% endcapture %}
  {% endif %}
{% endfor %}

{{ 'section-main-page.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}
  
<div class="page-width page-width--narrow section-{{ section.id }}-padding">
  <h1 class="main-page-title page-title h0{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
    {{ page.title | escape }}
  </h1>
  <div class="rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
    {% if page.metafields.custom.password == empty or page.metafields.custom.password == pagePassword %}
    {{ page.content }}
    {% else %}
    <p>
      {% if pagePassword %}
      {{ section.settings.wrong_password_prompt_text }}
      {% else %}
      {{ section.settings.password_prompt_text }}
      {%  endif %}
    </p>
    <div class="field">
      <input type="password" id="password-input" class="field__input" placeholder="Password" autofocus autocomplete="off" onkeypress="if(event.keyCode == 13){ window.location.href = '{{ request.path }}?password=' + this.value; }"/>
      <br>
      <button type="button" class="button" onclick="window.location.href = '{{ request.path }}?password=' + this.value;">{{ section.settings.submit_password_text }}</button>
    </div>
    {% endif %}
  </div>
</div>

{% schema %}
{
  "name": "t:sections.main-page.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "id": "password_prompt_text",
      "type": "text",
      "label": "Text to tell visitor to input password",
      "default": "Please input password to view this page"
    },
    {
      "id": "wrong_password_prompt_text",
      "type": "text",
      "label": "Text to tell visitor to input a correct password",
      "default": "Wrong password, please try again"
    },
    {
      "id": "submit_password_text",
      "type": "text",
      "label": "Text for the submit password button",
      "default": "Submit"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ]
}
{% endschema %}

 

Click Save, then go to your Store > Settings, and select "Custom data" on the left sidebar, and click "Pages"

1custom_data.png

 

Click "Add definition" :

 

2page_definition.png



Input "password" as the Name, and ensure the value for "Namespace and key" is "custom.password". Enable storefronts read access, and select "single line text" as the type.

 

3page_type.png

 

 

After saving the metafield definition, then go to your desired page, then scroll down to Metafields section, and click "Show all"

 

4page_metafield.png



Then type the password required to access the page in the "password" definition, visitor will then need to input this password to access your page. (You can repeat this step for other pages you want to password protect)

 

5page_set_password.png


Hope this helps!

Axel Kee



Spent too much support time dealing with order cancellation request from customer? Wouldn't it be good if customer can cancel order on their own without bugging your support? Try out Cancellable app! https://apps.shopify.com/cancellable . I also write articles about store customization that can improve your customer shopping experience here : Yagi Software Blog
bschro14
Shopify Partner
5 0 0

would it be the same code for Shopify's "Dawn" theme if not is there anyway you could display that? if not no worries thank you and have a great day

RHeston
Excursionist
11 0 0

Can this be used with the crave theme?

FarmhouseCustom
Excursionist
15 0 3

I use the theme Studio, is it possible to get step by step instructions on how to do this on my current theme?