How To Hide a Menu Link Depending on a Customer Group

Emilian F. Published on 12 September, 2020

I want to share with you a simple way to hide a menu link in Cornerstone depending on the customer group. This is useful when you have a retail customer and you don't want them to see wholesale related web pages in the top menu, or vice versa.

In my example, I am going to hide the "Wholesale" link for retail customers. I already have the page setup, and also the customer groups: Retail for the retail customers, and Wholesale for the wholesale customers.

The first thing to do is to create a script using the Storefont > Script Manager page. Select the following values:

  • Name of script: you can put anything here, I put "MenuScript"
  • Location: very important that you select Footer
  • Script category: Essential
  • Script Type: Script
  • Script contents: see script below

Copy and paste the script below in the script contents textarea making sure to replace the "Retail" group name and the "wholesale" keyword to match your situation.

{{#if customer.customer_group_name '===' "Retail"}}
  var linkMatch = document.querySelectorAll('a.navPages-action[href*="wholesale"]');
  if (linkMatch && linkMatch.length > 0) {
    linkMatch[0].style.display = "none";

Save your changes, and the menu item should be hidden once you refresh the frontend.

I only tested this code on Cornerstone 4.x so you might need to change the code above to suit your specific template.

Emilian F. Published on 12 September, 2020