Hi,
I’m currently working on a Shopify eCommerce site built with Liquid and Alpine.js. On the product page, each color variant links to a separate product URL — meaning the entire page reloads when a customer switches variants.
I’d like to optimize this behavior to prevent full-page reloads and significantly improve page speed. What’s the best approach or pattern for handling this within Shopify’s ecosystem?
Thanks for your help,
/Oskar
Take a look at these docs, they’re not specific to Alpine but you should be able to take it and adopt it to fit what you need.
Yup, the above article is great!
Other solutions you might want to consider:
/products/${otherProductHandle}?section_id=${sectionId} then replace the current section using the response.The caveat with using the Section Rendering API like this is that it won’t completely update the URL in the browser. As a result, it may cause issues with functionality that relies on variant deep linking. If your theme relies on these features, I recommend testing thoroughly first.