How to password protect a single page for wholesale pricing?

quirkypirate
Visitor
1 0 0

I want to password protect just one page on my Shopify store so that I can have my wholesale pricing listed for those customers 

Replies 7 (7)

Akibhusen
Shopify Partner
715 121 148

Yes, this is possible. 

 

it requires some custom development to achieve.

 

if you have knowledge of liquid and js then you can achieve it easily.

PageFly-Oliver
Shopify Partner
878 190 171

Hi @Quirkypirate

 

To password protect a specific page on your Shopify store and restrict access to wholesale pricing for specific customers, you can follow these steps:

  1. In your Shopify admin, go to "Online Store" and then select "Pages".

  2. Create a new page or select an existing page that you want to password-protect for wholesale customers.

  3. Edit the content of the page to include your wholesale pricing and any other relevant information.

  4. Scroll down to the "Visibility" section on the right-hand side of the page editor.

  5. Select "Password protected" from the drop-down menu.

  6. Set a password for the page. Choose a password that you will share with your wholesale customers.

  7. Click "Save" to save the changes to the page.

By password protecting the page, only customers who have the password will be able to access its content and view the wholesale pricing.



 

Hope my solution works perfectly for you.

Cheers!

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

l_thomas
Visitor
1 0 1

Is this only available for certain Shopify plans? Under "Visibility" I have just two options, a toggle between "Visible" and "Hidden" (or the option to set visibility by date). 

soulchild37
Shopify Partner
166 9 46

Hi Quirkypirate,

I have written custom code for one of the stores I manage, for password protecting certain page (no apps required), you just need to make changes to one file in the theme (assuming you are using modern Online Store 2.0 theme), and utilize metafields for storing the password for a particular page. 


Below is a simplified instruction for copy pasting the code and how to use the metafield for storing password . (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 :

soulchild37_0-1692816115838.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 : 

soulchild37_1-1692816115697.png

 



soulchild37_2-1692816115766.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"

soulchild37_3-1692816115841.png

 

 

Click "Add definition" :

 

soulchild37_4-1692816115781.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.

 

soulchild37_5-1692816115702.png

 

 

 

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

 

soulchild37_6-1692816115712.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)

 

soulchild37_7-1692816115699.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
PVG
Tourist
6 0 0

Hi  Axel,

 

Thank you for your help above!

 

I have tried your solution and I can see it has worked. However, on my page, as I see the password protection I also see the rest of the page too. How can I make the page visible only when customers have put the password through? Basically, I want the same as you have shown on your example. Please see a screenshot of what I see.

 

Many thanks in advance! Screenshot 2023-12-11 at 19.22.49.png

oliveave_polish
Visitor
1 0 0

Hi! I am running into the same challenge for the page I need to password protect. Did you end up finding a solution here?

WholesaleHelpe
Excursionist
17 0 7

Hello @quirkypirate 

With the help of Wholesale Lock Manager app, or look one up of your choice on Shopify App Store, you can hide specific products/ collections from certain customers and only give access to the restricted content using Passcodes, Customer-tags, or Login-credentials to the customers of your choice.

Furthermore, use this link to get information regarding the app and its features.

 

I am a customer success specialist at Wholesale Helper. Happy to walk you through too if you’d like a personalized demo. 

 

I hope this helps 🙂

Ahmed Talha

Wholesale Helper
Wholesale Helper Support Team