Hi everyone,
I would like some assistance here on how to add infinite scroll to my collection/ product pages on the Prestige theme. I found a set of instructions only and was able to accomplish step 1-3 done! but steps 4 and beyond…is..not so much. I can’t find this code snippet ({% for product in collection.products %}) in my theme code in order to add the snippet listed on Step 4 and beyond.
Please help!
Here’s the instruction I found online:
Step By Step
Step 1: In your Shopify admin page, you open Online Store > Theme.
Step 2: Find the theme you want to edit, then click Action > Edit code.
Step 3: In the Layout section, click theme.liquid to open this file in the online code editor.
Find the tag and paste the below code just above it.
{% if template contains 'collection' %}{{ 'https://cdn.shopify.com/s/files/1/0382/4185/files/ajaxinate.js?937' | script_tag }}{% endif %}
Then save
Step 4: Open the template of the collection page and find the loop {% for product in collection.products %} and add a DIV tag that wraps and adds multiple DIV tags just below that tag. For example:
<div id="magepow-Loop" >
{% for product in collection.products %}
{% include 'product-grid-item' %}
{% endfor %}
</div>
<div id="magepow-Pagination">
{% if paginate.next %}
<a href="{{ paginate.next.url }}">Loading More</a>
{% endif %}
</div>
Paste below js line at the bottom of the file
<script>
document.addEventListener("DOMContentLoaded", function() {
var endlessScroll = new Ajaxinate({
container: '#magepow-Loop',
pagination: '#magepow-Pagination'
});
});
</script>
Click Save and you’re done.