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

Thế nào là giàu có

Trong 1 lần Elon Musk làm diễn giả cho một hội nghị ở Hoa Kỳ về đầu tư và tài chính, phần hỏi đáp,...

Hướng dẫn nộp thuế trực tuyến qua ứng dụng MB Bank

Ở bài viết trước mình đã chia sẻ Hướng dẫn khai báo thuế TNCN trực tuyến cho cá nhân mảng kinh doanh nội dung...

Hura Apps lọt vào Vòng ươm tạo của chương trình Tuyển chọn và ươm tạo các ý tưởng, dự án đổi mới sáng tạo...

Ngày 01/11/2021 vừa qua Hura Apps cùng với 10 dự án khác của tỉnh Bình Định đã được lọt vào Vòng ươm tạo trong...

Pinterest Tạo Ra Cơn Sốt Livestream Mua Sắm Trên Pinterest TV

Vào ngày 29/10 vừa qua, Pinterest đã ra mắt Pinterest TV cùng với 1 series mua sắm trực tuyến do chính các nhà sáng...

Cách ẩn nhãn Google reCaptcha trên trang web sử dụng reCaptcha v3

Nếu là dân lập trình web thì Google reCaptcha hẳn không quá xa lạ. Nó giúp chặn các spammer thực hiện các hành động...

BẠN XEM CHƯA

Pornhub tặng tài khoản premium cho người dùng Italia để… chống dịch Covid-19

Để ủng hộ Italia trong công cuộc chiến đấu với đại dịch Covid-19, Pornhub đã quyết định tặng miễn phí dịch vụ premium của...

Khắc phục lỗi không copy được văn bản trong Photoshop

Photoshop mình gặp tình trạng thỉnh thoảng không copy được văn bản (text) từ layer. Thông báo lỗi mỗi khi cố gắng thực hiện...

Nhìn lại thế giới năm 2013 qua con mắt của Google

Vậy là chỉ còn khoảng hơn 2 tuần nữa là kết thúc năm 2013 và bước sang năm mới 2014. Cùng nhìn lại thế...

Facebook có thể ra mắt ví điện tử trong năm nay

Facebook đã sẵn sàng ra mắt ví điện tử phép người dùng lưu trữ tiền điện tử ngay trong năm nay. Đó là chia...

Website công ty gạch Tuy Nen – Bình Định bị hacker hỏi thăm

Theo thông tin tìm hiểu và quan sát được thì dường như trang web của Công ty cổ phần gạch Tuy Nen Bình Định...