Relative Internal Links on Translated Page

Technical Q&A
1

I have create multiple pages with links to other pages using the a-tag as shown below. Works perfectly.

Contact us.

Now, when a user browses to a page with this link on it when using a localized page, aka domain.com/nl/ for example, and the user clicks the link he/she will be directed to domain.com/pages/contact-us. Something you don’t want because the user is redirected to a different language.

So, you’d say I’d just add the /nl/ in the translated page, like shown below, but that creates a whole new issue.

Contact us.

I have two domains domain.com and domain.nl, domain.com is english by default and has a dutch translation hence the /nl/, domain.nl is dutch by default and has an english translation which creates a /en/ subfolder. You might already see where this is going.

The translations in Shopify are shared so dutch pages when using the domain.nl would redirect to ‘/nl/pages/contact-us’ but the entire /nl/ subfolder does not exist there because the domain already implies it’s dutch. Same thing happens the other way around, it’s basically a mess.

Who has a solution? Any pointers or ideas?

2

No one?

3

Let’s bump this up, again. I don’t have a solution yet but I’d suggest that Shopify implements something that will make relative links include the localization path that the user is on when clicked.

4

exactly

5

Hey, we have the same situation and I just simply solved it like this:

{% if localization.language.iso_code == 'en' %}
        
          NL
        
      {% else %}
        
          EN 
        
      {% endif %}