We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

How to hide page content except for customers with VIP tag.

How to hide page content except for customers with VIP tag.

RenéeLeighann
Shopify Partner
39 0 10

Hello!

 

I'm trying to create a page that only customers with a VIP tag can access. I have used the following code on the main.page.liquid for this Dawn theme:

 

{% assign vip = false %}
{% if customer.tags contains 'vip' %}
{% assign vip = true %}
{% endif %}

{% if page.handle == 'wholesale-price-list' %}
{% if vip %}
<div class="rte">
{{ page.content }}
</div>
{% else %}
Sorry you must be logged into your Trade Account to view this page.
{% else %}
{% endif %}
<div class="page-content">
{{ page.content }}
</div>
{% endif %}

 

Unfortunately the page content is still showing - I need either the page content to show, or the "Sorry..." message, depending on whether the customer has a VIP tag or not.  

 

The page can be viewed here: https://anchorrugcompany.ca/pages/wholesale-price-list

 

Please help!!

 

Thanks,

 

Renée

Replies 6 (6)

Niraj_singh
Shopify Partner
232 39 47

Hello @RenéeLeighann 

I have corrected your code for show Page content or Sorry message based on Customer Tag.
please replace your code with below code snippet 

{% assign vip = false %}

{% assign customerTags = customer.tags | join:',' %}

{% if customerTags contains 'vip' or customerTags contains 'VIP' %}

{% assign vip = true %}
{% endif %}

{% if page.handle == 'wholesale-price-list' %}

{% if vip %}
<div class="rte">
{{ page.content }}
</div>
{% else %}
Sorry you must be logged into your Trade Account to view this page.
{% endif %}

{% else %}

<div class="rte">
{{ page.content }}
</div>

{% endif %}

banned
RenéeLeighann
Shopify Partner
39 0 10

Thanks so much for this @Niraj_singh !

 

I added this code but when I go to that page and I'm not logged in to a customer account with the VIP tag, I can still see the page content. Here is a screenshot of what I see when I'm not logged in and go to the page.  The "Coming soon" text and box shouldn't be visible unless I'm logged in as a customer with the VIP tag. 

 

Screen Shot 2022-06-30 at 9.17.40 AM.png

 

Please let me know how I can adapt the code to change this, thanks!!!

 

Renée

adnan11
Tourist
6 0 3

Hi @RenéeLeighann @Niraj_singh 

The code seems to work for me 

{% assign vip = false %}

{% assign customerTags = customer.tags | join:',' %}

{% if customerTags contains 'TEST' or customerTags contains 'TEST1' %}

{% assign vip = true %}
{% endif %}

{% if page.handle == 'wholsale-page-main' %}

{% if vip %}
<div class="rte">
{{ page.content }}
</div>
{% else %}
Sorry you must be logged into your Trade Account to view this page.
{% endif %}

{% else %}

<div class="rte">
{{ page.content }}
</div>

{% endif %}

 

 

adnan11
Tourist
6 0 3

EDIT / UPDAT

Hi @RenéeLeighann @Niraj_singh 

 

 

 

I am getting into some problems right now with this code,  For my theme the main content is in theme.liquid and the content such as sections added are still visible even after adding the above code to the main.page.liquid.
So I added the code to my theme,liquid file and changed the main-content code to (placement of code will depend on your theme. I am using Ella Theme)

{% assign vip = false %}

{% assign customerTags = customer.tags | join:',' %}

{% if customerTags contains 'TEST' or customerTags contains 'TEST1' %}

{% assign vip = true %}
{% endif %}

{% if page.handle == "wholsale-page-main" %}

{% if vip %}
<main class="main-content" role="main">
{{ content_for_layout }}
</main>
{% else %}
Sorry you must be a Wholesale Member to access this page.
{% endif %}
{% else %}
<main class="main-content" role="main">
{{ content_for_layout }}
</main>
{% endif %}

 

RenéeLeighann
Shopify Partner
39 0 10

Hello everyone,

 

I decided to pursue a different route, as this code didn't work for me. Instead I used a password protected page, and used the name of the page to identify it. 

 

I called the code: Wholesale Price List, and here is the code, pasted on the third line of theme.liquid:

 

<html lang="{{ shop.locale }}">
 
  {% if template contains "wholesale" %}
  <!-- Subscription Content -->
  {% unless customer %}
   {% assign send_to_login = true %}
  {% endunless %} 
  {% endif %}
  
  {% if send_to_login and request.path != "/challenge" %}
  <!-- Need to login -->
  <meta content="0; url=/account/login?checkout_url={{ request.path }}" http-equiv="refresh" />
  {% else %}
 
 
<head> </head>
 
<body> </body>
  
  {% endif %} 

 

You can name your page anything,  just put it in the code where it says: 

 

{% if page.handle == 'wholesale-price-list' %}

 

Hope this works for you all! Shopify makes it much too hard to create a password protected page without using a paid app. 

 

Renée

mt686
Shopify Partner
146 12 21

Hey Renée!

I see the issue with your code - there's a syntax error in your conditional logic that's causing the page content to always show. Here's the corrected version:

Fixed Code:

{% assign vip = false %}
{% if customer and customer.tags contains 'vip' %}
  {% assign vip = true %}
{% endif %}

{% if page.handle == 'wholesale-price-list' %}
  {% if vip %}
    <div class="rte">
      {{ page.content }}
    </div>
  {% else %}
    <div class="access-denied">
      <h2>Access Restricted</h2>
      <p>Sorry, you must be logged into your Trade Account to view this page.</p>
      <a href="/account/login" class="button">Login Here</a>
    </div>
  {% endif %}
{% else %}
  <div class="page-content">
    {{ page.content }}
  </div>
{% endif %}

Key fixes:

  1. Added customer and check to prevent errors when no one is logged in
  2. Fixed the {% else %} placement - you had an extra one that was breaking the logic
  3. Added a login link for better UX

Alternative Simple Version:

{% if page.handle == 'wholesale-price-list' %}
  {% if customer and customer.tags contains 'vip' %}
    {{ page.content }}
  {% else %}
    <p>Please log into your Trade Account to access wholesale pricing.</p>
  {% endif %}
{% else %}
  {{ page.content }}
{% endif %}

App Alternative: I actually developed Latch specifically for this type of VIP page protection - it handles all the logic automatically and can even upsell VIP memberships to non-qualified visitors. Check it out: https://apps.shopify.com/member-lock

The corrected code above should fix your wholesale page access issue right away!

Hope this helps! 🔐