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://anhkiet.biz
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 cho Hura Apps - một startup nhỏ về công nghệ 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

Trang web hỗ trợ tìm kiếm trên Facebook

Facebook là mạng xã hội lớn nhất hiện nay. Thông tin được người dùng chia sẻ trên mạng xã hội này là vô cùng...

Giới thiệu một số công nghệ, dịch vụ mà Hura Apps đang dùng cho mô hình SaaS

Hura Apps là nhóm phát triển các ứng dụng web hỗ trợ cho nền tảng Shopify. Hura Apps hoạt động theo mô hình SaaS....

Hành trình kiếm 500 triệu/tháng từ việc xuất bản ứng dụng lên Shopify App Store

Đây là câu chuyện của một lập trình viên người Pháp có tên Axel Hardy được chính anh chia sẻ trên Twitter của mình....

Hura Apps nhận được gói hỗ trợ khởi nghiệp $10.000 từ Amazon Web Services

Mới đây Hura Apps đã nhận được gói hỗ trợ khởi nghiệp $10.000 từ Amazon Web Services. Đây là gói hỗ trợ dành cho Hura...

PayPal đang phát triển đồng stablecoin của riêng mình

Công ty PayPal đang tích cực làm việc để ra mắt stablecoin của riêng mình như là một phần của việc thúc đẩy sử...

BẠN XEM CHƯA

Trợ thủ nhắc việc Notefly

Nếu bạn là người hay quên thì những mẫu ghi chú nhỏ (sticky note) thật sự là phương thuốc hay. Với những người thường...

Mạng Bình Định chúc mừng năm mới 2016 đến Quý độc giả

Kính thưa Quý độc giả, Nhân dịp tết Nguyên Đán Xuân Bính Thân 2016, Mạng Bình Định xin trân trọng gửi đến Quý độc giả...

Xử lý hình không thích trên Facebook

Khi đăng các hình ảnh chụp cá nhân lên Facebook, có thể bạn sẽ nhận được lời đề nghị của bạn bè hoặc người...

Steam không còn hỗ trợ thanh toán bằng Bitcoin

Sự phát triển của Bitcoin có thể mang đến lợi nhuận cho một số người nhưng nó lại gây ra vấn đề nan giải...

Hướng dẫn cách xác định chính xác vị trí của người dùng trên trình duyệt bằng Javascript

Mình đã từng viết 1 bài hướng dẫn bạn cách xác định vị trí của mình bằng IP đang sử dụng. Tuy nhiên cách...