How to change product title, breadcrumb and URL on variation selection

Q: Where do we change the product title, breadcrumb and URL when the user selects a different variation?

You should go to Product > open Variations > open Variation blade and use SEO widget inside to set product title, description and URL.

After this step, the variation will be accessible by URL and you should see variation meta-information.

Current Demo Themes don’t change URL or meta-information on the fly. It should be implemented by a custom javascript.

This can now be done in Chrome, Safari, Firefox 4+, Edge and Internet Explorer 11+.


function updateSeoDetails(pageTitle, urlPath){
     document.title = pageTitle;
     window.history.pushState({"pageTitle":pageTitle},"", urlPath);

And call the code when you change selected variation.