Ảnh Customization là gì?

Ảnh Customization là ảnh thumbnail, mà trong đó bao gồm toàn bộ các lựa chọn customize của khách hàng



Sau khi khách hàng hoàn thành quá trình customize sản phẩm, và add to cart, họ sẽ muốn được thấy các lựa chọn của mình.
Mặc định, teeinblue sẽ tự động thay thế ảnh thumbnail từ Theme của bạn, và show ảnh customization trong Cart Page.

Ảnh Customization có thể được show trong Cart Page, Cart Drawer, và các email templates của Shopify.
Trong trường hợp bạn không thấy ảnh customization của teeinblue, hãy đọc tiếp bài viết này để biết cách tự add chúng. (Sẽ cần một chút kĩ năng về HTML)


Chúng tôi đã chuẩn bị sẵn phần code riêng giúp bạn hiển thị ảnh thiết kế hoàn chỉnh sau khi khách chọn xong (customization design)

Trong bài hướng dẫn này, chúng tôi sẽ giúp bạn các thêm phần Customization design này vào trang Giỏ Hàng và trong Email Xác Nhận Đơn Hàng
Nếu bạn cần thêm phần ảnh này ở các trang khác, hãy trực tiếp liên hệ với chúng tôi

Hiển thị thiết kế trong Giỏ Hàng

Bước 1: Xác định class cho thiết kế sau khi đã render

Bạn cần đến trang Giỏ Hàng > Ấn chuột phải > Chọn inspect sản phẩm trong giỏ hàng



Phần công cụ dành cho dev sẽ hiện ra và sẽ tự động phát hiện các thẻ HTML ở trong bộ sưu tập (gallery) mà bạn đã chọn



Tìm class "product-details", ấn đúp chuột vào từ này và sao chép nó



Lưu ý: tên class có thể sẽ khác với tên theme

Bước 2: Thêm mã script của teeinblue vào giỏ hàng

Đăng nhập vào store Shopify admin > Đi đến trang Themes > Chỉnh sửa code



Tìm phần có tên "cart.liquid". Nếu không có nội dung nào trong cart.liquid, vui lòng tìm kiếm phần "cart-template.liquid".





Trong cart-template.liquid, nhấn tổ hợp phím Ctrl + F (Đối với hệ thống iOS, là Command + F) để thanh tìm kiếm, sau đó dán cụm từ "product-details" vào thanh tìm kiếm để tìm kiếm class



Nhấp vào cụm từ "product-details" đầu tiên trên dòng <ul class>, bạn sẽ thấy dòng <ul> và thẻ </ul> của nó được đánh dấu (highlight). Cuộn xuống và tìm mục được đánh dấu </ul>.



Thêm mã script sau ngay dưới </ul>. Sau đó ấn Save để kích hoạt thiết kế trong giỏ hàng.

{% if item.properties.customization_id %}
  {% capture customization_image %}https://cdn.teeinblue.com/customizations/{{ item.properties.customization_id }}.jpg{% endcapture %}
  <img class="tee-img-fluid" src="{{ customization_image }}" alt="artwork design" />
{% endif %}

Vì sản phẩm trong giỏ hàng có thể được hiển thị theo dòng hoặc theo item khác nhau tùy vào từng theme, để thêm mã script một cách chính xác, vui lòng nhấn Ctrl + F (Command + F đối với iOS) và tìm kiếm giữa "for line in cart" hoặc "for item in cart" hoặc "for line_items in cart".



Nếu kết quả tìm kiếm là "for item", có nghĩa là sản phẩm đang được hiển thị theo mặt hàng.
-> Bạn có thể sử dụng script trên bình thường.

Nếu kết quả tìm kiếm là "for line", điều đó cho thấy rằng sản phẩm trong giỏ hàng của bạn được hiển thị theo hàng
-> Bạn có thể thay thế từ "item" trong script trên thành "line" theo cách này:

{% if item.properties.customization_id %}
  {% capture customization_image %}https://cdn.teeinblue.com/customizations/{{ item.properties.customization_id }}.jpg{% endcapture %}
  <img class="tee-img-fluid" src="{{ customization_image }}" alt="artwork design" />
{% endif %}

Nếu kết quả tìm kiếm là "for line_item", có nghĩa là sản phẩm đang được hiển thị theo** line_item**. -> Bạn cần thay đổi "item" trong script thành "line_item".

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.

Lưu ý: Từ tháng 06 - 2022, Shopify ra quy định mới về Lighthouse speed. Nếu bạn sử dụng tính năng Cart Drawer, hay Flyout Cart, thì bây giờ, ảnh Customization của teeinblue sẽ chỉ được show trong trang product page của teeinblue.

Hiển thị thiết kế trong email xác nhận

Phương pháp này sẽ hoạt động đối với các mẫu email cơ bản của Shopify. Nếu bạn sử dụng email của bên thứ ba, cách này có thể sẽ không hoạt động.

Bước 1: Vào Shopify Settings > Notifications > Order confirmation

Bước 2: Cuộn xuống dưới và tìm dòng "{% for line in subtotal_line_items %}"

Bước 3: Cuộn xuống và tìm thẻ </td> gần nhất. Sau đó, thêm mã script bên dưới dưới thẻ đó

{% if line.properties.customization_id %}
  {% capture customization_image %}https://cdn.teeinblue.com/customizations/{{ line.properties.customization_id }}.jpg{% endcapture %}
  <div>
    <img src="{{ customization_image }}" alt="artwork design" style="max-width: 100%; height: auto; vertical-align: middle;" />
  </div>
{% endif %}

Bước 4: Hãy nhớ ấn "Save" sau khi chỉnh sửa script email

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: 20/09/2022