Shopify how to load more products on collection pages

Рет қаралды 30,322

3 жыл бұрын

A stylish way to load more products on collection pages instead of going to the next page.
► How I can help
--------------------------------------------------------------------------
🎯 Get some free personal advice for your developer-career:
codingwithjan.com/career-advi...
👨‍💻 Are you looking for a Shopify Developer who can help out on your project?
codingwithjan.com/shopify-dev...
💻 Become a Developer yourself by enrolling in our Bootcamp “Freemote” (Freelance or Fulltime)
codingwithjan.com/?...
► Let's stay in touch :-)
--------------------------------------------------------------------------
🤝 LinkedIn (business journey and behind the scenes)
/ jan-frey
🎬 KZfaq (Shopify and Web Development)
kzfaq.info...
🔎 SEO Description
In this Shopify Development Tutorial, you will learn how to implement a type of infinite scrolling on collection pages. This endless scroll feature not only aims to improve the overhaul user experience but also leads to more product exposure.
The technical aspects of this implementation are elaborated in great detail as well. These include working with Shopify template files, writing and debugging Javascript code and using Ajax requests to load content in the background. Further, you see how CSS is used in Shopify to style the elements on the website.

Пікірлер: 178

@CodingWithJan 8 ай бұрын

🎯 get personal advice for your developer career. (free for a short time) codingwithjan.com/career-advice

@CodingWithJan 3 жыл бұрын

Took approx. 15h to make this video. idea and keywords: ~1h researching and testing the solution myself: ~2h translating and structuring the presentation in a logical way: ~3h preparing and recording the video: ~4h cutting + crash halfway through: ~3h description, title, tags and thumbnail: ~1h All to make it seem effortless for you. Truly hope it helps & you enjoy :-)

@Hsa008 3 жыл бұрын

God bless you

@ajfera716 3 жыл бұрын

Thank you for all your efforts! :-) (...bummer about the crash though)

@rodniegalvan8807 3 жыл бұрын

Hello Jan, Can you do swipe wipe mechanism in product page with debut theme? There is a lot of solution out there but didnt work for me or have a minor problem like dont have slick dots. Please help me :3

@samirsamir7779 3 жыл бұрын

Really thank you for all your efforts Jan , your final product is just a perfect video , I'm really expecting your paid udemy course to teach us deeply how to customize shopify themes as per customer need ..please keep delivring such great videos Jan ! thank you so much :-)

@skatlag 3 жыл бұрын

Hey, Jan. Is that hard to create the code similar to what this app "Discounted Pricing ‑ Discounts" does?

@umerj. 10 ай бұрын

Thank you, helped me a lot, had to code this today and didn't know where to start.

@davidcoombs7680 3 жыл бұрын

That was actually an incredible video. I love all your videos and follow along a lot of them on my stores when I need to, but with this video I learnt so much and felt like I got into the mind of a coder! Very insightful seeing the thinking behind it like this!

@moatazsaber3369 3 жыл бұрын

THIS IS THE BEST BEST BEST TUTORIAL I"VE EVER SEEN. you illustrated AJAX request in a very simple way. I've watched a lot of tutorials for ajax but I didn't understand it correctly. I finally can write AJAX request. Thank you!

@dreamescence 3 жыл бұрын

wow very much appreciated, such a simple and friendly way of delivery of knowledge, Thanks Jan!

@Babushka69 3 жыл бұрын

Always happy to see one of your vids!!! Thanks Jan! Next up the custom side-cart modal 😉

@CodingWithJan 3 жыл бұрын

We will see 😁 Anyways, glad to have you here :-)

@amitj5451 2 жыл бұрын

Watching your video in Apr 2022 and going to use this idea for my project. You are amazing Jan you always have a solution to my problems, I just have to visit your channel and look for the video for the problem I have and I always find a solution. Great Work Jan. Lots of things changed, your camera your background, but your humbleness and kind nature never changed. (Subscriber since 2020). Thanks

@peppers1758 3 жыл бұрын

This video cleared things up a lot. Thank you Jan. Very helpful

@deeepview8659 3 жыл бұрын

Bro! I waste hours of my time to find the decision to upload photos. Your video really helps me. Thank you!!!

@pulgosawr 3 жыл бұрын

After spending time on searching what could help me to achieve this kind of function, I finally found your video in which I followed and glad that works for me. Thank you so much. Keep on sharing and God bless you.

@tim_fully Жыл бұрын

Please let everyone know that adding pagination like this goes against Shopifys recommendations and also googles search guidelines as pagination or load more should always display the link in tags so google knows this page has pagination and linked together and can also discover the products associated with the collection on page 2 etc. By using Google also recommends when using load more to ensure that the url is updated in the window so when it’s clicked a user knows where they are etc. 2 things which will cause indexing issues for stores here. And trust me I’ve had major indexing issues caused by js based pagination.

@CandyIL 7 ай бұрын

You are right! but in this video you can see when you click on the load more the url / page number changes so it suppose to cover the indexing issue. What do you think?

@tim_fully 7 ай бұрын

It doesn't. Thats just for the user. The pagination needs to be in

@Hsa008 3 жыл бұрын

I am always so happy to see your video notification.

@CodingWithJan 3 жыл бұрын

Great to see you're still around :-)

@shiktoahmed5746 3 жыл бұрын

me too 😊

@Sverinee 3 жыл бұрын

One of your best code tutorial video ;) Even if I don’t need to use it for now, I learn a lot in this video (especially the great use of Ajax) . I really loved it. Thank you for all time spend to create it. We really appreciate! Keep coding !

@CodingWithJan 3 жыл бұрын

Super welcome :-)

@betecieai Жыл бұрын

Amazing tutorial, it is working in any theme, so that's really great, thank you Jan for this super useful video.

@saifiqbal102 3 жыл бұрын

Great tutorial. Save my lots of time. Thank you.

@nataliabrown4417 3 жыл бұрын

Thank you for this tutorial it works perfectly! Trying to figure out how to make sure you return to the same place on the page. For example, if you scroll through 10 pages and click on a product, then navigate back at the moment it takes you to the top of the page. Would love a tutorial from you on this but it might be out of scope as these videos take so long for you to research and put together!

@aronwaldispuehl3117 3 жыл бұрын

Hey, Jan I have a suggestion for you: Why don't you make a whole video called "Building a custom theme from scratch" where you show the whole process of starting from 0 to have a completely functional and cool looking custom made theme. You could create a theme with different functions like "collection-add-to-cart" or "cart-goal" and something the like. I know the video would be hours long but I and I guess also others would really enjoy seeing how you would make such a custom theme. In the end, you could also offer the theme you created for free or put it on the Shopify paid themes for a fee to download. Also, I'd like to take the chance to thank you for every video you've done so far and the time you take to create them. All the best for your future!

@jonice4229 3 жыл бұрын

Yeah from scratch a theme if its free or paid anyway i will take it.

@jjuuiiccyyjj 3 жыл бұрын

another amazing video! quality content 👌🏽🔥🛒

@muhammadurwausman5679 2 жыл бұрын

you are really a champ bruh.!!!!

@zzf1845 5 ай бұрын

Hey, you really did a great job solving my problem

@elianetoliva6802 3 жыл бұрын

Hi Jan, thanks for sharing another video, I look forward to your content every month, really enjoy adding all the different functionalities to make my store look so much nicer and I am learning a lot more than just copying and pasting the code, so thanks for all you do for people all over the world. If you are still taking suggestions, I would love to see something related to filters, quick view/shop, child menus for the debut theme to make the parent clickable. Thanks!

@CodingWithJan 3 жыл бұрын

Hey Elianet 😀 Thank you for your fantastic feedback and your input. Glad to hear you get to learn new things along the way. Also thank you for the great content ideas. Not only am I still taking suggestions, I'm desperately looking for them. 😃

@vinittamoli8197 3 жыл бұрын

Thank you so much for this video. It helps me a lot.

@paulsingh6848 3 жыл бұрын

Thank you for all your videos, all of them are so informative. Do you have any video on installing filters on the collections page?

@afnanshahid2867 3 жыл бұрын

Keep it Up and Uppload as soon as new tutorials LOVE FROM PAKISTAN

@Akkhan-fg5mu 3 жыл бұрын

Always will remember me if you get million of subscribers in future!!😄 One of your subscribers in the first ones!!

@devine_noise Жыл бұрын

Hey Jan. Love your teaching style. If you wanted, a refresher on this with the fetch api or vanilla js XMLHttpRequest would be fantastic.

@qemania 3 жыл бұрын

you are a great man ... keep it up!

@korkmazmerve 2 жыл бұрын

thanks for sharing this video. you showed us in a very simple and understandable way

@ajayrabari433 3 жыл бұрын

Thanks for sharing this. Looking for more development videos.

@NadalChina 3 жыл бұрын

Thanks Jan , we look for more videos

@anhqui19822011 3 жыл бұрын

Excellent video. Thank you so much!

@SachinSharma-ul4ce 3 жыл бұрын

Awesome video... much appreciated -- thanks for the video

@jasonjones4902 3 жыл бұрын

Your videos are great. The detail and explainations make it easy to understand why things are done the way they are. With that said, I had a question as to what happened to the "Previous" and "Next" buttons. At 24:10, the buttons were visible in your demo, but disappeared following a refresh at 28:48. Unless I missed something minute, they disappeared, which was to be expected, but I didn't see how it was done. Can you elaborate?

@jahikerrojas9339 2 жыл бұрын

What an amazing video! you are the bets!

@CodingWithJan 2 жыл бұрын

Thanks Jahiker 🙌🏻

@Johnny1864 2 жыл бұрын

Very helpful!

@rajonu 2 жыл бұрын

Hi, Jan It's workd for me. Thanks lot. I need to show the product counter above the button after clicking the load more button. Like: ( Showing 40 product out of 300 product) and then added next set of product and show: (60 product out of 300).

@khaledmv31 3 жыл бұрын

Thanks for saving my time.

@ataurrahman7582 3 жыл бұрын

Excellent tutorial

@JahinShahriar 3 жыл бұрын

Finally you are back :D i have a request Jan , can you please make a tutorial how we can make a custom product template for a specific product ? like if I have 3 product watch , car , t-shirt .. but I want to have different look only for the car product page out of the box then what theme provide. Can you please make a tutorial on it ? Thank You

@CodingWithJan 3 жыл бұрын

Hey Jahin, some premium themes already provide additional product templates :-) In my first video on "custom user inputs" you could see how one can create different templates, but most of the work will go into styling elements differently. I'll see what we can do 😁

@ovirashed3867 3 жыл бұрын

Awesome bro.

@shiktoahmed5746 3 жыл бұрын

very nice jan. Thanks

@jacobprice8757 2 ай бұрын

Jan your a god.

@alebollana 3 жыл бұрын

Jan, thanks! your work is great. Do you know some nice trick to add a filter sidebar to the Debut theme? Many people asking on shopify forums. Hope you could help us with this in a next video. Best greatings for 2021!

@techxscream6014 3 жыл бұрын

Your videos are full of inspiration.😍😍😍

@CodingWithJan 3 жыл бұрын

nice to hear :D

@user-mx2gh2iw8b Жыл бұрын

very useful video thanks

@RiadAbdallah 3 жыл бұрын

Hello Jan, wonderfull channel and tutorials, thank you so much. Do you think we could have 2 or more of Load More on one page, under different sections of different collections? Thanks a ton RJ

@jimcrow2000 3 жыл бұрын

Hey Jan, thanks a mil for your code, it's of great help. How about adding an auto-click of the button as the scroll arrive on it so that people don't even have to click the button themselves, as they scroll and arrive at the end of the page, the rest of the collection loads and shows automatically? Have you thought about that?

@arnabbhattacharya7931 3 жыл бұрын

I always become happy when i see you. you are so genuine and skillful. I am having a problem. previously when you have a shopify developer account and you create a store you can easily remove the password, now they don't allow that. how to get around with that ?

@chirag-khatri 3 жыл бұрын

You have a nice series of Shopify videos. Can you please make a video to implement a custom HTML theme to Shopify instead of using the readymade theme? Excellent work!

@rajonu 2 жыл бұрын

great Video.

@FiguerasFamilyTravelBlog 3 жыл бұрын

Hi Jan, Seen alot of all your videos and they are very helpful. Could you please help me on how to create a code to have a sidebar bar on all of the catalog list. Thank you so very much

@itumelengmatlala8208 7 ай бұрын

that is a very nice hoodie

@architramsenathi6840 3 жыл бұрын

Hi Jan! I stumbled upon your channel and have already implemented quite a few codes in my own shopify store. I want to thank you for all the amazing content. I am a bit stuck with one problem in my store and feel like that topic might be good for a video suggestion. Please let me know any way I can contact you on youtube or email as I have to send screenshots to explain my problem.

@rohitsrivastava9713 3 жыл бұрын

Nice tips

@rohitsrivastava9713 3 жыл бұрын

Always loading second page products only.

@md.habiburrahman1378 3 жыл бұрын

great bro

@sale4all 3 жыл бұрын

hello jan, great job ***** first class tutorials !! can you please publish the code to read? waiting for next videos. I know it is a lot of work

@motivational7531 3 жыл бұрын

This is my Sunday project! you are absolutely amazing and deserve a million subs Jan! Request if possible: linking facebook and instagram native comments to shopify product pages :) I've seen some stores do it and wondering if it's easy to code! thanks so much once again

@CodingWithJan 3 жыл бұрын

Hey, there thanks your for amazing feedback again :-) Regarding the comments, it's more often than not done with screenshot, well edited to match the site 😁 But I'll check if there is a native integration :-)

@atosupriyanto6990 3 жыл бұрын

Thanks bro so awesome, we hope you to make tutorial how to make invinite products load on scroll instead click the button, thanks

@lowelpitogo3920 Жыл бұрын

Hey Jan, thanks for sharing this video. I just have one question how to disable the button if there are no products to display? Please let me know. Thanks

@kingcali1 3 жыл бұрын

Hallo Jan. Thanks for this Video. ;) can you explain to me how I get the load more button also displayed on the blog?

@ACABadabra25 3 жыл бұрын

#tutorialrequest How would you recommend we sell product sets while keeping a correct inventory? Thank you! These videos are very helpful.

@joeeverett7334 3 жыл бұрын

Hi Jan, I am a big fan, you have helped me a lot with learning Shopify Development, how about implementing predictive search as a video idea?(I know it may be a bit complicated)

@CodingWithJan 3 жыл бұрын

Hey Joe thanks for the great feedback and you're input :-) Usually one might consider to use an for that, but I'll see what is doable without :-)

@shinnychildrens2896 3 жыл бұрын

Oooo it was very tricky. but you are genius jan. I am also trying to do like that. But the problem is that I can't work on javascript I didn't work on javascript till today from last 1year

@CodingWithJan 3 жыл бұрын

Hey Muhammad javascript definitely needs a lot of practice.

@juliemillerwealthartificer4764 2 жыл бұрын

Hi there, thank you for your videos. Is it possible for you to do an updated Load more products video using Dawn 5.0?

@funtech7905 3 жыл бұрын

Hi jane,. I want to know how to change second image on hover in debut theme....can u plz help out.

@turbopetar 3 жыл бұрын

Jan thats all good and working but please plese let us know how to remove the page and arrows button under “load more” otherwise its just silly.. you cut the video there and didn’t show. Thanks

@ahmedbilal9090 3 жыл бұрын

hi, Jan you are doing great work. this video is very helpful for me I made a load more button on my store but I am facing one issue can you help me out. when I click on the load more button the product show but without the reviews. I want to show the reviews also please help me. I search a lot but don't find anything.

@stevenhyc 3 жыл бұрын

Hi Jan, can you make a video tutorial on how to hide 1 menu item on header/footer after user logged in? Thanks!

@Aerotk 3 жыл бұрын

Hello jan, hope you are good. Wishlist : please make a tutorial series or tutorial on multi-currency and multi lingual in shopify.

@CodingWithJan 3 жыл бұрын

Hey, thanks for the great input :-) I actually have a video for multi currency already, it was one of the first on the channel :-) Multilanguage is definitely something we can cover too :-)

@muratkaya2357 3 жыл бұрын

Hey Jan, do you think of giving a course at Udemy?

@micaelasantana6122 3 жыл бұрын

Hi, can you explain how to add sections to product pages for different content on each page? When I add sections they repeat the same content on every page, so how can we add sections with different content? I'd like to add sections such as image-text w/ custom content on each product. Thank you for any help! I couldn't find another way to contact you =)

@rodniegalvan8807 3 жыл бұрын

@klokkerholm1993 3 жыл бұрын

Hi Jan nice channel I have a customer who want a product template with a "engravering" custom field how can i make this in shopify? 🙂

@MaknunKhan 3 жыл бұрын

could you make a video about In checkout page show recommended product

@lemmymwaura7481 3 жыл бұрын

Hey Jan Awesome content as always. I have a simple question. The FAQ tutorial you provided was very awesome and so was the ' tabs for product description'. The problem I'm having though is that the code seems to collide (.tab-content {display none}; //product des code prevents the answer part in the FAQ from showing. How do I prevent this.

@CodingWithJan 3 жыл бұрын

Hey there first thanks for the great feedback :-) Your absolutely right. The CSS class name "tab-content" does collide :-) In the markup for the faq you can rename the CSS class "tab-content" to "answer" You would then need to adjust all the CSS rules accordingly. Here is what the updated css would look like pastebin.com/Fu9wK2zt Hope that helps :-)

@lemmymwaura7481 3 жыл бұрын

@@CodingWithJan Thank you so much. I was able to fix it.

@nelsonarel 3 жыл бұрын

How can I add Fade in Up css animation to my product collection and collection grid?

@3odesign Жыл бұрын

Hi Jan, is this still an “acceptable workaround”? Or do you have another, newer way to do this?

@mirosilva9753 3 жыл бұрын

Does anyone know how to change the Debut theme setting for the Quantity button to leave it next to the color option variant, on the sales page, via code? Can you teach us on your channel?

@sarikasharma706 Жыл бұрын

Hi Jan, Thanks for the wonderful tutorial. I'm getting an error as 'cannot read properties of undefined (reading 'append')' as soon as I placed it into my theme code files but it was working when I was doing it on browser first just as you did. Please help.

@johnsteph2385 3 жыл бұрын

This is Saved my client

@GamerRene 3 жыл бұрын

I want to add a sidebar to the Shopify Theme Debut, can you please help me to do that?

@sharonnamanda861 3 жыл бұрын

Does this work for other themes like boundless

@ABRModelWorks 2 жыл бұрын

Can you look at doing an update video for the new Dawn theme, Thank Chris

@CodingWithJan 2 жыл бұрын

Great idea now that Dawn will be the new defautl theme! Thank you for the suggestion🙌🏻

@trilokinathsingh7355 3 жыл бұрын

Hi, I am facing a problem while using product option by bold with my current theme "PORTO" in Shopify. while using both the "ADD TO CART " feature is not working on my website. Can you please help with this as I am unable to do anything :(

@user-lw4bh6qd8b 10 ай бұрын

Hi. I need your help with something similar. I don’t want pagination nor a load more button my collections page. But auto load and I want the similar icon to be displayed as I scroll. Could you pls help with thi.

@jasmineandjadeinteriors Жыл бұрын

There;s no collection.liquid in the Dawn theme. Please advise?

@Jakolo121 3 жыл бұрын

Moin Jan! Könntest du ein Video über Produktfilter machen? Also wie man z.b ein Icon/Bild anstatt der Buttons zum auswählen baut. :D Grüße Benny

@madleet5777 3 жыл бұрын

What do I have to change in this code in order to show FREE instead of 0,00€ ? Im having the Kalles Theme.

@webaliakhtar 3 жыл бұрын

cart drawer remove product with button in shopify brooklyn theme how to build it.

@stevenrathmann7823 6 ай бұрын

Is it possible to change the ?page param to something else?

@user-cx6un8jj2z 11 ай бұрын

Hi Jan, can I have visite your store? I want to see the best practice of how to customise product page

@leewseea 3 жыл бұрын

Hi Jan, would you please share the code on this one ? Need to test something like this. Thanks.

@vishalberiya9620 3 жыл бұрын

Hello Bro, Great video can you please make video related to create app public and private for shopify.

@CodingWithJan 3 жыл бұрын

Hey Vishal, App Development is something I haven't covered on the channel yet. Might be interesting to others as well, I'll see if we can make an excursion :-)

@vishalberiya9620 3 жыл бұрын

@@CodingWithJan Thanks

@CrickteTopNews 3 жыл бұрын

Hey jan am using your code i have only two collection pages when i click on load more it will show next page but when i click on it agian it will repeat the products again & agian. gave me its Solution

@JakoBravo 2 жыл бұрын

Hi Jan, thanks a for the code. I have implemented it on my site but I found out that when filters are applied to the current products view, then the "Load More" button doesn't work anymore! Could you help or give me some hints on why this happen? Thank you very much!

@matthiaschristoph3789 2 жыл бұрын

Hi JakoBravo, I have the same issue. Have you solved it? Thank you and best regards

@JorgeandAylin 3 жыл бұрын

Tutorial rquest :) Your videos have been extremely thankful. I have a quick question, or suggestion. Im trying to create a page, and erase from the URL the handle page or collection. I have debut theme. example: www.magiccrystals.com/pages/rose-quartz-meaning to www.magiccrystals.com/rose-quartz-meaning I have created a URL redirect, but the ending result continues to be www.magiccrystals.com/pages/rose-quartz-meaning , and same thing with collections. Can you please make a tutorial on it ? Thank You

@CodingWithJan 3 жыл бұрын

Hey Aylin, nice meeting you. Unfortunately cutting the URL wont be possible at this point. Redirect is the way to go. It's almost unnoticeable for most users :-)

@dondogoberto 2 жыл бұрын

Hello Jan, thanks for all the super awesome content. I was trying to make this on the dawn theme, but when i call for the class on the console returns "$ is not a function", it`s because the new architecture of the themes? is possible to make this same function on dawn? Thanks a lot again for the knowledge u share

@dondogoberto 2 жыл бұрын

it worked well after installing jquery 3.6 😬

@matthiaschristoph3789 2 жыл бұрын

@@dondogoberto Hi Pedro, does it work for you after filtering on collection page?

@dondogoberto 2 жыл бұрын

@@matthiaschristoph3789 oh, it doesn't. Thanks for the advice i have missed to test with filters. I will leave the function only for blog pages. 😅

@matthiaschristoph3789 2 жыл бұрын

@@dondogoberto I found out that after the ajax request there are no variables set. After inserting the variables in the console on chrome it works with filters. don't know how to code that variables are reloaded after ajax call. any idea? First idea was to create an 'on.change' event on the filters but that didn't work for me :(

@khizarhayat979 3 жыл бұрын

can you please let me know what tech stack could be used to develop a shopify theme from scratch? Which Programming language is best to develop shopify themes?

@CodingWithJan 3 жыл бұрын

Hi Khizar, for theme development you'd need to know html, css, liquid and some JavaScript :-)

@khizarhayat979 3 жыл бұрын

@@CodingWithJan please make a series on shopify theme development

@The-Laughing-Counter 3 жыл бұрын

Hi Jan! I tried this but the prev & next page buttons below the LOAD MORE button are still visible, what do you think is wrong? Thanks for your effort!

@elianetoliva6802 3 жыл бұрын

same thing happen to me, it is showing both options now, dont know how to take away the pagination with page numbers