产品详情页常见故障处理方法

当从其他地方将内容粘贴到产品或专辑详情，我们会难免遇到各种各样的问题。例如：

产品描述不整齐，不完整

图片不显示

视频在移动端显示不完整

我们列出一些常见故障和处理方法。

主要内容

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 完成。

了解POD产品

了解ShopBae的产品

产品详情页常见故障处理方法

主要内容

A. 产品描述不整齐，不完整

B. 图片不显示

C. 视频在移动端显示不完整

相关文章