跳转至主要内容

Shopify Dawn 等官方主题 产品系列页面滚动自动加载更多商品

点击这里查看视频教程

增强版主题已添加此功能,可以直接迁移到增强版,拥有全部功能

这次的教程我将教你如何在 Dawn 主题中添加 产品系列页面 滚动加载更多商品的功能,也就是当客户浏览到接近网页底部时,自动加载和显示下一页的商品,省去点击数字页码或者下一页按钮的操作,提升用户体验和店铺订单转化率。

本教程在 Dawn 上测试和演示,同样适用于 Shopify 后续发布的 Ride, Sense, Crave, Craft, Studio, Taste, Colorblock, Ride 等主题。如果你看到的主题文件代码跟视频中演示的一样,那基本就能实现。

第 143 期 一元开店 低成本拥有你自己的 Shopify 店铺
打造属于自己的Shopify网店,无需任何编程技能。这个网址提供了一键式 Shopify 店铺搭建服务,只需低成本就可以立即拥有属于自己的专业电子商务平台。限时福利:既可用于创建新的店铺,也可以创建测试店铺(例如免费试用插件 APP 等),避免测试插件时代码残留在主题中,拖慢店铺网速。

以下内容仅对 SVIP 开放,并增加点击按钮加载更多产品的修改方法,可自由选择滚动到页面底部自动加载更多,还是客户点击 Load More 按钮加载。

[SVIP 2.0] 37th 产品系列点击加载更多并提示已展示商品数量
两年多前发布过 Shopify 产品系列滚动到底部自动加载更多商品,这样客户就不用去点击小页码进入下一页,特别是在移动端,页码较小,不方便点击,改成自动加载更多商品能够提升用户体验,点击这里查看当时的演示视频。 本期教程在之前的基础上进一步优化,提供另一种选择,让客户点击 Load More 按钮再加载下一页的商品,同时还会显示目前已经展示了产品系列中的多少款商品,例如: Showing 16 products of 60 products 点击 Load More 之后数值也会自动更新。 到达当前产品系列最后一页时,会自动隐藏按钮并提示客户: You’ve reached the…