Giới thiệu

Trong thị trường thương mại điện tử ngày nay, việc tạo ra trải nghiệm người dùng tốt nhất là một yếu tố quyết định cho sự thành công của một cửa hàng trực tuyến. Một trong những tính năng hữu ích mà nhiều khách hàng mong muốn là khả năng thêm sản phẩm vào danh sách yêu thích (wishlist). Trong bài viết này, chúng ta sẽ tìm hiểu cách thêm biểu tượng tim wishlist vào hình ảnh sản phẩm trên theme Prestige của Shopify.

Mục tiêu cuối cùng

Khi bạn hoàn thành các bước trong hướng dẫn này, biểu tượng tim sẽ xuất hiện ở góc trên bên phải của hình ảnh sản phẩm, cho phép người dùng dễ dàng thêm hoặc xóa sản phẩm khỏi danh sách yêu thích.

Bước 1 — Mở tệp snippets/product-gallery.liquid

Để bắt đầu, bạn cần truy cập vào trang quản trị Shopify của mình:

Vào Cửa hàng trực tuyến → Chủ đề → Chỉnh sửa mã.
Trong trình chỉnh sửa mã, mở tệp snippets/product-gallery.liquid.

Bước 2 — Chèn nút Wishlist

Trong phần mã, bạn sẽ thêm mã HTML cho nút wishlist. Tìm đến phần có class product-gallery__image-list và chèn mã sau vào vị trí mong muốn:

liquid Copy

<ooo-wl-wishlist-button product-id="{{ product.id }}" handle="{{ product.handle }}" loading>
    <button type="button">
      {%- render 'icon' with 'heart', class: 'header__nav-icon' -%}
    </button>
    <p>Bạn đã có sản phẩm trong danh sách yêu thích.</p>
</ooo-wl-wishlist-button>

Lưu ý:

Bạn có thể điều chỉnh các giá trị CSS trong phần định dạng của mã để tùy biến vị trí của biểu tượng cho phù hợp với thiết kế của bạn.

Bước 3 - Thêm biểu tượng tim vào tệp icon.liquid

Tiếp theo, bạn cần thêm mã SVG cho biểu tượng tim vào danh sách biểu tượng. Mở tệp snippets/icon.liquid và thêm mã dưới đây vào phần {%- case icon -%}:

liquid Copy

{%- when 'heart' -%}
    <svg aria-hidden="true" focusable="false" fill="none" width="{{ width | default: 24 }}" class="{{ class | strip }}" viewBox="0 0 24 24">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.8482 21.0168C9.19102 19.8759 5.28668 16.1772 3.59901 13.4543C1.5836 10.2027 1.66699 7.42205 2.78053 5.5474C4.68111 2.34888 9.35958 1.94464 12.0001 5.58663C14.6406 1.94489 19.319 2.34863 21.2194 5.54765C22.3332 7.42231 22.4163 10.2029 20.4009 13.4546C18.6346 16.304 14.779 19.8891 12.0001 21.0818L11.8482 21.0168Z" stroke="currentColor" stroke-width="{{ stroke_width | default: settings.icon_stroke_width }}" stroke-miterlimit="10" stroke-linecap="round"/>
    </svg>

Bước 4 — Lưu và Xem trước

Sau khi bạn đã lưu tất cả các tệp, hãy làm mới trang sản phẩm để xem biểu tượng tim đã được thêm vào hình ảnh sản phẩm.

Khi nhấp vào biểu tượng tim, sản phẩm sẽ được thêm hoặc xóa khỏi danh sách yêu thích.
Khi biểu tượng hoạt động, nó sẽ được tô màu; khi không hoạt động, nó sẽ chỉ có viền.

Thực hành tốt nhất

Kiểm tra kỹ lưỡng: Sau khi thêm mã, hãy kiểm tra trên nhiều thiết bị và trình duyệt khác nhau để đảm bảo tính tương thích.
Tùy chỉnh CSS: Dành thời gian để tùy chỉnh CSS cho nút wishlist để nó hòa hợp với giao diện tổng thể của cửa hàng.
Cập nhật mã thường xuyên: Luôn cập nhật mã của bạn theo những thay đổi của Shopify để đảm bảo tính ổn định.

Những lỗi thường gặp

Biểu tượng không hiển thị: Kiểm tra lại mã đã được chèn đúng vị trí chưa và không có lỗi chính tả.
Không hoạt động khi nhấp: Đảm bảo rằng mã JavaScript liên quan đã được tích hợp và không có xung đột với các mã khác.

Mẹo hiệu suất

Sử dụng hình ảnh SVG cho biểu tượng để đảm bảo độ sắc nét và tải trang nhanh hơn.
Giảm thiểu mã CSS và JavaScript để cải thiện thời gian tải trang.

Kết luận

Chúc mừng! 🎉 Bạn đã hoàn thành việc thêm biểu tượng tim wishlist vào hình ảnh sản phẩm trên theme Prestige. Tính năng này không chỉ giúp tăng cường trải nghiệm người dùng mà còn khuyến khích khách hàng quay lại cửa hàng của bạn. Nếu bạn muốn tìm hiểu thêm về việc tùy chỉnh các thành phần web khác trong Shopify, hãy tham khảo tài liệu đầy đủ tại đây: Tài liệu nút wishlist.

Câu hỏi thường gặp

Làm thế nào để thay đổi vị trí của biểu tượng tim?

Bạn có thể điều chỉnh các giá trị CSS trong mã để thay đổi vị trí của biểu tượng theo ý muốn.

Tôi có thể sử dụng biểu tượng khác không?

Có, bạn có thể thêm nhiều biểu tượng khác bằng cách làm theo quy trình tương tự như trên.

Có cần kiến thức lập trình để thực hiện không?

Có, bạn cần có kiến thức cơ bản về Liquid và CSS để thực hiện những thay đổi này.

Cách Thêm Biểu Tượng Tim Wishlist Vào Hình Ảnh Sản Phẩm Trên Prestige