How to lock your Shopify Store to unlogged customers

For B2B and wholesale merchants on Shopify, an open storefront might not always be the best fit. You can use conditional code to hide content to customers that are not logged in
Froonze
January 11, 2024

An open storefront might not always be the best fit for B2B and wholesale merchants on Shopify. Locking the site can offer key advantages to businesses who need more control over the content or require a more targeted approach to managing bulk orders and complex negotiations with customers.

Locking content isn't just about access restriction. It's about creating a more targeted, valuable, and secure experience for specific segments of your audience. For example merchants with different pricing plans or a B2B pricing structure can make sure that only verified wholesale accounts have access to exclusive deals. Stores dealing with age-restricted products, intellectual property or confidential data can also protect the material this way.  Along with manual account approval, a content lock can also be used to create more exclusive and personalized experience for registered customers.

To lock your Shopify store and hide the content to unlogged customers, you can use a code solution that consists on wrapping the main content into a liquid conditional. Read our quick guide in steps to learn how to lock your Shopify Store to unlogged customers.

How to lock Shopify Store to unlogged customers

To lock the content to unlogged customers, you can wrap the whole layout inside a Shopify condition that reads the customer's login status: {%- if customer -%} ... {%-endif -%}. Shopify will then only render the content inside the conditional if the customer has previously logged into the site.

The code solution below assumes that you'd like to restrict all of the main content of the site, leaving the header and the footer, and replace it with a simple request to log in to view it.

  • Go to your Shopify admin and navigate to Online Store > Themes. Find the theme you want to edit and click on the Three points icon > Edit code.
  • Search for the main layout theme.liquid and open it.
  • Locate the layout content that is usually placed between the main tags: {{ content_for_layout }}
  • Replace it with the code below and Save.
  • Test it on site. All content between header and footer should be now restricted when the customer is not logged in. The log-in and registration pages can still be accessed.

{%- if customer or canonical_url contains '/account' -%} {{ content_for_layout }} {%- else -%} <div class="page-width" style="text-align:center"> <h1>CONTENT BLOCKED</h1> <div class="rte"> <p>Please login or create an account to see this content.</p> <br> <div class="login__button"> <a class="button" href="/account/login" style="color: white;">Log in</a> </div> </div> </div> {%- endif -%}

Froonze Lock Content Shopify Unlogged

Only allow access to customers with certain tags

You can use additional customer tag conditionals to only allow logged-in customers with specific tags to access the content. You can add the conditional in the first line this way, replacing mytag for the correct tag name:

{%- if customer and customer.tags contains 'mytag' -%} {{ content_for_layout }} {%- else -%} <div class="page-width" style="text-align:center"> <h1>CONTENT BLOCKED</h1> <div class="rte"> <p>Please login or create an account to see this content.</p> <br> <div class="login__button"> <a class="button" href="/account/login" style="color: white;">Log in</a> </div> </div> </div> {%- endif -%}

Specific page locking: hide certain pages only

Furthermore you can use other conditionals to limit the application of the lock to certain pages or types of pages. For example you can use template conditionals {% if/unless template ... %} and page conditionals {% if/unless canonical_url ... %} in addition to the conditional we mentioned above or wrapping the 'else' block of code.

{%- if customer or canonical_url contains '/account' -%} {{ content_for_layout }} {%- else -%} {%- if template contains 'product' -%} <div class="page-width" style="text-align:center"> <h1>CONTENT BLOCKED</h1> <div class="rte"> <p>Please login or create an account to see this content.</p> <br> <div class="login__button"> <a class="button" href="/account/login" style="color: white;">Log in</a> </div> </div> </div> {%- else -%} {{ content_for_layout }} {%- endif -%} {%- endif -%}

Restrict registration along how to lock Shopify store

Locking content and having more strict policies to create accounts are two features that go hand-in-hand. They are often used together to make sure that only authorized customers can create accounts and access restricted content. Shopify does not offer registration restriction natively, but some apps like Locksmith or our Custom Forms plugin do.

With our plugin you can:

  • In the Basic Plan you can use Email Verification. Submission of registration form creates an inactive customer account that needs to be verified by email
  • In the Advanced Plan you can use Account Approval. Each submission will result in an application that you as an admin will need to approve or reject before the account can be created

Besides you can replace the registration form to require additional information during registration. Get to know more about this valuable plugin. Build custom registration and profile forms to collect any information you need from your customers: ☑️ Custom Forms

Froonze Customer Accounts Concierge
Get the app today
Turn the account page into a beautiful portal with
Froonze Customer Accounts Concierge
  • 190+