Bài viết này cũng có sẵn trong:

Thêm nút phóng to ảnh Design trong trang giỏ hàng

Bài viết này hướng dẫn bạn thêm nút "Preview Design" vào trang giỏ hàng để phóng to Customization Image.

Sau khi click vào nút, khách hàng sẽ thấy như sau:

Hãy đọc tiếp để biết cách thiết lập. Các bước dưới đây yêu cầu một chút kiến thức về code. Nếu gặp khó khăn trong quá trình thực hiện, bạn có thể liên hệ đội ngũ Support của chúng tôi.

Thêm nút "Preview design" vào trang giỏ hàng

BƯỚC 1: Bật cài đặt hiển thị nút "Preview design" trong Teeinblue Portal

Đăng nhập Teeinblue Portal, vào Store settings > Customization image > bật cài đặt hiển thị nút "Preview design".

BƯỚC 2: Xác định class cho vị trí đặt ảnh design đã render

Vào trang giỏ hàng > click chuột phải > Inspect vào sản phẩm trong giỏ hàng.

Cửa sổ Developer Tools sẽ hiện ra và tự động xác định các thẻ HTML chứa thông tin chi tiết của line item:

Tìm class có tên ".cart-item__details". Double click vào ".cart-item__details" rồi copy lại.

Mỗi theme sẽ có tên class khác nhau. Mục đích của bước này là tìm ra khối (block) chứa toàn bộ line item của sản phẩm trong trang giỏ hàng.

BƯỚC 3: Thêm đoạn code của Teeinblue vào trang giỏ hàng

Đăng nhập vào Shopify Admin của bạn, vào Online Store > Edit code.

Tìm và mở file Liquid chứa nội dung trang giỏ hàng của bạn. Ví dụ, với theme Dawn, bạn sẽ tìm file main-cart-items.liquid.

Trong file main-cart-items.liquid, nhấn tổ hợp phím Ctrl + F (với macOS là Command + F) để mở ô tìm kiếm, rồi dán ".cart-item__details" vào ô đó để tìm class.

Tại vị trí đó, tìm thẻ <ul> gần nhất. Hệ thống sẽ highlight dòng chứa thẻ <ul> và thẻ </ul> tương ứng. Cuộn xuống và tìm thẻ </ul> đang được highlight.

Thêm đoạn code dưới đây vào ngay bên dưới thẻ \*\*</ul>\*\*. Sau đó Save lại để kích hoạt hiển thị design trong giỏ hàng.

{% assign customization_id = item.properties._customization_id %}
{% if customization_id %}
  <div
    class="tee-preview-design"
    data-customization-id="{{ customization_id }}"
  ></div>
{% endif %}

QUAN TRỌNG: Tùy theo theme, sản phẩm trong giỏ hàng có thể được hiển thị dưới dạng line hoặc item khác nhau. Để thêm code cho đúng, hãy nhấn Ctrl + F (Command + F với macOS) và tìm một trong các cụm "for line in cart", "for item in cart" hoặc "for line_item in cart".

Nếu kết quả tìm kiếm là "for item", sản phẩm được hiển thị dưới dạng item.
➡ Dùng đoạn code ở trên như bình thường.

Nếu kết quả tìm kiếm là "for line", nghĩa là sản phẩm trong giỏ hàng của bạn được hiển thị dưới dạng line.
➡ Thay "item" trong đoạn code ở trên thành "line", như sau:

{% assign customization_id = line.properties._customization_id %}
{% if customization_id %}
  <div
    class="tee-preview-design"
    data-customization-id="{{ customization_id }}"
  ></div>
{% endif %}

Nếu kết quả tìm kiếm là "for line_item", sản phẩm được hiển thị dưới dạng line_item ➡ Thay "item" trong đoạn code thành "line_item", như sau:

{% assign customization_id = line_item.properties._customization_id %}
{% if customization_id %}
  <div
    class="tee-preview-design"
    data-customization-id="{{ customization_id }}"
  ></div>
{% endif %}

Save lại, nút "Preview design" sẽ xuất hiện trên trang giỏ hàng của bạn.

Dịch nhãn (label) của các nút

Vào Store settings > Product Page Content. Phần dịch của các nút nằm trong mục Cart.

Nếu bạn gặp khó khăn khi làm theo hướng dẫn này, vui lòng liên hệ với chúng tôi để được hỗ trợ thêm.

Cập nhật vào: 01/11/2026

Bài viết có hữu ích không?

Cảm ơn!