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.
@Oskar_Sollenberg Our app [LinkedOption] can address this issue effectively. We recently launched a new feature that allows you to switch products without reloading the entire page.
