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

Technical Q&A
1

1 - Add this code in theme.liquid before

{% 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 }}

{%- if section.settings.enable_quick_add -%}

{%- endif -%} {{ 'component-rte.css' | asset_url | stylesheet_tag }}

{%- 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 -%}

{% comment %} Sort is the first tabbable element when filter type is vertical {% endcomment %} {%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' -%}

{{ 'products.facets.sort_by_label' | t }}

{%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%} {% render 'icon-caret' %}
{{ 'products.facets.sort_button' | t }}

{%- 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 -%}

{%- endif -%}
{{ 'component-facets.css' | asset_url | stylesheet_tag }} {%- if section.settings.enable_filtering or section.settings.enable_sorting -%} {%- endif -%}
{%- paginate collection.products by section.settings.products_per_page -%} {%- if collection.products.size == 0 -%}

{{ 'sections.collection_template.empty' | t -}}
{{ 'sections.collection_template.use_fewer_filters_html' | t: link: collection.url, class: 'underlined-link link' }}

{%- else -%}
    {%- for product in collection.products -%} {% assign lazy_load = false %} {%- if forloop.index > 2 -%} {%- assign lazy_load = true -%} {%- endif -%}
  • {% 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 %}
    • {%- endfor -%}
{% if paginate.next %} Loading More {% endif %}
{%- if paginate.pages > 1 -%} {% render 'pagination', paginate: paginate, anchor: '' %} {%- endif -%}
{%- endif -%} {%- endpaginate -%}
2

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. (ajaxinate.js:1:2901)

3

@javi_mata Please share code details.