How to add load more pagination on collection page in Dawn theme

[Kumar2573]

1 - Add this code in  theme.liquid  before </head>

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

2 -  Go to main-collection-product-grid.liquid    and  replace this code

{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}

<link
rel="preload"
href="{{ 'component-rte.css' | asset_url }}"
as="style"
onload="this.onload=null;this.rel='stylesheet'"
>

{%- if section.settings.enable_quick_add -%}
<link rel="stylesheet" href="{{ 'quick-add.css' | asset_url }}" media="print" onload="this.media='all'">
<script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

<div class="section-{{ section.id }}-padding">
{% comment %} Sort is the first tabbable element when filter type is vertical {% endcomment %}
{%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' -%}
<facet-filters-form class="facets facets-vertical-sort page-width small-hide no-js-hidden">
<form class="facets-vertical-form" id="FacetSortForm">
<div class="facet-filters sorting caption">
<div class="facet-filters__field">
<h2 class="facet-filters__label caption-large text-body">
<label for="SortBy">{{ 'products.facets.sort_by_label' | t }}</label>
</h2>
<div class="select">
{%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
<select
name="sort_by"
class="facet-filters__sort select__select caption-large"
id="SortBy"
aria-describedby="a11y-refresh-page-message"
>
{%- for option in collection.sort_options -%}
<option
value="{{ option.value | escape }}"
{% if option.value == sort_by %}
selected="selected"
{% endif %}
>
{{ option.name | escape }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
<noscript>
<button type="submit" class="facets__button-no-js button button--secondary">
{{ 'products.facets.sort_button' | t }}
</button>
</noscript>
</div>

<div class="product-count-vertical light" role="status">
<h2 class="product-count__text text-body">
<span id="ProductCountDesktop">
{%- if collection.results_count -%}
{{
'templates.search.results_with_count'
| t: terms: collection.terms, count: collection.results_count
}}
{%- elsif collection.products_count == collection.all_products_count -%}
{{ 'products.facets.product_count_simple' | t: count: collection.products_count }}
{%- else -%}
{{
'products.facets.product_count'
| t: product_count: collection.products_count, count: collection.all_products_count
}}
{%- endif -%}
</span>
</h2>
<div class="loading-overlay__spinner">
<svg
aria-hidden="true"
focusable="false"
class="spinner"
viewBox="0 0 66 66"
xmlns="http://www.w3.org/2000/svg"
>
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>
</form>
</facet-filters-form>
{%- endif -%}

<div class="{% if section.settings.filter_type == 'vertical' %} facets-vertical page-width{% endif %}">
{{ 'component-facets.css' | asset_url | stylesheet_tag }}
<script src="{{ 'facets.js' | asset_url }}" defer="defer"></script>
{%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
<aside
aria-labelledby="verticalTitle"
class="facets-wrapper{% unless section.settings.enable_filtering %} facets-wrapper--no-filters{% endunless %}{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}"
id="main-collection-filters"
data-id="{{ section.id }}"
>
{% render 'facets',
results: collection,
enable_filtering: section.settings.enable_filtering,
enable_sorting: section.settings.enable_sorting,
filter_type: section.settings.filter_type
%}
</aside>
{%- endif -%}

<div class="product-grid-container" id="ProductGridContainer">
{%- paginate collection.products by section.settings.products_per_page -%}
{%- if collection.products.size == 0 -%}
<div class="collection collection--empty page-width" id="product-grid" data-id="{{ section.id }}">
<div class="loading-overlay gradient"></div>
<div class="title-wrapper center">
<h2 class="title title--primary">
{{ 'sections.collection_template.empty' | t -}}
<br>
{{
'sections.collection_template.use_fewer_filters_html'
| t: link: collection.url, class: 'underlined-link link'
}}
</h2>
</div>
</div>
{%- else -%}
<div class="collection{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}">
<div class="loading-overlay gradient"></div>

<ul
id="Huratips-Loop"
data-id="{{ section.id }}"
class="
grid product-grid grid--{{ section.settings.columns_mobile }}-col-tablet-down
grid--{{ section.settings.columns_desktop }}-col-desktop
"
>
{%- for product in collection.products -%}
{% assign lazy_load = false %}
{%- if forloop.index > 2 -%}
{%- assign lazy_load = true -%}
{%- endif -%}
<li class="grid__item">
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
lazy_load: lazy_load,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
</li>
{%- endfor -%}
</ul>
<div id="Huratips-Pagination">
{% if paginate.next %}
<a href="{{ paginate.next.url }}">Loading More</a>
{% endif %}
</div>
{%- if paginate.pages > 1 -%}
{% render 'pagination', paginate: paginate, anchor: '' %}
{%- endif -%}
</div>
{%- endif -%}
{%- endpaginate -%}
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var endlessScroll = new Ajaxinate({
container: '#Huratips-Loop',
pagination: '#Huratips-Pagination',
method: 'click'
});
});
</script>

[javi_mata]

when i use this solution the button dont hide when end the scroll, and console say this:
caught TypeError: Cannot read properties of undefined (reading 'innerHTML')
at Ajaxinate.<anonymous> (ajaxinate.js:1:2901)

[Kumar2573]

@javi_mata  Please share code details.