Routing, change /product?id=123 to at least product/123

Hi,

I have a Controller like this:

public ActionResult Index(ProductPage currentPage, string id)
{
    if (String.IsNullOrEmpty(id) || !Int32.TryParse(id, out int productId))
    {
        throw new HttpException(404, "Page Not Found.");
    }
    PageViewModel<ProductPage> model = PageViewModel.Create(currentPage);
    model.CurrentPage.Product = model.CurrentPage.GetProduct(productId);
    return View(model);
}

And I'm able to retrieve the page by navigating to it like this - example.com/shop/products/product?id=123

However I can't retrieve the page by navigating to it like this - example.com/shop/products/product/123

I would like to go with this approach - [Modifying content routes] https://world.episerver.com/documentation/developer-guides/CMS/routing/ - and trying to implement it in my Global.asax.cs like this:

protected override void RegisterRoutes(RouteCollection routes)
{
    base.RegisterRoutes(routes);<...>
    RouteTable.Routes.MapContentRoute(
        name: "ProductRoute",
        url: "{node}/{action}/{id}",
        defaults: new { controller = "ProductPage", action = "Index", id = UrlParameter.Optional },
        contentRootResolver: (s) => s.StartPage
    );<...>
}

However it still doesnt work when I try to navigate to product page this way - example.com/shop/products/product/123 (well duuuh)

I have also tried to implement partial routing as explained here - http://joelabrahamsson.com/custom-routing-for-episerver-content/ - but I'm not sure how to use it after "Restoring tree-like URLs" part. By implementing the tutorial above I'm successfully receiving "product" part while debuging "GetPartialVirtualPath".

It would be also nice to limit that routing only for the product pages...

Any pointing out appreciated, cheers!

PS.: It's not kind of ecommerce or something alike, I just named pages like this for demonstrational purpose.