Shopify超100个Collections列表的分页/无限滚动实现咨询

嘿，这个问题我之前帮不少Shopify开发者解决过——默认情况下Shopify确实没给Collections列表做分页/无限滚动的现成功能，但用Liquid搭配点前端代码完全能搞定，分两种方案给你细说：

一、分页方案（Liquid + 基础CSS） #

Shopify的paginate标签可不是只能给商品分页，对Collections集合同样生效，步骤很简单：

1. 修改Collections列表模板 #

找到你的Collections列表模板（通常是collections/list.liquid，如果是自定义模板就找对应的文件），用paginate标签把Collections循环包裹起来，设置每页显示的数量（比如我这里设12个）：

{% paginate collections by 12 %}
  <div class="collections-grid">
    {% for collection in collections %}
      <!-- 这里放你的Collection卡片代码，比如展示图片、标题这些 -->
      <a href="{{ collection.url }}" class="collection-card">
        <img src="{{ collection.image | img_url: '300x300' }}" alt="{{ collection.title }}">
        <h3>{{ collection.title }}</h3>
      </a>
    {% endfor %}
  </div>

  <!-- 分页导航按钮 -->
  {% if paginate.pages > 1 %}
    <div class="pagination">
      <!-- 上一页按钮 -->
      {% if paginate.previous %}
        <a href="{{ paginate.previous.url }}" class="pagination-prev">上一页</a>
      {% endif %}

      <!-- 页码列表 -->
      {% for part in paginate.parts %}
        {% if part.is_link %}
          <a href="{{ part.url }}" class="pagination-link">{{ part.title }}</a>
        {% else %}
          {% if part.title == paginate.current_page %}
            <span class="pagination-current">{{ part.title }}</span>
          {% else %}
            <span class="pagination-ellipsis">{{ part.title }}</span>
          {% endif %}
        {% endif %}
      {% endfor %}

      <!-- 下一页按钮 -->
      {% if paginate.next %}
        <a href="{{ paginate.next.url }}" class="pagination-next">下一页</a>
      {% endif %}
    </div>
  {% endif %}
{% endpaginate %}

要是你想自定义Collections的排序（比如按标题、创建时间），可以把collections改成collections | sort: 'title'，直接加到paginate标签里就行，比如{% paginate collections | sort: 'title' by 12 %}。

2. 给分页加样式 #

给分页导航加些基础CSS，让它看起来不那么简陋：

.pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 2rem;
}
.pagination-link, .pagination-prev, .pagination-next {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  transition: background 0.2s;
}
.pagination-link:hover, .pagination-prev:hover, .pagination-next:hover {
  background: #f5f5f5;
}
.pagination-current {
  padding: 8px 16px;
  background: #000;
  color: #fff;
  border-radius: 4px;
}
.pagination-ellipsis {
  padding: 8px 16px;
  color: #999;
}

二、无限滚动方案（Liquid + JavaScript） #

如果分页的跳转感不符合你的需求，无限滚动会更流畅，思路是：加载第一页后，用户滚动到页面底部时，自动AJAX加载下一页的Collections并追加到列表里。

1. 调整模板结构 #

还是用paginate标签，但把分页导航改成隐藏的，只留个下一页的URL给JS用：

{% paginate collections by 12 %}
  <div class="collections-grid" id="collections-container">
    {% for collection in collections %}
      <!-- 同样的Collection卡片代码 -->
      <a href="{{ collection.url }}" class="collection-card">
        <img src="{{ collection.image | img_url: '300x300' }}" alt="{{ collection.title }}">
        <h3>{{ collection.title }}</h3>
      </a>
    {% endfor %}
  </div>

  <!-- 隐藏的下一页链接，供JS获取 -->
  {% if paginate.next %}
    <div class="pagination-next-container" style="display:none;">
      <a href="{{ paginate.next.url }}" id="next-page-url">{{ paginate.next.title }}</a>
    </div>
  {% else %}
    <div class="no-more-collections" style="display:none; text-align:center; margin-top:2rem; color:#666;">
      没有更多集合啦
    </div>
  {% endif %}
{% endpaginate %}

2. 添加无限滚动的JS逻辑 #

在模板末尾或者你的自定义JS文件里加这段代码：

document.addEventListener('DOMContentLoaded', function() {
  const collectionsContainer = document.getElementById('collections-container');
  let nextPageLink = document.getElementById('next-page-url');
  const noMoreMsg = document.querySelector('.no-more-collections');
  let isLoading = false;

  // 监听滚动事件
  window.addEventListener('scroll', function() {
    // 当滚动到距离底部200px时触发加载
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 200 && !isLoading && nextPageLink) {
      loadNextPage();
    }
  });

  // 加载下一页的核心函数
  async function loadNextPage() {
    isLoading = true;
    const nextUrl = nextPageLink.getAttribute('href');

    try {
      const response = await fetch(nextUrl);
      if (!response.ok) throw new Error('加载失败');
      const html = await response.text();

      // 解析返回的HTML，提取出新的Collections卡片
      const tempDiv = document.createElement('div');
      tempDiv.innerHTML = html;
      const newCollections = tempDiv.querySelector('#collections-container').innerHTML;

      // 把新卡片追加到列表里
      collectionsContainer.insertAdjacentHTML('beforeend', newCollections);

      // 更新下一页的URL
      const newNextLink = tempDiv.querySelector('#next-page-url');
      if (newNextLink) {
        nextPageLink.setAttribute('href', newNextLink.getAttribute('href'));
      } else {
        // 没有下一页了，隐藏链接，显示提示
        nextPageLink.parentElement.remove();
        nextPageLink = null;
        noMoreMsg.style.display = 'block';
      }
    } catch (error) {
      console.error('加载下一页出错:', error);
      // 这里可以加个错误提示，比如显示“加载失败，请重试”
    } finally {
      isLoading = false;
    }
  }

  // 可选：如果页面一开始就接近底部，自动触发加载
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 200 && !isLoading && nextPageLink) {
    loadNextPage();
  }
});

你还可以加个加载动画，比如在loadNextPage开始时显示个Spinner，用户体验会更好——比如在容器底部临时插入一个加载图标，加载完成后移除。

三、额外优化小 tips #

• 自定义排序：如果想让用户自己选排序方式（比如按标题、更新时间），可以结合URL参数，比如?sort=title，然后在模板里写{% paginate collections | sort: request.params.sort by 12 %}，再做个下拉菜单让用户选择。
• 性能优化：100多个Collections分成每页12个，初始加载的DOM元素少了，页面打开速度会快很多，对移动端用户友好。
• 移动端适配：调整滚动触发的阈值，比如移动端可以设成距离底部100px，避免用户需要滚到底部才触发。

内容的提问来源于stack exchange，提问作者Volodymyr Klymus