Shopify locale aware URLs

If you are using the Shopify Markets functionality to make your store available to multiple currencies or languages. You are likely using locale aware URLs, which add something like this to your URLs:-

yourdomain.com/ <- Without locale
yourdomain.com/en-gb/ <- With locale

When using these you need to ensure that you avoid hardcoded URLs within your theme, to avoid accidentally bouncing a customer to the wrong locale, where they might get the wrong language or currency.

In Theme Code

When having your developer check through your theme to remove hardcoded URLs to things like the cart or account pages then the Routes object is their friend. Allowing them to change them like this:-

<a href="/cart">Cart</a> <- Bad
<a href="{{ routes.cart_url }}">Cart</a> <- Good: /en-gb/cart 

On pages like collections where you have links to product pages, you are likely using the product object to create the URL, which will retain the current locale. Similarly with other instances where you are using the .url property of an object. So no changes needed there.

{{ product.url }} Outputs: /en-gb/products/your-product

However in your theme you might have a hardcoded URL to a page like a shipping information page, which you will need to change like this:-

<a href="/pages/shipping-info"> <- Before
<a href="{{ pages['shipping-info'].url }}"> <- After

Using the pages object with the handle of the page will create the URL and add the locale to it for you. You can also use this method via the collections and products objects, if you have hardcoded URLs to those as well.

In Language Files

When you have a hardcoded URL in a language file (eg locales/en.default.json ) entry such as the cart.general.continue_browsing_html one which typically looks like, with it’s output tag:-

"continue_browsing_html": "Continue browsing <a href=\"/collections/all\">here<\/a>."
To output:-
{{ 'cart.general.continue_browsing_html' | t }}

We will have to pass in our URL rather than using routes.all_products_collection_url so we can change the language file entry and output tag to:-

"continue_browsing_html": "Continue browsing <a href=\"{{ url }}\">here<\/a>."