All things Shopify and commerce
I want to password protect just one page on my Shopify store so that I can have my wholesale pricing listed for those customers
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.
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:
In your Shopify admin, go to "Online Store" and then select "Pages".
Create a new page or select an existing page that you want to password-protect for wholesale customers.
Edit the content of the page to include your wholesale pricing and any other relevant information.
Scroll down to the "Visibility" section on the right-hand side of the page editor.
Select "Password protected" from the drop-down menu.
Set a password for the page. Choose a password that you will share with your wholesale customers.
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.
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).
Hey guys,
I saw this very simple explanation and was very excitd to not have to change codes or download an app, however there is no portion on my store under "visibility" with a drop down menu that says "Password Protected". There is only "visible" and "hidden" as options. Can you help advise or maybe i can hire you to take a look at my site? I just need to protect 1 page in my menu with a password. attached is a photo of my options. thanks!
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 :
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 -%} <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"
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
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!
Hi! I am running into the same challenge for the page I need to password protect. Did you end up finding a solution here?
Hi! Thank you for putting this up here. I followed your instructions, but when I type in the password I created it says that it is wrong. I'm not sure what else I am doing incorrectly. I want to avoid paying for extra apps if I can and hope to edit my code to give me a wholesale portal that is password protected from the public.
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
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024