Hiding country specific navigation URLs using Shopify Markets and qikify Smart Menu

Internationalisation is an incredibly important part of SEO, and Shopify Markets is one of the quickest ways to implement it effectively. That said, it is not without its limitations.

Here is a recent example that had us scratching our heads. A client has several international stores, but not all products and categories are available in each country. 

The problem arose when a specific product is available in the UK and EU but not in the US. This site uses the qikify Smart Menu to build the main navigation, and the product was displayed in the menu on the US store, leading to a 404 error if customers clicked on it. 

Unfortunately, the app doesn’t provide a way to specify menus for specific stores. So, what can be done?

Initially, using CSS to hide the item seemed like a solution, but it wasn’t possible to target the specific menu item as the app didn’t allow assigning custom classes or IDs. 

As a result, JavaScript was employed to target the menu, find the link associated with the product, and hide it by removing it from the DOM. However, it became more complex as the menu item didn’t exist in the DOM until the user hovered over the menu. 

To address these challenges, the following solution was implemented:

First, information about the store needed to be obtained and used in JavaScript. To achieve this, a <div class=”route”>{{ routes.root_url }}</div> element was added to the theme.liquid file at the top of the body tag. The CSS was modified to set the route class to display:none; to hide it from view.

The purpose of the added div element was to store the country of the store. For example, if browsing the default store (US), the content would be /, and if switching to the UK store, it would show /en-gb.

Next, a JavaScript file was created, and the initial script was added to make it work: