Khắc phục sự cố - Lỗi hiển thị mô tả sản phẩm trên cửa hàng

Khi thêm nội dung từ các nguồn khác vào mô tả sản phẩm và bộ sưu tập, bạn có thể gặp một số lỗi hiển thị trên trang cửa hàng, chẳng hạn như:

Giao diện mô tả sản phẩm hiển thị xấu hoặc xô lệch.
Hình ảnh trong mô tả sản phẩm không hiển thị.
Video trong mô tả sản phẩm bị cắt một phần khi xem trên thiết bị di động.

Bài viết này sẽ tổng hợp danh sách các lỗi có thể xảy ra, cùng với hướng dẫn chi tiết cách khắc phục các lỗi giao diện thường gặp này, giúp bạn có thể tạo sản phẩm, chiến dịch hoặc bộ sưu tập mới thành công.

Nội dung bài viết

A. Giao diện mô tả sản phẩm hiển thị xấu hoặc xô lệch
B. Hình ảnh trong mô tả sản phẩm không hiển thị
C. Video trong mô tả sản phẩm bị cắt một phần khi xem trên thiết bị di động

A. Giao diện mô tả sản phẩm hiển thị xấu hoặc xô lệch

Ví dụ:

3 dấu phân cách được hiển thị giữa các phần nội dung trong mô tả sản phẩm, thay vì 1 dấu phân cách.


Mô tả sản phẩm hiển thị dưới dạng cửa sổ pop-up thay vì hiển thị bên phải hoặc bên dưới sản phẩm.


Nguyên nhân: Mô tả đã được sao chép từ một trang web khác có chứa các đoạn code HTML và CSS thừa.

Cách khắc phục: Có 2 cách để xử lý lỗi này.

Cách 01 (được khuyến khích cho người dùng không có nhiều kinh nghiệm với HTML và CSS): Để tránh lỗi, vui lòng chỉ sao chép và dán văn bản thuần túy (Plain text) vào mô tả và định dạng lại theo mong muốn bằng Trình chỉnh sửa mô tả của chúng tôi. Để chuyển đổi văn bản thành văn bản thuần túy, vui lòng truy cập editpad.org và làm theo các bước sau:

Sao chép đoạn văn bản bạn muốn sử dụng cho mô tả.
Mở editpad.org và dán đoạn văn bản mà bạn vừa sao chép.
Editpad.org sẽ tự động chuyển đổi văn bản của bạn thành văn bản thuần túy. Sao chép đoạn văn bản này và dán vào Trình chỉnh sửa mô tả trong trang quản trị ShopBase.



Cách 02 (được khuyến khích cho những người dùng đã có kinh nghiệm với HTML và CSS): Bạn có thể xóa đoạn code thừa trong Trình chỉnh sửa mô tả bằng các bước sau:

Đối với sản phẩm ShopBase, đi tới Sản phẩm (Products) > Tất cả sản phẩm (All products) và nhấp vào sản phẩm bạn muốn chỉnh sửa mô tả.


Nếu bạn sử dụng PrintBase, đi tới Chiến dịch (Campaigns) > Tất cả chiến dịch (All campaigns) và nhấp vào chiến dịch bạn muốn chỉnh sửa mô tả.


Nếu bạn sử dụng PlusBase, đi tới POD products > All campaigns và nhấp vào chiến dịch bạn muốn chỉnh sửa mô tả.


Nếu bạn muốn chỉnh sửa một bộ sưu tập, đi tới Sản phẩm (Products) > Bộ sưu tập (Collection) và nhấp vào bộ sưu tập bạn muốn chỉnh sửa mô tả.


Trong mục Mô tả (Description), nhấp vào biểu tượng mã nguồn </> để mở trình chỉnh sửa Source Code.


Trong cửa sổ Source Code, tìm các chuỗi có định dạng: class="......" và xóa các chuỗi thừa. (Ví dụ: class="product_collapse py12 brdr-bottom-1", class="product__description-html").

Ví dụ: Đoạn code gốc dưới đây chứa các chuỗi class = "......":

<div class="product_collapse py12 brdr-bottom-1">
<div class="toggle_content mt12">
<div class="product__description-html">
<div><img
src="https://img.btdmp.com/files/10051315/2019/11/26/1574762616068a6695e5.png"
alt=""/></div>

Sau đó, bạn sẽ cần phải xóa đoạn code thừa class="...". Đoạn code sau khi sửa sẽ trông như sau:

<div>
<div>
<div>
<div><img
src="https://img.btdmp.com/files/10051315/2019/11/26/1574762616068a6695e5.png"
alt=""/></div>

Nhấp vào Save để lưu mã nguồn của bạn.
Nhấp vào Lưu thay đổi (Save changes) để lưu thay đổi sau khi chỉnh sửa mô tả sản phẩm. Sau đó, bạn có thể nhấp vào Xem (View) để kiểm tra lại giao diện mô tả sản phẩm trên trang cửa hàng.

B. Hình ảnh trong mô tả sản phẩm không hiển thị

Ví dụ:


Nguyên nhân: Do hình ảnh đang được lưu trên hệ thống bên ngoài nên việc tải ảnh sẽ cần nhiều thời gian hơn. Ngoài ra, do bị phụ thuộc vào hệ thống bên ngoài, nên chất lượng hình ảnh sẽ không ổn định và trong một số trường hợp không thể tải được hình ảnh.

Cách khắc phục: Để đảm bảo tốc độ tải hình ảnh trên trang cửa hàng và giúp khách hàng có trải nghiệm xem và mua hàng tốt hơn, bạn nên tải lại hình ảnh lên ShopBase theo 3 bước sau:

Đối với sản phẩm ShopBase, đi tới Sản phẩm (Products) > Tất cả sản phẩm (All products) và nhấp vào sản phẩm bạn muốn chỉnh sửa mô tả.


Nếu bạn sử dụng PrintBase, đi tới Chiến dịch (Campaigns) > Tất cả chiến dịch (All campaigns) và nhấp vào chiến dịch bạn muốn chỉnh sửa mô tả.


Nếu bạn sử dụng PlusBase, đi tới POD products > All campaigns và nhấp vào chiến dịch bạn muốn chỉnh sửa mô tả.


Nếu bạn muốn chỉnh sửa một bộ sưu tập, đi tới Sản phẩm (Products) > Bộ sưu tập (Collection) và nhấp vào bộ sưu tập bạn muốn chỉnh sửa mô tả.


Trong Mô tả (Description), xóa hình ảnh bị lỗi.

Nhấp vào vị trí bạn muốn chèn hình ảnh và nhấp vào nút Insert/Edit Image .


Trong hộp thoại Insert/Edit Image, tải hình ảnh từ thiết bị của bạn và nhấp vào Save.


Nhấp vào Lưu thay đổi (Save changes) để lưu thay đổi sau khi chỉnh sửa mô tả sản phẩm. Sau đó, bạn có thể nhấp vào Xem (View) để kiểm tra lại giao diện mô tả sản phẩm trên trang cửa hàng.


Nếu lỗi mà bạn đang gặp phải không được liệt kê ở trên, hoặc không có hướng dẫn nào ở trên khắc phục được lỗi đó, vui lòng liên hệ với Đội hỗ trợ khách hàng của ShopBase để được hỗ trợ thêm.

C. Video trong mô tả sản phẩm bị cắt một phần khi xem trên thiết bị di động

Ví dụ:


Nguyên nhân: Các video có nhiều kích thước khác nhau có thể không phản hồi tốt trên thiết bị di động.

Cách khắc phục: Bạn sẽ cần chỉnh sửa mã nguồn trong trang sản phẩm và trong mục Preference bằng cách làm theo các bước bên dưới:

Đối với sản phẩm ShopBase, đi tới Sản phẩm (Products) > Tất cả sản phẩm (All products) và nhấp vào sản phẩm bạn muốn chỉnh sửa mô tả.


Nếu bạn sử dụng PrintBase, đi tới Chiến dịch (Campaigns) > Tất cả chiến dịch (All campaigns) và nhấp vào chiến dịch bạn muốn chỉnh sửa mô tả.


Nếu bạn sử dụng PlusBase, đi tới POD products > All campaigns và nhấp vào chiến dịch bạn muốn chỉnh sửa mô tả.


Nếu bạn muốn chỉnh sửa một bộ sưu tập, đi tới Sản phẩm (Products) > Bộ sưu tập (Collection) và nhấp vào bộ sưu tập bạn muốn chỉnh sửa mô tả.


Trong mục Mô tả (Description), nhấp vào biểu tượng mã nguồn </> để mở trình chỉnh sửa Source Code.


Trong Source Code, đi tới đoạn mã sau:

<p><iframe src="https://www.youtube.com/embed/example-video-link" width="xxx" height="xxx" allowfullscreen="allowfullscreen"></iframe></p>

Thay thế bằng đoạn code sau:

<p class="custom-description-mobile-video"><iframe src="https://www.youtube.com/embed/example-video-link" width="xxx" height="xxx" allowfullscreen="allowfullscreen"></iframe></p>

Chiều rộng và chiều cao của video trong đoạn code của bạn có thể khác nhau.
Ví dụ: nếu đoạn code của bạn là <p><iframe src="https://www.youtube.com/embed/Sk1y14kX9sc?ab_channel=YUMMY" width="560" height="314" allowfullscreen="allowfullscreen"></iframe></p>, thay thế bằng <p class="custom-description-mobile-video"><iframe src="https://www.youtube.com/embed/Sk1y14kX9sc?ab_channel=YUMMY" width="560" height="314" allowfullscreen="allowfullscreen"></iframe></p>


Nhấp vào Save để lưu mã nguồn của bạn.
Nhấp vào Lưu thay đổi (Save changes) để lưu thay đổi sau khi chỉnh sửa mô tả sản phẩm.
Đi tới Cửa hàng (Online store) > Cài đặt ưu tiên (Preferences).


Trong mục Scripts bổ sung (Additional scripts), Đầu (Head), thêm thẻ sau:

<style>
    @media (max-width: 768px) {
        .custom-description-mobile-video {
          position: relative; 
          padding-bottom: 56.25%;
          padding-top: 35px; 
          height: 0; 
          overflow: hidden;
        }
        .custom-description-mobile-video iframe {
          position: absolute; 
          top: 0; 
          left: 0; 
          width: 100%; 
          height: 100%;
        }
    }
</style>

Nhấp vào Lưu (Save) để hoàn thành.

Bài viết liên quan

Tổng quan về sản phẩm
Tổng quan về Chiến dịch tại PrintBase & ShopBase

Cập nhật vào: 06/02/2023