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

Binance Launchpad có dễ… húp như bạn tưởng

Tiền kỹ thuật số (cryptocurrency) đang dần mở rộng. Kể ra mình biết khái niệm này từ rất lâu. Nếu các bạn là độc...

10 Công Cụ Có Thể Thay Thế ChatGPT

ChatGPT là một mô hình ngôn ngữ lớn được phát triển bởi OpenAI. Nó cung cấp các câu trả lời nhanh chóng và ngắn...

Hướng Dẫn Đăng Ký Nhận Mã Giảm Giá Highland Coffee

Highland Coffee đang có nhiều chương trình khuyến mã cho khách hàng của mình. Các khuyến mãi có thể bao gồm upsize, mua 1...

Quà cuối năm 2022 từ Shopify

Năm nay nhận quà từ các đối tác công nghệ hơi bị nhiều. Mới đây mình lại nhận được quà từ Shopify. Quà về đúng...

Nhận quà từ đối tác công nghệ Recharge

Recharge là một trong những công ty chuyên cung cấp giải pháp bán hàng đăng ký định kỳ (subscription payments) cho các nền tảng...

BẠN XEM CHƯA

Nói gì với người yêu cũ để “nó” phải “đứng hình”

1. "Anh sẽ không bao giờ tìm thấy một cô gái xinh đẹp nhưng mắt lại bị mù như tôi nữa đâu." 2. "Cảm ơn...

Một số ưu đãi của Shopify cho người dùng đăng ký mới

Shopify chỉ cho phép người dùng mới 14 ngày dùng thử miễn phí. Nếu bạn cảm thấy khoảng thời gian này là không đủ...

Chúc ngủ ngon 1

Ta ơi ngủ đi mai còn thức dậy! Ngắm mặt trời rực rỡ bước qua mây, Ru mộng say và quên buồn nơi ấy, Tắm tâm hồn...

Tạo một banner quảng cáo luân phiên tự động với PHP

Banner quảng cáo luân phiên tự động được hiểu đơn giản là bạn sẽ cung cấp cho hệ thống nhiều banner quảng cáo khác...

Hướng dẫn tạo ảnh hoạt hình từ ảnh thật với ToonMe

Bạn có tò mò muốn biết bản thân mình sẽ như thế nào khi trong vai một nhân vật hoạt hình không? Không cần...