Solved

Can I add infinite scroll to the collection page on a motion theme in Shopify?

zahin
Shopify Partner
39 1 21

How can I add infinite scroll in the collection page on my motion theme?


I have tried using apps like Infy Scrolller but it didn't work at all.
Here is my collection page link where I want to add that: Products – GoCheapStore.com Password- xml

Thanks In Advance

Accepted Solutions (2)
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@zahin 

i have just disable animation its work can you please check

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

zahin
Shopify Partner
39 1 21

This is an accepted solution.

At first, I am thankful for the guy @KetanKumar, and he has solved the problem of my shop!

However, after working on my shop, I examined the changes he had made and wrote them in a text file cause my brother also wants me to teach him, but he does not know to code. I am sharing that text file. I hope it will work perfectly. @ReidW27 

 

Adding Up Infinite scroll -motion theme

1. go-to the online store
2. theme > actions > edit code
3. go to theme. liquid under the layout tab
4. press cntrl+f and type </head> to find out the head ending HTML tag
5. paste this code just above it

{% if template contains 'collection' %}{{ 'https://cdn.shopify.com/s/files/1/0382/4185/files/ajaxinate.js?937' | script_tag }}{% endif %}

6. go to the collection-template.liquid under the sections tab
7. press cntrl+f and type {% for the product in the collection. products %} to find it out
8. select this whole bunch of codes


{% for product in collection.products %}
{% include 'product-grid-item' %}
{% else %}
<div class="grid__item">
<p>{{ 'collections.general.no_matches' | t }}</p>
</div>
{% endfor %}
</div>

{% if paginate.pages > 1 %}
{% include 'pagination' %}
{% endif %}


9. replace it with
<div id="Huratips-Loop" >
{% for product in collection.products %}
{% include 'product-grid-item' %}
{% else %}
<div class="grid__item">
<p>{{ 'collections.general.no_matches' | t }}</p>
</div>
{% endfor %}
</div>

</div>

<div id="Huratips-Pagination" class="text-center">
{% if paginate.next %}
<a class="btn" href="{{ paginate.next.url }}">Loading More</a>
{% endif %}
</div>

{% comment %}
{% if paginate.pages > 1 %}
{% include 'pagination' %}
{% endif %}
{% endcomment %}


10. press cntrl+f and type {% schema %} to find it

11. paste this code just above it
<script>
document.addEventListener("DOMContentLoaded", function() {
var endlessScroll = new Ajaxinate({
container: '#Huratips-Loop',
pagination: '#Huratips-Pagination'
});
});
</script>

12. lastly, go to theme editor > theme settings > animations > remove the checkbox from Animate images

That's it

Thanks

View solution in original post

Replies 25 (25)