How can I create a password protected downloadable content page?

[thesoulhub]

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

[Guleria]

Hello @thesoulhub ,

The most simple and easiest way is use an app locksmith

Thanks

[soulchild37]

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 :

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 :

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 -%}
  

  # 
    {{ page.title | escape }}
  
  
    {% if page.metafields.custom.password == empty or page.metafields.custom.password == pagePassword %}
    {{ page.content }}
    {% else %}
    

      {% if pagePassword %}
      {{ section.settings.wrong_password_prompt_text }}
      {% else %}
      {{ section.settings.password_prompt_text }}
      {%  endif %}
    

    
      
      

      
    

    {% endif %}
  

{% 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”

Click “Add definition” :

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.

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

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)

Hope this helps!

Axel Kee

[bschro14]

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]

Can this be used with the crave theme?

[FarmhouseCustom]

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

[magecomp]

Hello @thesoulhub

Shoplock Shopify App has Passcode feature that can help you to fulfil your requirements easily.