How to add Auto Scroll to Shopify Minimal Theme

New Member
9 0 0

Hi, 

I really want my product pages to auto scroll as i know myself that i don't tend to click through pages if i cant just scroll down.

We use Shopify minimal theme and it doesn't seem to be all that straight forward. Can anyone advise how to do it?

Thanks

 

0 Likes
Shopify Expert
2133 356 445

If you want to auto scroll your page then you can use bellow Jquery that scroll your page to bottom on load. Add this code in Asset->theme.js at bottom of file.

 

$("html, body").animate({ scrollTop: 5000 }, 1000);

Or if you want to auto scroll to any div then use bellow:

 

$("html, body").animate({
        scrollTop: $("#div_id").offset().top
}, 1000);

Note: change div_id with your div id or you can use class.

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
9 0 0

Hi Jasoliya, 

 

Thank you for getting back to me. I entered the first suggestion at the bottom of theme.js , as you suggested however it has not done anything. Is there anything else i need to do ?

0 Likes
Shopify Expert
2133 356 445

Send me your store URL i will check and keep my code in file. Or you can find $(document).ready(function(){}) in this file and try to putting code in this function.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Tourist
14 0 0

I'd also like an auto-scroll function (or rather auto load for next page when i get to the bottom of the first page) and so i tried your first version on brooklyn, did i placed it wrong?  What happens now with this code is that when i go into a collection is that I get sent automatically straight to the bottom of the first page of that collection. There i still have to click to see page two. 

 

On the search page, when i search the word, as soon as the search result comes i get sent to the bottom.

 

I've been doing a 5 dollar/month app called "infinite scroll and load more" but the problems with this is that if you have a 6 page collection, then every time you watch a product and then click "back" in your browser, then you end up on page 1 or 2 again, even if you were on page 5 when clicking into the product. I see that even my Facebook-feed works like that, if I go down far on it and go into a profile and then click back i get back to page 1, so there is probably no way around it, right? You would think they would fix it if there was. 

 

I am just getting ready to open the store, but I think I will need to uninstall that "infinite scroll and load more" app first, because people will get annoyed. Maybe just set the settings so it shows 4 times the pages from the start. 

 

Also, "infinite scroll and load more" doesn't auto-load next page on searches.

 

It does look good though, on the collection pages.

 

If there is a way to 

 

$(document).ready(function() {
theme.init();
var sections = new theme.Sections();

$("html, body").animate({ scrollTop: 5000 }, 1000);
sections.register('product-template', theme.Product);
sections.register('collection-template', theme.Collection);
sections.register('header-section', theme.HeaderSection);
sections.register('featured-content-section', theme.FeaturedContentSection);
sections.register('newsletter-section', theme.NewsletterSection);
sections.register('slideshow-section', theme.SlideshowSection);
sections.register('password-header', theme.PasswordHeader);
sections.register('password-content', theme.PasswordContent);
sections.register('map', theme.Maps);
sections.register('search', theme.Search);
});
0 Likes
Highlighted
Shopify Expert
2133 356 445

Hi @David_1 

By this my code you cant reach your way. this code only use for scroll page.

If you want to make infinite scrolling on collection page then text me i will it without any app for collection and search page because it take custom code cant sent it here. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Tourist
14 0 0

Thank you for the offer to help with the code! I texted you now. 

 

About what I wrote before about the 5 dollar/month app called "infinite scroll and load more" I want to be fair to them and update what I said.

 

One of the issues (see below) turned out to work in their newer version, but I installed mine before it worked, so i just disabled and enabled it (did not even have to uninstall) and that issue fixed itself and you now get to the right place when you click "back" in the browser. 

 

Their support mentioned that there may also be ways to get it to work on the search results page. It's a pretty good app for a fair price. 

 

"but the problems with this is that if you have a 6 page collection, then every time you watch a product and then click "back" in your browser, then you end up on page 1 or 2 again, even if you were on page 5 when clicking into the product. 

0 Likes