Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
i have just disable animation its work can you please check
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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024