Trang chủ Lập trình Shopify Liquid Hướng dẫn thêm tính năng cuộn vô hạn cho cửa hàng Shopify

Hướng dẫn thêm tính năng cuộn vô hạn cho cửa hàng Shopify

Nếu cửa hàng của bạn có nhiều sản phẩm trong một bộ sưu tập trên cửa hàng Shopify của bạn, thay vì khiến khách hàng phải truy cập nhiều trang sản phẩm để xem thì bạn có thể thêm tính năng cuộn vô hạn (infinite scroll) vào các trang bộ sưu tập Shopify của mình để khách hàng có thể tiếp tục tải thêm sản phảm mà không cần chuyển trang.

Tính năng cuộn vô hạn giúp thu hút sự chú ý của khách hàng. Nó cải thiện trải nghiệm người dùng và giúp duyệt các trang dễ dàng hơn. Thao tác cuộn dễ dàng hơn đối với người dùng so với việc nhấp chuột (rồi cuộn lại) vì yêu cầu ít thao tác hơn. Cuộn vô hạn cho phép người dùng tìm thấy nội dung mà họ có thể không thấy. Khách truy cập của bạn càng thấy nhiều sản phẩm thì càng có nhiều cơ hội mua hàng của bạn.

Trên Shopify App Store có nhiều ứng dụng giúp bạn thiết lập tính năng này cho cửa hàng của mình. Nhưng nếu bạn có kỹ năng lập trình, bạn có thể tự mình thiệt lập tính năng này này theo cách thủ công. Hãy tham khảo các bước dưới đây:

  • Trong trang quản trị viên Shopify của bạn, bạn mở Online Store > Theme.
  • Tìm đến chủ đề bạn muốn chỉnh sửa, sau đó nhấp vào Action > Edit code.
  • Trong phần Layout, nhấp vào theme.liquid để mở tập tin này trong trình chỉnh sửa mã trực tuyến.
  • Tìm đến thẻ </head> và dán đoạn mã dưới đây vào ngay phía trên nó.
  • Bạn bấm nút Save.
  • Tiếp đó bạn hãy mở template của trang collection và tìm đến vòng lặp {% for product in collection.products %} và thêm 1 thẻ DIV bao và thêm nhiều thẻ DIV ngay bên dưới thẻ đó. Ví dụ:
  • Thêm tiếp đoạn mã javascript vào cuối tập tin đó
  • Click Save và bạn đã hoàn thành.

Chúc các bạn thành công.

- Advertisement -
Huỳnh Mai Anh Kiệthttps://www.mangbinhdinh.vn
Anh là một người đam mê công nghệ. Hiện tại anh là một lập trình viên tại Quy Nhơn.

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

BÀI VIẾT MỚI

Hướng dẫn tra cứu vi phạm giao thông của tỉnh Bình Định trên Zalo

Bắt đầu từ ngày 14.6, Sở Thông tin và Truyền thông tỉnh Bình Định cung cấp dịch vụ tra cứu vi phạm giao thông...

Hướng dẫn tích hợp cửa sổ Zalo chat vào trang web

Zalo là mạng xã hội mà nhiều người Việt đang sử dụng trên mobile. Và xu hướng người dùng sử dụng mobile để lướt...

Google xóa bỏ lệnh cấm năm 2018 đối với Ví tiền Điện tử và Trao đổi Quảng cáo

Mới đây, Google đã dỡ bỏ một chính sách kéo dài gần ba năm của mình đó là lệnh cấm các sàn giao dịch...

Hướng dẫn thêm tính năng cuộn vô hạn cho cửa hàng Shopify

Nếu cửa hàng của bạn có nhiều sản phẩm trong một bộ sưu tập trên cửa hàng Shopify của bạn, thay vì khiến khách...

Dùng hàm alert() cho một mảng trong JavaScript

Thường khi code mình hay debug trong JavaScript bằng hàm alert() hoặc console.log(). Trong đó console.log() được dùng nhiều hơn cả vì nói chung...

BẠN XEM CHƯA

Vay tiền thấy lòng người, trả tiền rõ nhân phẩm

1. Cuộc đời một con người, thế nào cũng có lúc cần dùng tiền gấp, người có thể sẵn lòng cho bạn vay tiền...

Trang web hẹn hò dành cho những người đàn ông… chim bé

DinkyOne (www.dinkyone.com), một trang web hẹn hò mới, với mục tiêu chống lại định kiến "nam tính độc hại" và giúp những quý ông...

10 plugin tạo widget giúp sidebar trang WordPress của bạn trở nên chuyên nghiệp hơn

idebar (thanh bên) là nơi để bố trí các thành phần để giúp người dùng tiếp cận nhanh hơn các thành phần của web....

Kiểm tra hiệu năng và bảo mật của trang web với công cụ trực tuyến mới từ Microsoft – Sonar

Mới đây nhóm phát triển Edge của Microsoft vừa cho ra mắt một công cụ trực tuyến mới mang tên Sonar. Sonar là công...

Công cụ chuyển đổi định dạng video để xem trên thiết bị cầm tay

Có rất nhiều công cụ giúp bạn chuyển đổi qua lại giữa các định dạng video. Tuy nhiên bạn cũng cần phải thiết lập...