Ả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.

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ó

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 %}

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".

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

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.

• 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!

Hiển thị design ở trang Thank You và Order Status

• Đi đến Shopify Online Store > Theme > Customize

• Tiếp tục chọn trang Checkout and customer accounts

CHÚ Ý: Bên trong Teeinblue portal, bạn cũng có thể đi đến phần Store Setting > Customization Image > và chọn mục tương ứng để nhanh chóng mở phần tương ứng trên Shopify.

• Tiếp tục đi đến phần Apps > Teeinblue Product Personalizer > Customization Image Preview > Chọn trang mà bạn muốn thêm nút Preview Image.

• Hãy chắc chắn là bạn đã điền đầy đủ các thông tin cần thiết ở đây, tùy theo cách hiển thị mà bạn muốn

• Khi bạn đã hoàn thành, hãy tạo một order để kiểm tra. Trên trang Thank You, nút này sẽ hiển thị như dưới đây:

Cập nhật vào: 11/04/2025