How can I apply CSS based on a customer tag?

Store Design

Topic summary

Problem: A user needs to conditionally display a product description element based on whether a customer has a “wholesale” tag.

Initial Approach: Attempted to use Liquid conditionals within CSS in the product template file, but the element always displays regardless of customer tags.

Root Cause: CSS is pre-compiled in Shopify, so Liquid conditionals cannot dynamically check customer tags at runtime.

Solution: Implemented jQuery to toggle CSS classes based on the Liquid conditional check:

  • Used Liquid {% if customer.tags contains "wholesale" %} to wrap JavaScript code
  • jQuery removes a “hide” class and adds a “show” class to display the element
  • Defined .pdf-factsheet-hide (display: none) and .pdf-factsheet-show (display: block) in CSS

Follow-up Question: Another user asks about applying this solution site-wide for a conditional header banner—specifically which template file to use and whether CSS needs to be inline in the header alongside the jQuery code.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I’m attempting to show an element in the product description based on a customer tag, but I’m not having any luck.

In my product template file:

{% stylesheet %}

  #pdf-factsheet {
    display: none;
  }

  {% if customer.tags contains "wholesale" %} 
  #pdf-factsheet {
    display: block;
    max-width: 120px;
  }

  .pdf-elements {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  {% endif %}

{% endstylesheet %}

Unfortunately the element always displays. Any ideas how I could do this?

2

Hi. @ChristyMc :

You can try adding that Styles to your product page instead of your main CSS file.

3

Thanks for your quick reply, I’m already doing that. I suppose liquid can’t check at runtime as the CSS is pre-compiled. May have to add with JS.

4

Ended up using jQuery to do this.

{% if customer.tags contains "wholesale" %}
  <script>
    $('#pdf-factsheet').removeClass('pdf-factsheet-hide');
    $('#pdf-factsheet').addClass('pdf-factsheet-show');
  </script>
{% endif %}  

  .pdf-factsheet-hide {
    display: none;
  }

  .pdf-factsheet-show {
    display: block !important;
    max-width: 120px;
  }
5

This is great. Thanks!
If I wanted this for every page, which file would be best? I’m using this to create a conditional banner in the header. I placed the jquery in the header file but the conditional CSS isn’t applying based on being logged in with different tags.

Does the CSS also need to be inline in the header? I have it in an existing style sheet right now.

Or is there a better template file to place the jquery in?