Spotlight Theme: Stop refreshing Mobile product view window when selecting variants

Store Design
, , ,
1

Hello!

I am using the Spotlight theme and have encountered a bug with mobile on both the quick add and main product page. When a color/size is selected the window refreshes and scrolls to the top every time on mobile only. I would like the page to stay in the same place without refreshing/scrolling up after a new variant or size is selected. I understand that the customer will need to scroll up to see the new variant image. This is smoother and allows the customer to find their preferred color and size without frustration.

See screen recording of mobile view:

https://cdn.shopify.com/videos/c/o/v/63250a6c8e47403392232a588edb08b8.mp4

Thank you so much!

Site:

https://lighthousesb.com/

pass:

Lithouse!

2

Instead of using standard form submissions, modify the code to use AJAX (Asynchronous JavaScript and XML) to handle variant changes. This way, the page won’t refresh, and the customer won’t be scrolled to the top. Here’s a general outline: a. Find the code that captures the form submission (likely an onsubmit event handler) and intercept it with JavaScript. b. Use AJAX to send a request to Shopify’s /cart/update.js endpoint with the selected variant information. c. Update the cart summary or any relevant UI elements with the new variant details returned by the AJAX response.