本条还可参阅:
当从其他地方将内容粘贴到产品或专辑详情,我们会难免遇到各种各样的问题。例如:

产品描述不整齐,不完整
图片不显示
视频在移动端显示不完整

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

主要内容

A. 产品描述不整齐,不完整
B. 图片不显示
C. 视频在移动端显示不完整

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

例如

产品详情显示三条分割线,正常显示一条。


产品描述内容是弹出式,正常显示在产品下面或右边。



原因:内容从其他网站复制粘贴过来,含有多余的 HTML、CSS代码。

处理方法:有两种处理方法。

方法一 (适合对HTML 和 CSS不熟悉的用户):只复制,粘贴纯文本(plain text)内容,使用后台内置的编辑器来修改格式。使用 editpad.org 将文本转换成纯文本。

复制想要添加的文本。
打开 editpad.org,将已复制好的文本粘贴进去。
Editpad.org 自动将文本转换成纯文本。复制纯文本,粘贴到 ShopBase 后台详情编辑页。

使用 editpad.org 将文本转换成纯文本

方法二 (适合对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产品概述
这篇文章有帮助吗?
取消
谢谢!