How to add infinite scroll to a collection page on Motion theme?

[zahin]

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

[KetanKumar · Accepted solution]

@zahin 

i have just disable animation its work can you please check

[KetanKumar]

@zahin 

thanks for post 

https://www.huratips.com/tech-tips/how-to-add-infinite-scroll-pagination-to-shopify-collection-pages...

can you please try this 

[zahin]

Hello @KetanKumar ,

Thanks a lot for the help. But I am so sorry, It didn't work. It's showing load more but it disables all my product images and now its looking horrible.

You can watch the new version here. Products – GoCheapStore.com

Please let me know what else I need to do.

Thanks

[KetanKumar]

@zahin 

oh sorry

bt your store is password protect can you please share us

[zahin]

Password- xml

@KetanKumar 

[KetanKumar]

@zahin 

oh sorry for this 

can you please revert your code and if possible to add me on staff account so i will check and update 

[zahin]

@KetanKumar how can I add you brother? Can you please instruct me on how to do that?

[KetanKumar]

@zahin 

https://help.shopify.com/en/manual/your-account/staff-accounts/create-staff-accounts

[zahin]

sent bro, have you got it?

@KetanKumar 

[zahin]

hello brother, @KetanKumar have you got your access?

[KetanKumar]

@zahin 

i have update code please check

[zahin]

@KetanKumar 

Bro after the load more is done causing more products to come, it is not showing the product image until it hovers. How can I solve it?

[KetanKumar · Accepted solution]

@zahin 

i have just disable animation its work can you please check

[ReidW27]

@KetanKumar @zahin 

Would you mind sharing the code snippet used for the infinity collection page scroll for Motion? I am trying to implement the same thing. 

Below is the default code snippet from the collection.template

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

        {%- if paginate.pages > 1 -%}
          {%- render 'pagination', paginate: paginate -%}
        {%- endif -%}

        {%- if settings.quick_shop_enable -%}
          {%- for product in collection.products -%}
            {%- render 'quick-shop-modal', product: product -%}
          {%- endfor -%}
        {%- endif -%}
      </div>
    </div>

Motion Theme 7.0

[KetanKumar]

@ReidW27 

Yes please try this 

https://www.huratips.com/tech-tips/how-to-add-infinite-scroll-pagination-to-shopify-collection-pages...

[ReidW27]

@KetanKumar Awesome! Thank you so much. Worked perfectly. I appreciate a good human being like yourself. 

[zahin · 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

[ReidW27]

@zahin Amazing, thank you so much. I greatly appreciate it. Very helpful and insightful. I am one who loves to learn like you. If interested, I have around 10 additional page.section blocks I have hardcoded into the motion theme over time. I can share it with you if interested.  You can preview some of the section blocks on my portfolio, reidwithrow.com. As you can see from the screenshot below, I built the entire portfolio with 0 third-party applications. 

0 applications used - Motion Theme 7.1

[ReidW27]

@zahin @KetanKumar The one thing I have noticed is the "Quick View" does not work once installed. I am wondering if any additional snippet goes into {%- if settings.quick_shop_enable -%}

Quick Shop Enable

[zahin]

Thanks a lot for appreciating me @ReidW27; it really means a lot. However, I am not a developer or so. So all credit goes to Ketan Kumar. I keep them together for better understandings for the newbies like me. 

I have visited your site. You have made a lot of custom coding kinds of stuff! I really liked the before-after sliders, IDK how you made that! That's really cool! If you can teach me, I will really be grateful! Also, I am interested in learning new things about the motion theme!

Thanks again!

[KetanKumar]

@zahin @ReidW27 

Wow it would be great

Thanks for update

[christa13]

Hello Zahin, thanks for the great solution! Do you know how to make this work in the Shopify Theme 2.0?

[Paddleboarder]

Amazing!  IT worked Thank you!!!!

[Ckuriosity]

Hi, Thanks , i also used huratips in my Symmetry theme , i disable animation and it was showing product but one more issue there , hover secondary image is not showing . it showing white image only. Can you guide me how to fix that. 

[freya0328]

I want to know if you have solved this problem now?

[ReidW27]

Do you mind sharing the code snippet for the resolution for your Motion theme? I am trying to implement the same thing.