产品详情页常见故障处理方法
当从其他地方将内容粘贴到产品或专辑详情，我们会难免遇到各种各样的问题。例如：
产品描述不整齐，不完整
图片不显示
视频在移动端显示不完整
我们列出一些常见故障和处理方法。
A. 产品描述不整齐，不完整
B. 图片不显示
C. 视频在移动端显示不完整
例如：
产品详情显示三条分割线，正常显示一条。
产品描述内容是弹出式，正常显示在产品下面或右边。
原因：内容从其他网站复制粘贴过来，含有多余的 HTML、CSS代码。
处理方法：有两种处理方法。
方法一 （适合对HTML 和 CSS不熟悉的用户）：只复制，粘贴纯文本（plain text）内容，使用后台内置的编辑器来修改格式。使用 editpad.org 将文本转换成纯文本。
复制想要添加的文本。
打开 editpad.org，将已复制好的文本粘贴进去。
Editpad.org 自动将文本转换成纯文本。复制纯文本，粘贴到 ShopBase 后台详情编辑页。
方法二 （适合对HTML 和 CSS熟悉的用户）：按照这些步骤删除多余代码。
ShopBase/PlusBase 店铺，前往 产品展示（Products） > 所有产品（All products） ，点击需要编辑的产品。
PrintBase 店铺，前往 广告活动（Campaigns） > 所有广告活动（All campaigns） 点击需要编辑的产品。
如果您要编辑的专辑，前往 产品展示（Products） > 专辑（Collection），点击需要编辑的专辑。
描述（Description） 里点击 Source code（源代码） </> 打开 Source Code 编辑页面。
Source Code里找到 class="......" ，删除这个参数。 （如 class="product_collapse py12 brdr-bottom-1" 、 class="product__description-html" ）。
【例如】原来代码有 class="......" 。
删除 class="..." ，修改后的代码如下。
点击 保存（Save） 。
点击 保存更改（Save changes） 完成。点击 View 查看前端是否显示正常。
【例如】
原因：图片在外部系统储存，加载时间更长。另外由于依赖于外部系统，图片质量不稳定，在某些情况下可能无法加载。
处理方法：为了保证前端的加载速度，为买方提供更佳体验，建议您重新上传图片到 ShopBase。
ShopBase/PlusBase 店铺，前往 产品展示（Products） > 所有产品（All products） ，点击需要编辑的产品。
PrintBase 店铺，前往 广告活动（Campaigns） > 所有广告活动（All campaigns） 点击需要编辑的产品。
如果您要编辑的专辑，前往 产品展示（Products） > 专辑（Collection），点击需要编辑的专辑。
描述（Description） 里，删除错误图片。
鼠标放在想要添加图片的位置，点击 Insert/Edit Image 按钮。
Insert/Edit Image 里，上传图片，点击 Save。
点击 保存更改（Save changes） 完成。点击 View 查看前端是否显示正常。
如果您遇到的其他问题且无法处理，请联系 在线客服咨询。
【例如】:
原因：视频的大小在移动端显示不完整。
处理方法：您需要编辑产品页的源代码，添加代码到 偏好（Preference） 。
ShopBase/PlusBase 店铺，前往 产品展示（Products） > 所有产品（All products） ，点击需要编辑的产品。
PrintBase 店铺，前往 广告活动（Campaigns） > 所有广告活动（All campaigns） 点击需要编辑的产品。
如果您要编辑的专辑，前往 产品展示（Products） > 专辑（Collection），点击需要编辑的专辑。
描述（Description） 里点击 Source code（源代码） </> 打开 Source Code 编辑页面。
Source Code 里找到下面代码。
将以下代码替代。
代码里的视频大小可能不一样。
例如，您代码是 <p><iframe src="https://www.youtube.com/embed/Sk1y14kX9sc?ab_channel=YUMMY" width="560" height="314" allowfullscreen="allowfullscreen"></iframe></p> ，改成 <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>
点击 Save 保存。
点击 保存更改（Save changes） 完成。
前往 线上店铺（Online store） > 偏好（Preferences）。
其他脚本（Additional scripts）> 头文件（Head） 模块里，添加这个代码。
点击 Save 完成。
产品概述
PrintBase和ShopBase的POD产品概述
产品描述不整齐，不完整
图片不显示
视频在移动端显示不完整
我们列出一些常见故障和处理方法。
主要内容
A. 产品描述不整齐，不完整
B. 图片不显示
C. 视频在移动端显示不完整
A. 产品描述不整齐，不完整
例如：
产品详情显示三条分割线，正常显示一条。
产品描述内容是弹出式，正常显示在产品下面或右边。
原因：内容从其他网站复制粘贴过来，含有多余的 HTML、CSS代码。
处理方法：有两种处理方法。
方法一 （适合对HTML 和 CSS不熟悉的用户）：只复制，粘贴纯文本（plain text）内容，使用后台内置的编辑器来修改格式。使用 editpad.org 将文本转换成纯文本。
复制想要添加的文本。
打开 editpad.org，将已复制好的文本粘贴进去。
Editpad.org 自动将文本转换成纯文本。复制纯文本，粘贴到 ShopBase 后台详情编辑页。
方法二 （适合对HTML 和 CSS熟悉的用户）：按照这些步骤删除多余代码。
ShopBase/PlusBase 店铺，前往 产品展示（Products） > 所有产品（All products） ，点击需要编辑的产品。
PrintBase 店铺，前往 广告活动（Campaigns） > 所有广告活动（All campaigns） 点击需要编辑的产品。
如果您要编辑的专辑，前往 产品展示（Products） > 专辑（Collection），点击需要编辑的专辑。
描述（Description） 里点击 Source code（源代码） </> 打开 Source Code 编辑页面。
Source Code里找到 class="......" ，删除这个参数。 （如 class="product_collapse py12 brdr-bottom-1" 、 class="product__description-html" ）。
【例如】原来代码有 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>删除 class="..." ，修改后的代码如下。
<div>
<div>
<div>
<div><img
src="https://img.btdmp.com/files/10051315/2019/11/26/1574762616068a6695e5.png"
alt=""/></div>点击 保存（Save） 。
点击 保存更改（Save changes） 完成。点击 View 查看前端是否显示正常。
B. 图片不显示
【例如】
原因：图片在外部系统储存，加载时间更长。另外由于依赖于外部系统，图片质量不稳定，在某些情况下可能无法加载。
处理方法：为了保证前端的加载速度，为买方提供更佳体验，建议您重新上传图片到 ShopBase。
ShopBase/PlusBase 店铺，前往 产品展示（Products） > 所有产品（All products） ，点击需要编辑的产品。
PrintBase 店铺，前往 广告活动（Campaigns） > 所有广告活动（All campaigns） 点击需要编辑的产品。
如果您要编辑的专辑，前往 产品展示（Products） > 专辑（Collection），点击需要编辑的专辑。
描述（Description） 里，删除错误图片。
鼠标放在想要添加图片的位置，点击 Insert/Edit Image 按钮。
Insert/Edit Image 里，上传图片，点击 Save。
点击 保存更改（Save changes） 完成。点击 View 查看前端是否显示正常。
如果您遇到的其他问题且无法处理，请联系 在线客服咨询。
C. 视频在移动端显示不完整
【例如】:
原因：视频的大小在移动端显示不完整。
处理方法：您需要编辑产品页的源代码，添加代码到 偏好（Preference） 。
ShopBase/PlusBase 店铺，前往 产品展示（Products） > 所有产品（All products） ，点击需要编辑的产品。
PrintBase 店铺，前往 广告活动（Campaigns） > 所有广告活动（All campaigns） 点击需要编辑的产品。
如果您要编辑的专辑，前往 产品展示（Products） > 专辑（Collection），点击需要编辑的专辑。
描述（Description） 里点击 Source code（源代码） </> 打开 Source Code 编辑页面。
Source Code 里找到下面代码。
<p><iframe src="https://www.youtube.com/embed/example-video-link" width="xxx" height="xxx" allowfullscreen="allowfullscreen"></iframe></p>将以下代码替代。
<p class="custom-description-mobile-video"><iframe src="https://www.youtube.com/embed/example-video-link" width="xxx" height="xxx" allowfullscreen="allowfullscreen"></iframe></p>代码里的视频大小可能不一样。
例如，您代码是 <p><iframe src="https://www.youtube.com/embed/Sk1y14kX9sc?ab_channel=YUMMY" width="560" height="314" allowfullscreen="allowfullscreen"></iframe></p> ，改成 <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>
点击 Save 保存。
点击 保存更改（Save changes） 完成。
前往 线上店铺（Online store） > 偏好（Preferences）。
其他脚本（Additional scripts）> 头文件（Head） 模块里，添加这个代码。
<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>点击 Save 完成。
关联页面
产品概述
PrintBase和ShopBase的POD产品概述
更新于： 13/09/2022
谢谢！