Shopify themes, liquid, logos, and UX
My current project is using the focal theme, and I need help with implementing an infinite scroll on collection pages. I have looked around and followed several tutorials that are all about the same. The one that seems to get referenced the most is this one: https://www.huratips.com/tech-tips/how-to-add-infinite-scroll-pagination-to-shopify-collection-pages....
When I follow this guide my code ends up looking like this:
<div id="huratips-loop"> <div class="product-list__inner"> {%- assign desktop_number_of_products_minus_one = section.settings.desktop_products_per_row | minus: 1 -%} {%- assign gap_width = 24.0 | divided_by: section.settings.desktop_products_per_row | times: desktop_number_of_products_minus_one -%} {%- capture sizes_attribute -%}(max-width: 740px) calc({{ 100.0 | divided_by: section.settings.mobile_products_per_row | ceil }}vw - 24px), calc((min(100vw - 80px, 1520px) - {{ sidebar_width }}px) / {{ section.settings.desktop_products_per_row }} - {{ gap_width | ceil }}px){%- endcapture -%} {% assign collectionCount = 0 %} {%- for product in collection.products -%} {%- render 'product-item', product: product, collection: collection, block: block, sizes_attribute: sizes_attribute, reveal: settings.stagger_products_apparition -%} {%- endfor -%} </div> </div> </product-list> <div id="Huratips-Pagination"> {% if paginate.next %} <a href="{{ paginate.next.url }}">Loading More</a> {% endif %} </div> {%- endpaginate -%} {%- if section.settings.promotion_position == 'bottom' -%} {{- promotion_blocks -}} {%- endif -%} {%- else -%} <div class="empty-state"> {%- if collection.all_products_count == 0 -%} <h3 class="heading h4">{{ 'collection.general.empty_title' | t }}</h3> <p>{{ 'collection.general.empty_label' | t }}</p> <div class="button-wrapper"> <a href="{{ routes.all_products_collection_url }}" class="button button--primary">{{ 'collection.general.empty_button' | t }}</a> </div> {%- else -%} <h3 class="heading h4">{{ 'collection.general.no_results_title' | t }}</h3> <p>{{ 'collection.general.no_results_label' | t }}</p> <div class="button-wrapper"> <a href="{{ collection.url }}?sort_by={{ collection_sort_by }}" data-action="clear-filters" class="button button--primary">{{ 'collection.general.no_results_button' | t }}</a> </div> {%- endif -%} </div> {%- endif -%} </div> </product-facet> </div> </section> <script> document.addEventListener("DOMContentLoaded",function(){ const endlessCollection = new Ajaxinate({ container: '#huratips-loop', pagination: '.infinite_next' }); }) </script>I have also seen references to where I need to adjust my pagination snippet which is:
{%- if paginate.pages > 1 -%} <page-pagination {% if use_ajax %}ajax{% endif %} class="pagination"> <nav class="pagination__nav"> {%- if paginate.previous -%} <a class="pagination__nav-item" rel="prev" aria-label="{{ 'general.pagination.previous_page' | t }}" data-page="{{ paginate.current_page | minus: 1 }}" href="{{ paginate.previous.url }}{{ hash }}"> {%- render 'icon' with 'nav-arrow-left', direction_aware: true -%} </a> {%- endif -%} {%- for part in paginate.parts -%} {%- if part.is_link -%} <a href="{{ part.url }}{{ hash }}" data-page="{{ part.title }}" class="pagination__nav-item heading heading--small" aria-label="{{ 'general.pagination.go_to_page' | t: page: part.title }}">{{ part.title }}</a> {%- else -%} <span class="pagination__nav-item heading heading--small" {% if part.title == paginate.current_page %}aria-current="page" {% endif %}>{{ part.title }}</span> {%- endif -%} {%- endfor -%} {%- if paginate.next -%} <div class="infinite_next"/> <a class="pagination__nav-item" rel="next" aria-label="{{ 'general.pagination.next_page' | t }}" data-page="{{ paginate.current_page | plus: 1 }}" href="{{ paginate.next.url }}{{ hash }}"> {%- render 'icon' with 'nav-arrow-right', direction_aware: true -%} </a> {%- endif -%} </nav> </page-pagination> {%- endif -%}
<link rel="preload" as="script" href="{{'ajaxinate.min.js' | asset_url }}">
.
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Thank you for your offer. This is a client site currently under development and as such, I can not share any links outside of the current working group. Any ideas or directions would be greatly appreciated.
Hi Paul,
did you find a fix? I need exactly the same?
Regards
Zin
Hi, are there any possibility to integrate infinity scrolling in the focal theme? I am looking at this as well...?!
Did you find any solution to this issue ?
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025