1. 定位

				
					products-on-page 
				
			
				
					data-current-page = "{{paginate.current_page}}"
				
			
				
					data-pages="{{paginate.pages}}"
				
			
				
					data-next-url="{{paginate.next.url}}"
				
			

2. Load More 按钮

				
					{% unless paginate.pages == 1 %}
  <div class='load-more'> 
    <a class="btn load-more__btn" onclick="loadMoreProducts()">Load More</a>
    <div class="load-more__spinner"></div>
  </div>
{% endunless %}
				
			

3. 创建 Assets

				
					collection-load-more.js
				
			

请输入查看密码

4. theme.liquid

				
					{%- if template contains 'collection' -%}
  <script src="https://cdn.shopify.com/s/files/1/0553/4030/2521/files/jquery-3.6.0.min.js"></script>
  <script src="{{ 'collection-load-more.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
				
			

5. css 样式

请输入查看密码