Do you have large Shopify catalog collections with infinite scroll, where customers scroll far down, click on a product, and when they return to the collection, they’re taken back to the top of the page?
This results in high bounce rates, lost conversions, and a poor user experience.
How to maintain scroll position when a customer returns from a product page to browse more products?
It's important to note that IE and Safari browsers have this behavior by default due to how they handle caching, but one of the main browsers - Chrome doesn't handle it as efficiently.
This issue can be resolved by updating your Shopify theme using the following steps:
- Integrate the script from this source: https://github.com/artsy/scroll-frame
- Add the following code at the bottom of your
theme.liquid, just above the closing</body>tag
- Add the following code at the bottom of your theme.liquid, right above closing </body> tag:
{{ 'scroll_execute.js' | asset_url | script_tag }}
<script>
function isIE() { return navigator.userAgent.match(/Edge\/|Trident\/|MSIE /); }
function isMobileSafari() { return navigator.userAgent.match(/(iPod|iPhone|iPad)/); }
$(document).ready(function() {
if (isMobileSafari() || isIE()) return;
scrollFrame('Replace this with selector of your product grid item');
});
</script>
{% endif %}
This function will be invoked only on Shopify collection templates and will track the exact scroll position. When a customer returns from a product page, they’ll be taken back to the point where they previously clicked.
By implementing this, you’ll improve your user experience and ultimately increase conversion rate of your Shopify store.
Feel free to reach out to hello@positronagency.com if you have any questions or need help with integration.