How can I get anchor links to work correctly with localization?

Technical Q&A

Topic summary

Issue: Anchor links in navigation break with localized URLs. Instead of appending the anchor to the product path, the link becomes /en-ca#anchor-link, losing the /products/product-handle path.

Desired behavior: /products/product-handle#anchor-id should work whether or not a locale prefix (e.g., /en-ca/) is present.

Constraints: Hardcoding product URLs/handles isn’t viable as it disrupts localization behavior.

Update: Not supported out-of-the-box. A workaround requires theme (Liquid) logic to adjust link URLs when a locale prefix exists.

Workaround details: Detect request.locale.root_url; remove the locale from link.url; split the URL on “#”; handle pure anchor links (“#anchorID”) where the split yields an empty first item; reconstruct the link_url by prepending “#” to the last segment.

Outcome: No built-in fix via navigation menus; custom theme code is needed. The discussion remains open without an official resolution.

Notes: The provided code snippet is central. Terms: “anchor link” is a URL fragment (e.g., #section), and “localization” adds a language/region prefix (e.g., /en-ca/).

Summarized with AI on January 24. AI used: gpt-5.
1

I’m trying to link to an anchor on a page from a navigation menu for a site using localization (/en-ca/). Without localization this isn’t an issue, I simply add “#anchor-id” as the navigation menu link. Presuming the user is visiting https://domain.com/products/product-handle, this ends up rendering as https://domain.com/products/product-handle#anchor-id, which is the desired behaviour.

The problem is when the user is directed to the localized site, https://domain.com/en-ca/products/product-handle, this ends up rendering the link as https://domain.com/en-ca#anchor-link.

Anyone know how to get page anchor links to work correctly with localization via the online store navigation menus? Hardcoding the product url/handle isn’t an option, and either way breaks the localization behaviour in general.

2

For the record, I don’t believe this is possible out of the box. That said, you can do some logic in your theme files if you’re so inclined:

{% for link in your_linklist.links %}
{% liquid
  
  assign link_url = link.url

  # check if there is any localization, if not, move on          
  unless request.locale.root_url == '/'
      
    # remove any localization from link.url, then split into an array based on the hash character
    assign link_url_array = link.url | remove: request.locale.root_url | split: '#'
   
    # for some reason, if you split a simple hash/anchor link ("#anchorID") it ends up with two array items, although the first one will be blank. check if that's the case, if so, then we're dealing with a straight hash/anchor link
    if link_url_array.first == ''

      # grab the last item of the array and rebuild it
      assign link_url = link_url_array | last | prepend: '#'

    endif
  endunless               
%}

{{ link.title }}

{% endfor %}