Shopify themes, liquid, logos, and UX
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
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
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 %}
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.
Please let me know how I can adapt the code to change this, thanks!!!
Renée
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 %}
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 %}
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:
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
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:
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! 🔐