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ư:
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


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:

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:

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

</>
để mở trình chỉnh sửa Source Code.
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>

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


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




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


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

</>
để mở trình chỉnh sửa Source Code.
<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>

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