How to fix internal linking for Shopify Markets and Shogun

Shopify Markets is a simple way of launching international versions of a store, and overall it works well for SEO. However while rolling this out across several stores using Shogun as a page builder, we noticed a common issue. Shogun doesn’t automatically add add in the language sub domains to its internal links and instead defaults to the primary store URL.

For example, say you have created a new German language store in the subfolder http://www.yourstore.com/de. This means the internal links will instead point to your primary store domain, http://www.yourstore.com/.

Obviously, this causes a lot of issues for both UX and SEO. As this behaviour is embedded in Shogun, we can’t directly modify it. However, there is a workaround using JavaScript to reintroduce the store’s country in the URL. Here’s how we did it:

1. Modify the theme.liquid code: Insert the following line near the top of the body tag:

<div class="route" style=”display:none;”>{{ routes.root_url }}</div>

This line adds the store location (such as en-gb) to a hidden div on the page, which we’ll access later with JavaScript.

2. Create a custom CSS class in your Shogun component: For instance, you might use ‘shop-path-check’.
3. Develop a new JavaScript function: Add this to a custom.js file included in the header. Execute this function after the page has loaded. Given that Shogun injects content late during page generation, use window.addEventListener('load') to ensure it functions correctly.

window.addEventListener('load', () => {
   
  // Get the root url from the element with the class "route"
  const { textContent: strippedRoute } = document.querySelector('.route');

  // Remove the slash if the root url is empty
  if (strippedRoute === '/') {
    strippedRoute = '';
  }
  
  // Find all links inside the div with the class "shop-path-check"
  document.querySelectorAll('.shop-path-check a').forEach(link => {
    // If the link's href contains "/products"
    if (link.href.includes('/products')) {
      // Replace "/products" with "/en-gb/products"
      link.href = link.href.replace('/products', `${strippedRoute}/products`);
    }
    // If the link's href contains "/collections"
    if (link.href.includes('/collections')) {
      // Replace "/collections" with "/en-gb/collections"
      link.href = link.href.replace('/collections', `${strippedRoute}/collections`);
    }
  });
});