Display table only to customers with certain tags in shopify

Question

Trying to set up visibility of certain elements to customers with certain tags only. There are a few tables, originally hidden by display none in main stylesheet. I've created a few separate style sheets to call if tag conditions are met. Yet no luck.

Here is condition code

{% if customer.tags contains 'Trade' %}  
{{ table1.css' | asset_url | stylesheet_tag }}
{% endif %}

and table1.css (i've put it on top of all other stylesheets)

.hiddentable1 {
 display:block !important;
}

Answer 1

There's a couple of ways you could approach this:

1. Add a CSS class to the table to show/hide it depending on whether or not the customer tag exists.

   {% assign table1-class = 'table1-hide' %}
   {% if customer.tags contains 'Trade' %}  
       {% assign table1-class = 'table1-show' %}
   {% endif %} 
   
   <table class="{{ table1-class }}"> ...
   

2. Only include the table if the customer tag exists.

   {% if customer.tags contains 'Trade' %}  
       {% include 'table1-snippet' %}
   {% endif %}