Ả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 để có thể tự thiếp lập ảnh customization. (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 ".cart-item__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. Mục đích là tìm block chứa tất cả chi tiết đơn hàng của sản phẩm bên trong trang giỏ hàng.

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.

`{% assign customizationId = item.properties.customization_id %}
{% if customizationId %}
  {% assign numberOfParts = customizationId | split: '-' | size %}
  {% capture customizationImage %}https://cdn.teeinblue.com/{% unless numberOfParts == 1%}platform-{% endunless %}customizations/{{customizationId }}.jpg{% endcapture %}
  <a href="{{customizationImage}}" class="tee-img-link" target="_blank" rel="noopener">
    <img class="tee-img-fluid" src="{{customizationImage}}" alt="artwork design" />
  </a>
{% 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:

{% assign customizationId = line.properties.customization_id %}
{% if customizationId %}
  {% assign numberOfParts = customizationId | split: '-' | size %}
  {% capture customizationImage %}https://cdn.teeinblue.com/{% unless numberOfParts == 1%}platform-{% endunless %}customizations/{{customizationId }}.jpg{% endcapture %}
  <a href="{{customizationImage}}" class="tee-img-link" target="_blank" rel="noopener">
    <img class="tee-img-fluid" src="{{customizationImage}}" alt="artwork design" />
  </a>
{% 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ẻ đó

{% assign customizationId = line.properties.customization_id %}
{% if customizationId %}
  {% assign numberOfPartss = customizationId | split: '-' | size %}
  {% capture customizationImage %}https://cdn.teeinblue.com/{% unless numberOfPartss == 1%}platform-{% endunless %}customizations/{{customizationId }}.jpg{% endcapture %}

  <img alt="artwork design" src="{{ customizationImage }}" align="left" width="60" height="60"/>
{% 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.

Hiện thị thiết kế trong trang Checkout

Kể từ năm 2023, Shopify không còn sử dụng file checkout.liquid để hiển thị Trang Checkout. Shopify đã chuyển sang Checkout Extensibility - một nền tảng thanh toán mới bảo mật hơn, hiệu quả hơn, an toàn hơn khi nâng cấp và tùy chỉnh bằng cách sử dụng ứng dụng.

Teeinblue hiện cũng tương thích với cách hoạt động mới này.

Tính năng Checkout Extensibility này chỉ hỗ trợ cho các store Shopify Plus.
Nếu store của bạn là Shopify Plus, hãy đi đến Store Settings > Customization Images > tìm For Checkout page block > và ấn vào nút Add app block



Sau đó, bạn sẽ được chuyển tiếp đến trang cài đặt Theme's Checkout Page.

Ở trang này, dưới phần Order Summary, hãy Ấn Add app block, và chọn Customization Image Preview



Khi bạn ấn vào Teeinblue block, bạn có thể chỉnh sửa mục Order Summary. Ví dụ, tên nút, cách hiển thị, etc.



Khi bạn hoàn tất, hãy kiểm tra lại kết quả bằng cách thêm 1 sản phẩm Teeinblue vào cart và checkout, ảnh preview sẽ hiện ra ngay!
Nếu bạn cần hỗ trợ, đừng ngần ngại liên hệ với team support nhé!

Cập nhật vào: 17/07/2024